feat: Adds overflow aria label

cloudscape-design · Aug 10, 2023 · d7a08dd · d7a08dd
1 parent 270334d
commit d7a08dd
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 2 deletions.
diff --git a/pages/app-layout/with-drawers.page.tsx b/pages/app-layout/with-drawers.page.tsx
@@ -39,6 +39,7 @@ export default function WithDrawers() {
     : {
         drawers: {
           ariaLabel: 'Drawers',
+          overflowAriaLabel: 'Overflow triggers',
           activeDrawerId: activeDrawerId,
           items: [
             {

diff --git a/src/app-layout/drawer/index.tsx b/src/app-layout/drawer/index.tsx
@@ -244,6 +244,7 @@ export const DrawerTriggersBar = ({
                     }}
                     hasOverflowBadge={overflowItemHasBadge}
                     hasActiveStyles={overflowItemIsActive()}
+                    ariaLabel={drawers.overflowAriaLabel}
                   />
                 </span>
               )}

diff --git a/src/app-layout/drawer/interfaces.ts b/src/app-layout/drawer/interfaces.ts
@@ -55,6 +55,7 @@ export interface DrawerTriggersBarProps {
     activeDrawerId?: string;
     onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;
     ariaLabel?: string;
+    overflowAriaLabel?: string;
   };
 }
 
@@ -86,5 +87,6 @@ export interface InternalDrawerProps {
     onChange?: NonCancelableEventHandler<string>;
     onResize?: NonCancelableEventHandler<{ size: number; id: string }>;
     ariaLabel?: string;
+    overflowAriaLabel?: string;
   };
 }
diff --git a/src/app-layout/drawer/overflow-menu.tsx b/src/app-layout/drawer/overflow-menu.tsx
@@ -48,10 +48,11 @@ interface OverflowMenuProps {
   onItemClick: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;
   hasOverflowBadge?: boolean;
   hasActiveStyles?: boolean;
+  ariaLabel?: string;
 }
 
 export default function OverflowMenu(props: OverflowMenuProps) {
-  const { drawersRefs, className, overflowItems, onItemClick, hasOverflowBadge, hasActiveStyles } = props;
+  const { drawersRefs, className, overflowItems, onItemClick, hasOverflowBadge, hasActiveStyles, ariaLabel } = props;
   return (
     <InternalButtonDropdown
       ref={drawersRefs ? drawersRefs.toggle : null}
@@ -64,7 +65,7 @@ export default function OverflowMenu(props: OverflowMenuProps) {
         badge: item.badge,
       }))}
       onItemClick={onItemClick}
-      ariaLabel="Overflow drawer triggers"
+      ariaLabel={ariaLabel}
       variant="icon"
       customTriggerBuilder={getTrigger(hasOverflowBadge, hasActiveStyles)}
       expandToViewport={true}

diff --git a/src/app-layout/index.tsx b/src/app-layout/index.tsx
@@ -594,6 +594,7 @@ const OldAppLayout = React.forwardRef(
                         }
                       },
                       ariaLabel: drawers.ariaLabel,
+                      overflowAriaLabel: drawers.overflowAriaLabel,
                     }
                   : undefined
               }
@@ -805,6 +806,7 @@ const OldAppLayout = React.forwardRef(
                     }
                   },
                   ariaLabel: drawers.ariaLabel,
+                  overflowAriaLabel: drawers.overflowAriaLabel,
                 }}
               />
             )}

diff --git a/src/app-layout/mobile-toolbar/index.tsx b/src/app-layout/mobile-toolbar/index.tsx
@@ -64,6 +64,7 @@ interface MobileToolbarProps {
     activeDrawerId: string | undefined;
     onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;
     ariaLabel?: string;
+    overflowAriaLabel?: string;
   };
 }
 
@@ -153,6 +154,7 @@ export function MobileToolbar({
                   });
                 }}
                 hasOverflowBadge={overflowItemHasBadge}
+                ariaLabel={drawers.overflowAriaLabel}
               />
             </span>
           )}

diff --git a/src/app-layout/visual-refresh/drawers.tsx b/src/app-layout/visual-refresh/drawers.tsx
@@ -300,6 +300,7 @@ function DesktopTriggers() {
               handleDrawersClick(detail.id);
             }}
             hasActiveStyles={true}
+            ariaLabel={drawers.overflowAriaLabel}
           />
         )}
         {hasSplitPanel && splitPanelToggle.displayed && (
@@ -409,6 +410,7 @@ export function MobileTriggers() {
             handleDrawersClick(detail.id);
           }}
           hasOverflowBadge={overflowItemHasBadge}
+          ariaLabel={drawers.overflowAriaLabel}
         />
       )}
     </aside>