From 05d634732e7f4ba21c5342db3c126870779c112f Mon Sep 17 00:00:00 2001 From: Avinash Dwarapu Date: Tue, 26 Nov 2024 18:00:51 +0100 Subject: [PATCH 1/4] fix: Provide aria-label to the toolbar button navigation region --- src/app-layout/visual-refresh-toolbar/toolbar/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx index 541a47c4de..88d004be90 100644 --- a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx +++ b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx @@ -180,7 +180,11 @@ export function AppLayoutToolbarImplementation({ >
{hasNavigation && ( -
} + breadcrumbs={ + + } notifications={
Notifications diff --git a/pages/app-layout/runtime-drawers.page.tsx b/pages/app-layout/runtime-drawers.page.tsx index 6e77c60b70..b8285406d0 100644 --- 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 ( } ref={appLayoutRef} content={ diff --git a/pages/app-layout/stateful.page.tsx b/pages/app-layout/stateful.page.tsx index c9c3d00aa2..6eb727999f 100644 --- a/pages/app-layout/stateful.page.tsx +++ b/pages/app-layout/stateful.page.tsx @@ -12,7 +12,11 @@ export default function AppLayoutStatefulDemo() { return ( } + breadcrumbs={ + + } navigation={} tools={} content={ diff --git a/pages/app-layout/utils/content-blocks.tsx b/pages/app-layout/utils/content-blocks.tsx index b1ca229395..e3a927e749 100644 --- a/pages/app-layout/utils/content-blocks.tsx +++ b/pages/app-layout/utils/content-blocks.tsx @@ -183,10 +183,15 @@ export function CustomDrawerContent() {
- Sticky header + Sticky header
-
+
diff --git a/src/__a11y__/app-layout-toolbar.test.ts b/src/__a11y__/app-layout-toolbar.test.ts new file mode 100644 index 0000000000..30851e5541 --- /dev/null +++ b/src/__a11y__/app-layout-toolbar.test.ts @@ -0,0 +1,24 @@ +// 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'; + +describe('A11y checks for app layout toolbar', () => { + findAllPages() + .filter(page => page.startsWith('app-layout')) + .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 index 9055646065..24f72e74d6 100644 --- 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 && (
diff --git a/src/app-layout/visual-refresh-toolbar/split-panel/index.tsx b/src/app-layout/visual-refresh-toolbar/split-panel/index.tsx index b273539cd9..9bf731d2a2 100644 --- 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 ( - - {children} + +
{children}
 ); } diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx index cd4a9f8818..d8b9405169 100644 --- 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" > -
+
{splitPanelToggleProps && ( <> Date: Fri, 29 Nov 2024 09:52:09 +0100 Subject: [PATCH 3/4] Exclude multi-layout-global-drawer-child-layout --- ...ut-toolbar.test.ts => a11y-app-layout-toolbar.test.ts} | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) rename src/__a11y__/{app-layout-toolbar.test.ts => a11y-app-layout-toolbar.test.ts} (73%) diff --git a/src/__a11y__/app-layout-toolbar.test.ts b/src/__a11y__/a11y-app-layout-toolbar.test.ts similarity index 73% rename from src/__a11y__/app-layout-toolbar.test.ts rename to src/__a11y__/a11y-app-layout-toolbar.test.ts index 30851e5541..1eea523023 100644 --- a/src/__a11y__/app-layout-toolbar.test.ts +++ b/src/__a11y__/a11y-app-layout-toolbar.test.ts @@ -6,9 +6,15 @@ 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')) + .filter(page => page.startsWith('app-layout') && !EXCLUDED_PAGES.includes(page)) .forEach(inputUrl => { const url = `#/light/${inputUrl}?${getUrlParams('refresh-toolbar')}`; test( From 4eb02bfdc730f30c668378b27734c0d6d47087dd Mon Sep 17 00:00:00 2001 From: Avinash Dwarapu Date: Mon, 2 Dec 2024 13:55:12 +0100 Subject: [PATCH 4/4] Move conditional props to a single spreadable object --- src/app-layout/visual-refresh-toolbar/toolbar/index.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx index a345bdc1e9..ee8b9ab6ac 100644 --- 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 (
{hasNavigation && ( -