diff --git a/pages/app-layout/disable-paddings-breadcrumbs.page.tsx b/pages/app-layout/disable-paddings-breadcrumbs.page.tsx index aa1a396897..68790ffdff 100644 --- 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 () { Breadcrumbs} + 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 b2df9dd35a..ef1889b6b0 100644 --- a/pages/app-layout/utils/content-blocks.tsx +++ b/pages/app-layout/utils/content-blocks.tsx @@ -182,10 +182,15 @@ export function CustomDrawerContent() {
- Sticky header + Sticky header
-
+
diff --git a/src/__a11y__/a11y-app-layout-toolbar.test.ts b/src/__a11y__/a11y-app-layout-toolbar.test.ts new file mode 100644 index 0000000000..1eea523023 --- /dev/null +++ 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 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 && ( <>
{hasNavigation && ( -