Skip to content

Commit 6b3031b

Browse files
fix(jump-links): landmark label (#2870)
* fix(jump-links): landmark label Closes #2860 * fix(jump-links): add default label * fix(jump-links): update default label * feat(jump-links): add part to label --------- Co-authored-by: Adam Johnson <adam.b.johnson1@gmail.com>
1 parent a060b8b commit 6b3031b

2 files changed

Lines changed: 8 additions & 4 deletions

File tree

.changeset/grumpy-lemons-like.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
"@patternfly/elements": patch
3+
---
4+
`<pf-jump-links>`: improve screen reader accessibility by labeling the navigation landmark element

elements/pf-jump-links/pf-jump-links.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ export class PfJumpLinks extends LitElement {
3535
/** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */
3636
@property({ type: Number }) offset = 0;
3737

38-
/** Label to add to nav element. */
39-
@property() label?: string;
38+
/** Label to add to nav element. Required for accessibility. */
39+
@property({ reflect: true }) label = 'Jump to section';
4040

4141
#kids = this.querySelectorAll?.<LitElement>(':is(pf-jump-links-item, pf-jump-links-list)');
4242

@@ -84,11 +84,11 @@ export class PfJumpLinks extends LitElement {
8484

8585
render(): TemplateResult<1> {
8686
return html`
87-
<nav id="container">${this.expandable ? html`
87+
<nav id="container" aria-labelledby="label">${this.expandable ? html`
8888
<details ?open="${this.expanded}" @toggle="${this.#onToggle}">
8989
<summary>
9090
<pf-icon icon="chevron-right"></pf-icon>
91-
<span id="label">${this.label}</span>
91+
<span part="label" id="label">${this.label}</span>
9292
</summary>
9393
<div role="listbox" aria-labelledby="label">
9494
<!-- Place pf-jump-links-items here -->

0 commit comments

Comments
 (0)