From 017052e42dbc96756ebd9f5b7ae680f5b164759d Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Sun, 27 Oct 2024 08:08:12 +0200
Subject: [PATCH 1/4] fix(jump-links): landmark label
Closes #2860
---
.changeset/grumpy-lemons-like.md | 4 ++++
elements/pf-jump-links/pf-jump-links.ts | 2 +-
2 files changed, 5 insertions(+), 1 deletion(-)
create mode 100644 .changeset/grumpy-lemons-like.md
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..322fd50260 100644
--- a/elements/pf-jump-links/pf-jump-links.ts
+++ b/elements/pf-jump-links/pf-jump-links.ts
@@ -121,7 +121,7 @@ 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>
From 17abdfc3fdea5c96ef882bf89f20036fcc98ae9e Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Tue, 5 Nov 2024 13:29:53 +0200
Subject: [PATCH 2/4] fix(jump-links): add default label
---
elements/pf-jump-links/pf-jump-links.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/elements/pf-jump-links/pf-jump-links.ts b/elements/pf-jump-links/pf-jump-links.ts
index 322fd50260..ab3c6254e5 100644
--- a/elements/pf-jump-links/pf-jump-links.ts
+++ b/elements/pf-jump-links/pf-jump-links.ts
@@ -73,7 +73,7 @@ export class PfJumpLinks extends LitElement {
@property({ type: Number }) offset = 0;
/** Label to add to nav element. */
- @property() label?: string;
+ @property({ reflect: true }) label = 'Jump links';
#kids = this.querySelectorAll?.<LitElement>(':is(pf-jump-links-item, pf-jump-links-list)');
From 27cbcf1f035fb78498cd3b3ce3c8bb692020a6ce Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Tue, 5 Nov 2024 12:10:49 -0500
Subject: [PATCH 3/4] fix(jump-links): update default label
---
elements/pf-jump-links/pf-jump-links.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/elements/pf-jump-links/pf-jump-links.ts b/elements/pf-jump-links/pf-jump-links.ts
index ab3c6254e5..6aa85615e4 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({ reflect: true }) label = 'Jump links';
+ /** 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)');
From a8397ef3f1a85b9a2e5b70db9e3564f14f84fb92 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Tue, 5 Nov 2024 12:15:32 -0500
Subject: [PATCH 4/4] feat(jump-links): add part to label
---
elements/pf-jump-links/pf-jump-links.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/elements/pf-jump-links/pf-jump-links.ts b/elements/pf-jump-links/pf-jump-links.ts
index 6aa85615e4..d1ae098299 100644
--- a/elements/pf-jump-links/pf-jump-links.ts
+++ b/elements/pf-jump-links/pf-jump-links.ts
@@ -125,7 +125,7 @@ export class PfJumpLinks extends LitElement {
<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>