diff --git a/.changeset/modern-otters-bake.md b/.changeset/modern-otters-bake.md new file mode 100644 index 0000000000..9ed2c89192 --- /dev/null +++ b/.changeset/modern-otters-bake.md @@ -0,0 +1,7 @@ +--- +"@hashicorp/design-system-components": patch +--- + +`SideNav` - Made a11y related improvements including: +- Changed `List::Title` to h3 & added visually hidden h2 to AppSideNav +- Replaced aria-label for `ToggleButton` with aria-labelledby and aria-expanded diff --git a/packages/components/src/components/hds/side-nav/base.hbs b/packages/components/src/components/hds/side-nav/base.hbs index c304832972..7c9362e928 100644 --- a/packages/components/src/components/hds/side-nav/base.hbs +++ b/packages/components/src/components/hds/side-nav/base.hbs @@ -4,6 +4,8 @@ }} {{! IMPORTANT: we need to add "squishies" here (~) because otherwise the whitespace added by Ember causes the empty element to still have visible padding - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }}
+

Application local navigation

+
{{yield to="root"}}
diff --git a/packages/components/src/components/hds/side-nav/index.hbs b/packages/components/src/components/hds/side-nav/index.hbs index 2a7df14374..69914a8001 100644 --- a/packages/components/src/components/hds/side-nav/index.hbs +++ b/packages/components/src/components/hds/side-nav/index.hbs @@ -31,6 +31,8 @@ {{! template-lint-enable no-invalid-interactive}} diff --git a/packages/components/src/components/hds/side-nav/index.ts b/packages/components/src/components/hds/side-nav/index.ts index 5ed5df55e3..5dcae5650b 100644 --- a/packages/components/src/components/hds/side-nav/index.ts +++ b/packages/components/src/components/hds/side-nav/index.ts @@ -4,6 +4,7 @@ */ import Component from '@glimmer/component'; +import { deprecate } from '@ember/debug'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { registerDestructor } from '@ember/destroyable'; @@ -21,7 +22,10 @@ export interface HdsSideNavSignature { a11yRefocusNavigationText?: string; a11yRefocusRouteChangeValidator?: string; a11yRefocusExcludeAllQueryParams?: boolean; - ariaLabel?: string; + /** + * @deprecated The `@ariaLabel` argument for "Hds::SideNav" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button + */ + ariaLabel?: string | undefined; // eslint-disable-next-line @typescript-eslint/no-explicit-any onToggleMinimizedStatus?: (arg: boolean) => void; // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -73,6 +77,23 @@ export default class HdsSideNav extends Component { registerDestructor(this, (): void => { this.removeEventListeners(); }); + + if (args.ariaLabel !== undefined) { + deprecate( + 'The `@ariaLabel` argument for "Hds::SideNav" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button', + false, + { + id: 'hds.sidenav', + until: '5.0.0', + url: 'https://helios.hashicorp.design/components/sidenav?tab=version%20history#4140', + for: '@hashicorp/design-system-components', + since: { + available: '4.14.0', + enabled: '5.0.0', + }, + } + ); + } } addEventListeners(): void { @@ -107,15 +128,10 @@ export default class HdsSideNav extends Component { } /** - * @param ariaLabel - * @type {string} - * @default 'close menu' + * @deprecated The `@ariaLabel` argument for "Hds::SideNav" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button */ - get ariaLabel(): string { - if (this.isMinimized) { - return this.args.ariaLabel ?? 'Open menu'; - } - return this.args.ariaLabel ?? 'Close menu'; + get ariaLabel(): string | undefined { + return this.args.ariaLabel; } get classNames(): string { diff --git a/packages/components/src/components/hds/side-nav/list/index.hbs b/packages/components/src/components/hds/side-nav/list/index.hbs index 255723ea2f..9b547bf8f8 100644 --- a/packages/components/src/components/hds/side-nav/list/index.hbs +++ b/packages/components/src/components/hds/side-nav/list/index.hbs @@ -3,14 +3,14 @@ SPDX-License-Identifier: MPL-2.0 }} -