diff --git a/.changeset/grumpy-lemons-like.md b/.changeset/grumpy-lemons-like.md new file mode 100644 index 0000000000..ef09e4a7e8 --- /dev/null +++ b/.changeset/grumpy-lemons-like.md @@ -0,0 +1,4 @@ +--- +"@patternfly/elements": patch +--- +`<pf-jump-links>`: improve screen reader accessibility by labeling the navigation landmark element diff --git a/elements/pf-jump-links/pf-jump-links.ts b/elements/pf-jump-links/pf-jump-links.ts index 9f9ba022a7..d1ae098299 100644 --- a/elements/pf-jump-links/pf-jump-links.ts +++ b/elements/pf-jump-links/pf-jump-links.ts @@ -72,8 +72,8 @@ export class PfJumpLinks extends LitElement { /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */ @property({ type: Number }) offset = 0; - /** Label to add to nav element. */ - @property() label?: string; + /** Label to add to nav element. Required for accessibility. */ + @property({ reflect: true }) label = 'Jump to section'; #kids = this.querySelectorAll?.<LitElement>(':is(pf-jump-links-item, pf-jump-links-list)'); @@ -121,11 +121,11 @@ export class PfJumpLinks extends LitElement { render(): TemplateResult<1> { return html` - <nav id="container">${this.expandable ? html` + <nav id="container" aria-labelledby="label">${this.expandable ? html` <details ?open="${this.expanded}" @toggle="${this.#onToggle}"> <summary> <pf-icon icon="chevron-right"></pf-icon> - <span id="label">${this.label}</span> + <span part="label" id="label">${this.label}</span> </summary> <div role="listbox" aria-labelledby="label"> <slot></slot>