fix: Fix accessibility findings with app layout toolbar (#3063)

cloudscape-design · Dec 6, 2024 · f7a3810 · f7a3810
1 parent a4ba868
commit f7a3810
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 17 deletions.
diff --git a/pages/app-layout/disable-paddings-breadcrumbs.page.tsx b/pages/app-layout/disable-paddings-breadcrumbs.page.tsx
@@ -16,7 +16,11 @@ export default function () {
       <AppLayout
         ariaLabels={labels}
         disableContentPaddings={true}
-        breadcrumbs={<div className={styles.highlightBorder}>Breadcrumbs</div>}
+        breadcrumbs={
+          <nav aria-label="Breadcrumbs" className={styles.highlightBorder}>
+            Breadcrumbs
+          </nav>
+        }
         notifications={
           <div className={styles.highlightBorder}>
             <Box variant="h2">Notifications</Box>

diff --git a/pages/app-layout/runtime-drawers.page.tsx b/pages/app-layout/runtime-drawers.page.tsx
@@ -19,6 +19,7 @@ import awsuiPlugins from '~components/internal/plugins';
 import './utils/external-widget';
 import AppContext, { AppContextType } from '../app/app-context';
 import { Breadcrumbs, Containers, CustomDrawerContent } from './utils/content-blocks';
+import { drawerLabels } from './utils/drawers';
 import appLayoutLabels from './utils/labels';
 
 type DemoContext = React.Context<
@@ -64,7 +65,7 @@ export default function WithDrawers() {
 
   return (
     <AppLayout
-      ariaLabels={appLayoutLabels}
+      ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
       breadcrumbs={<Breadcrumbs />}
       ref={appLayoutRef}
       content={

diff --git a/pages/app-layout/stateful.page.tsx b/pages/app-layout/stateful.page.tsx
@@ -12,7 +12,11 @@ export default function AppLayoutStatefulDemo() {
   return (
     <AppLayout
       ariaLabels={labels}
-      breadcrumbs={<Counter id="breadcrumbs" />}
+      breadcrumbs={
+        <nav aria-label="Breadcrumbs">
+          <Counter id="breadcrumbs" />
+        </nav>
+      }
       navigation={<Counter id="navigation" />}
       tools={<Counter id="tools" />}
       content={

diff --git a/pages/app-layout/utils/content-blocks.tsx b/pages/app-layout/utils/content-blocks.tsx
@@ -182,10 +182,15 @@ export function CustomDrawerContent() {
     <div className={styles['custom-drawer-wrapper']}>
       <div className={styles['drawer-sticky-header']} data-testid="drawer-sticky-header">
         <Box variant="h3" tagOverride="h2" padding="n">
-          Sticky header
+          <span id="custom-drawer-heading">Sticky header</span>
         </Box>
       </div>
-      <div className={styles['drawer-scrollable-content']}>
+      <div
+        className={styles['drawer-scrollable-content']}
+        role="region"
+        aria-labelledby="custom-drawer-heading"
+        tabIndex={0}
+      >
         <ScrollableDrawerContent />
       </div>
       <div className={styles['drawer-sticky-footer']} data-testid="drawer-sticky-footer">

diff --git a/src/__a11y__/a11y-app-layout-toolbar.test.ts b/src/__a11y__/a11y-app-layout-toolbar.test.ts
@@ -0,0 +1,30 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+import { findAllPages } from '../__integ__/utils';
+import { getUrlParams } from '../app-layout/__integ__/utils';
+import A11yPageObject from './a11y-page-object';
+
+const EXCLUDED_PAGES = [
+  // Test page for an app layout nested inside another through an iframe.
+  // Not a use case that's encouraged.
+  'app-layout/multi-layout-global-drawer-child-layout',
+];
+
+describe('A11y checks for app layout toolbar', () => {
+  findAllPages()
+    .filter(page => page.startsWith('app-layout') && !EXCLUDED_PAGES.includes(page))
+    .forEach(inputUrl => {
+      const url = `#/light/${inputUrl}?${getUrlParams('refresh-toolbar')}`;
+      test(
+        url,
+        useBrowser(async browser => {
+          const page = new A11yPageObject(browser);
+          await browser.url(url);
+          await page.waitForVisible('main');
+          await page.assertNoAxeViolations();
+        })
+      );
+    });
+});
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx
@@ -94,7 +94,7 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutD
                 [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
               }),
           }}
-          data-testid={`awsui-app-layout-drawer-${activeDrawerId}`}
+          data-testid={activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}`}
         >
           {!isMobile && activeDrawer?.resizable && (
             <div className={styles['drawer-slider']}>

diff --git a/src/app-layout/visual-refresh-toolbar/split-panel/index.tsx b/src/app-layout/visual-refresh-toolbar/split-panel/index.tsx
@@ -50,9 +50,10 @@ export function AppLayoutSplitPanelDrawerBottomImplementation({
   splitPanelInternals,
   appLayoutInternals,
 }: AppLayoutSplitPanelDrawerBottomImplementationProps) {
+  const { splitPanelControlId, splitPanelAnimationDisabled } = appLayoutInternals;
   return (
-    <SplitPanelProvider {...splitPanelInternals} animationDisabled={appLayoutInternals.splitPanelAnimationDisabled}>
-      {children}
+    <SplitPanelProvider {...splitPanelInternals} animationDisabled={splitPanelAnimationDisabled}>
+      <section id={splitPanelControlId}>{children}</section>
     </SplitPanelProvider>
   );
 }

diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx
@@ -118,14 +118,7 @@ export function DrawerTriggers({
       ref={triggersContainerRef}
       role="region"
     >
-      <div
-        className={clsx(styles['drawers-trigger-content'], {
-          [styles['has-multiple-triggers']]: hasMultipleTriggers,
-          [styles['has-open-drawer']]: activeDrawerId,
-        })}
-        role="toolbar"
-        aria-orientation="horizontal"
-      >
+      <div className={styles['drawers-trigger-content']} role="toolbar" aria-orientation="horizontal">
         {splitPanelToggleProps && (
           <>
             <TriggerButton

diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
@@ -166,6 +166,9 @@ export function AppLayoutToolbarImplementation({
   }, [anyPanelOpenInMobile]);
 
   const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;
+  const navLandmarkAttributes = navigationOpen
+    ? { role: 'presentation' }
+    : { role: 'navigation', 'aria-label': ariaLabels?.navigation };
 
   return (
     <ToolbarSlot
@@ -180,7 +183,7 @@ export function AppLayoutToolbarImplementation({
     >
       <div className={styles['toolbar-container']}>
         {hasNavigation && (
-          <nav className={clsx(styles['universal-toolbar-nav'])}>
+          <nav {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>
             <TriggerButton
               ariaLabel={ariaLabels?.navigationToggle ?? undefined}
               ariaExpanded={false}