feat: add aria-label to action items

ccontrols · Mar 21, 2020 · 8b51ae1 · 8b51ae1
1 parent 71876ab
commit 8b51ae1
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -54,6 +54,7 @@ The third-libraries used include in no particular order:
 -   [react-popper-tooltip](https://react-popper-tooltip.netlify.com) for popups and tooltips.
 -   [react-animate-height](https://muffinman.io/react-animate-height/) for collapsible components.
 -   [@theme-ui/presets](https://theme-ui.com/packages/presets/) for custom theming.
+-   [react-switch](https://github.com/markusenglund/react-switch) for toggle editor
 
 <!-- END-PACKAGE-SECTION -->
 

diff --git a/ui/components/src/ActionBar/ActionBar.tsx b/ui/components/src/ActionBar/ActionBar.tsx
@@ -32,6 +32,11 @@ export interface ActionItem {
    * optional order, if not provided will use the natural order of items from right to left
    */
   order?: number;
+
+  /**
+   * optional label visible to screen readers for aria accessibility.
+   */
+  'aria-label'?: string;
 }
 
 export interface ActionBarProps {
@@ -111,26 +116,32 @@ export const ActionBar: FunctionComponent<ActionBarProps> = ({
             //@ts-ignore
             return a.order - b.order;
           })
-          .map(({ title, onClick, disabled }, index) => (
-            <Box
-              key={`${typeof title === 'string' ? title : 'item'}_${index}`}
-              sx={{
-                mt: 1,
-                mx: 1,
-                fontSize: 1,
-                a: ActionColors({ theme, disabled }),
-                button: ActionColors({ theme, disabled }),
-              }}
-            >
-              {typeof title === 'string' ? (
-                <Button onClick={onClick} disabled={disabled}>
-                  {title}
-                </Button>
-              ) : (
-                title
-              )}
-            </Box>
-          ))}
+          .map(
+            ({ title, onClick, disabled, 'aria-label': ariaLabel }, index) => (
+              <Box
+                key={`${typeof title === 'string' ? title : 'item'}_${index}`}
+                sx={{
+                  mt: 1,
+                  mx: 1,
+                  fontSize: 1,
+                  a: ActionColors({ theme, disabled }),
+                  button: ActionColors({ theme, disabled }),
+                }}
+              >
+                {typeof title === 'string' ? (
+                  <Button
+                    onClick={onClick}
+                    disabled={disabled}
+                    aria-label={ariaLabel}
+                  >
+                    {title}
+                  </Button>
+                ) : (
+                  title
+                )}
+              </Box>
+            ),
+          )}
       </Flex>
     </Box>
   );

diff --git a/ui/components/src/Source/Source.tsx b/ui/components/src/Source/Source.tsx
@@ -30,7 +30,12 @@ export const Source: FC<SourceProps> = ({
   };
 
   const actionsItems = [
-    { title: copied ? 'copied' : 'copy', onClick: onCopy },
+    {
+      title: copied ? 'copied' : 'copy',
+      onClick: onCopy,
+      id: 'copy',
+      'aria-label': 'copy the displayed source code',
+    },
     ...(Array.isArray(actions) ? [...actions] : []),
   ];