fix(): replace hub-radio input with tile-select to resolve a11y bug (#…

…1665)
Esri · Sep 30, 2024 · 80dddc0 · 80dddc0
1 parent 6f4cb97
commit 80dddc0
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/common/src/sites/_internal/SiteUiSchemaDiscussions.ts b/packages/common/src/sites/_internal/SiteUiSchemaDiscussions.ts
@@ -25,7 +25,8 @@ export const buildUiSchema = async (
             scope: "/properties/_discussions",
             type: "Control",
             options: {
-              control: "hub-field-input-radio",
+              control: "hub-field-input-tile-select",
+              layout: "horizontal",
               labels: [
                 `{{${i18nScope}.fields.discussable.enabled.label:translate}}`,
                 `{{${i18nScope}.fields.discussable.disabled.label:translate}}`,
@@ -35,6 +36,8 @@ export const buildUiSchema = async (
                 `{{${i18nScope}.fields.discussable.disabled.description:translate}}`,
               ],
               icons: ["speech-bubbles", "circle-disallowed"],
+              type: "radio",
+              styles: { "max-width": "45rem" },
             },
           },
         ],

diff --git a/packages/common/src/sites/_internal/SiteUiSchemaFollowers.ts b/packages/common/src/sites/_internal/SiteUiSchemaFollowers.ts
@@ -61,7 +61,8 @@ export const buildUiSchema = async (
             scope: "/properties/_followers/properties/isDiscussable",
             type: "Control",
             options: {
-              control: "hub-field-input-radio",
+              control: "hub-field-input-tile-select",
+              layout: "horizontal",
               labels: [
                 `{{${i18nScope}.fields.followers.discussable.enabled.label:translate}}`,
                 `{{${i18nScope}.fields.followers.discussable.disabled.label:translate}}`,
@@ -71,6 +72,8 @@ export const buildUiSchema = async (
                 `{{${i18nScope}.fields.followers.discussable.disabled.description:translate}}`,
               ],
               icons: ["speech-bubbles", "circle-disallowed"],
+              type: "radio",
+              styles: { "max-width": "45rem" },
             },
           },
         ],

diff --git a/packages/common/test/sites/_internal/SiteUiSchemaFollowers.test.ts b/packages/common/test/sites/_internal/SiteUiSchemaFollowers.test.ts
@@ -69,7 +69,8 @@ describe("buildUiSchema: site followers", () => {
               scope: "/properties/_followers/properties/isDiscussable",
               type: "Control",
               options: {
-                control: "hub-field-input-radio",
+                control: "hub-field-input-tile-select",
+                layout: "horizontal",
                 labels: [
                   `{{some.scope.fields.followers.discussable.enabled.label:translate}}`,
                   `{{some.scope.fields.followers.discussable.disabled.label:translate}}`,
@@ -79,6 +80,8 @@ describe("buildUiSchema: site followers", () => {
                   `{{some.scope.fields.followers.discussable.disabled.description:translate}}`,
                 ],
                 icons: ["speech-bubbles", "circle-disallowed"],
+                type: "radio",
+                styles: { "max-width": "45rem" },
               },
             },
           ],

diff --git a/packages/common/test/sites/_internal/SiteuUiSchemaDiscussions.test.ts b/packages/common/test/sites/_internal/SiteuUiSchemaDiscussions.test.ts
@@ -16,7 +16,8 @@ describe("buildUiSchema: site discussions", () => {
               scope: "/properties/_discussions",
               type: "Control",
               options: {
-                control: "hub-field-input-radio",
+                control: "hub-field-input-tile-select",
+                layout: "horizontal",
                 labels: [
                   "{{some.scope.fields.discussable.enabled.label:translate}}",
                   "{{some.scope.fields.discussable.disabled.label:translate}}",
@@ -26,6 +27,8 @@ describe("buildUiSchema: site discussions", () => {
                   "{{some.scope.fields.discussable.disabled.description:translate}}",
                 ],
                 icons: ["speech-bubbles", "circle-disallowed"],
+                type: "radio",
+                styles: { "max-width": "45rem" },
               },
             },
           ],