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>