fix(composer): add aria labels to rules panel

awslabs · Sep 29, 2023 · ff78ab0 · ff78ab0
1 parent f793a45
commit ff78ab0
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/packages/scene-composer/src/components/panels/SceneRulesPanel.tsx b/packages/scene-composer/src/components/panels/SceneRulesPanel.tsx
@@ -80,9 +80,24 @@ export const SceneRuleMapExpandableInfoSection: React.FC<
   if (newRule) {
     items.push(newRule);
   }
+  //TODO: When we migrate from polaris to cloudscape, just pass these as normal props to AttributeEditor
+  const a11yProps = {
+    i18nStrings: {
+      itemRemovedAriaLive: intl.formatMessage({
+        defaultMessage: 'Removed statement',
+        description: 'Aria live announcement for when a statement is removed',
+      }),
+    },
+    removeButtonAriaLabel: (statement: IRuleStatementInternal) =>
+      `${intl.formatMessage({
+        defaultMessage: 'Remove statement',
+        description: 'Aria label for remove statement button',
+      })} ${statement.expression}`,
+  };
   return (
     <ExpandableInfoSection title={ruleBasedMapId} defaultExpanded={false}>
       <AttributeEditor
+        {...a11yProps}
         onAddButtonClick={() => setNewRule({ expression: '', target: '' })}
         onRemoveButtonClick={({ detail: { itemIndex } }) => onRemoveRule(itemIndex)}
         items={items}

diff --git a/packages/scene-composer/src/components/panels/__snapshots__/SceneRulesPanel.spec.tsx.snap b/packages/scene-composer/src/components/panels/__snapshots__/SceneRulesPanel.spec.tsx.snap
@@ -14,6 +14,7 @@ exports[`SceneRulesPanel returns expected elements. SceneRulesPanel returns expe
         data-mocked="AttributeEditor"
         definition="[{\\"label\\":\\"Expression\\"},{\\"label\\":\\"Target\\"}]"
         empty="No statements"
+        i18nstrings="{\\"itemRemovedAriaLive\\":\\"Removed statement\\"}"
         items="[{\\"expression\\":\\"exp1\\",\\"target\\":\\"target1\\"},\\"mapId\\"]"
         removebuttontext="Remove statement"
       />

diff --git a/packages/scene-composer/translations/IotAppKitSceneComposer.en_US.json b/packages/scene-composer/translations/IotAppKitSceneComposer.en_US.json
@@ -387,6 +387,10 @@
     "note": "Menu Item",
     "text": "Pointer Lock"
   },
+  "J+haL1": {
+    "note": "Aria live announcement for when a statement is removed",
+    "text": "Removed statement"
+  },
   "JTUN+G": {
     "note": "Form field label",
     "text": "Focal length"
@@ -539,6 +543,10 @@
     "note": "Expandable Section title",
     "text": "Tag"
   },
+  "RZeAOs": {
+    "note": "Aria label for remove statement button",
+    "text": "Remove statement"
+  },
   "SYAG+q": {
     "note": "Form Field label",
     "text": "Environment Preset"