Improve aria labels (#92)

PBI: 29061 Task: 31411 * Improve aria labels * remove double button
microsoft · Aug 3, 2019 · 9029711 · 9029711
1 parent da6b882
commit 9029711
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 9 deletions.
diff --git a/src/view/components/Button.tsx b/src/view/components/Button.tsx
@@ -17,6 +17,8 @@ const Button: React.FC<IButtonProps> = props => {
     <button
       id={`${props.label}-button`}
       className={`${props.label}-button button`}
+      aria-label={props.label}
+      role="button"
       onClick={props.onClick}
       style={buttonStyle}
     >

diff --git a/src/view/components/cpx/Cpx.tsx b/src/view/components/cpx/Cpx.tsx
@@ -259,11 +259,11 @@ const setupButtons = (props: IProps): void => {
 const addButtonLabels = (button: HTMLElement) => {
   let label = "";
   if (button.id.match(/AB/) !== null) {
-    label = "A+B";
+    label = "a+b";
   } else if (button.id.match(/A/) !== null) {
-    label = "A";
+    label = "a";
   } else if (button.id.match(/B/) !== null) {
-    label = "B";
+    label = "b";
   }
   accessibility.setAria(button, "button", label);
 };
@@ -319,11 +319,7 @@ const setupSwitch = (props: IProps): void => {
     svgSwitch.onkeyup = e => props.onKeyEvent(e, false);
 
     accessibility.makeFocusable(svgSwitch);
-    accessibility.setAria(
-      svgSwitch,
-      "button",
-      "On/Off Switch. Current state : " + props.switch ? "On" : "Off"
-    );
+    accessibility.setAria(svgSwitch, "button", "On/Off Switch");
   }
 };
 

diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx
@@ -61,7 +61,7 @@ class ToolBar extends React.Component {
           width={TOOLBAR_BUTTON_WIDTH}
           onClick={() => {}}
           image={TOOLBAR_SVG.NEO_PIXEL_SVG}
-          label="neo_pixel"
+          label="neopixel"
         />
         <Button
           width={TOOLBAR_BUTTON_WIDTH}