From e3582f33a2ff556b534bd6fc8d59b39e94a807c2 Mon Sep 17 00:00:00 2001
From: Dylan Hyun <dylan.hyun@hashicorp.com>
Date: Tue, 25 Mar 2025 12:52:01 -0400
Subject: [PATCH] HDS-4549 `SideNav` - Conditionally set `aria-labelledby`

---
 .changeset/dry-buses-eat.md                   |  5 +++++
 .../src/components/hds/side-nav/index.hbs     |  2 +-
 .../components/hds/side-nav/index-test.js     | 22 +++++++++++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/dry-buses-eat.md

diff --git a/.changeset/dry-buses-eat.md b/.changeset/dry-buses-eat.md
new file mode 100644
index 00000000000..cd179102ed1
--- /dev/null
+++ b/.changeset/dry-buses-eat.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`SideNav` - Conditionally set `aria-labelledby` attribute for toggle button based on if `@ariaLabel` argument is provided.
diff --git a/packages/components/src/components/hds/side-nav/index.hbs b/packages/components/src/components/hds/side-nav/index.hbs
index 69914a80016..91860c41af1 100644
--- a/packages/components/src/components/hds/side-nav/index.hbs
+++ b/packages/components/src/components/hds/side-nav/index.hbs
@@ -31,7 +31,7 @@
       {{! template-lint-enable no-invalid-interactive}}
       <Hds::SideNav::ToggleButton
         aria-label={{this.ariaLabel}}
-        aria-labelledby="hds-side-nav-header"
+        aria-labelledby={{unless this.ariaLabel "hds-side-nav-header"}}
         aria-expanded={{if this.isMinimized "false" "true"}}
         @icon={{if this.isMinimized "chevrons-right" "chevrons-left"}}
         {{on "click" this.toggleMinimizedStatus}}
diff --git a/showcase/tests/integration/components/hds/side-nav/index-test.js b/showcase/tests/integration/components/hds/side-nav/index-test.js
index c8fb01d8df4..7003de0e2ca 100644
--- a/showcase/tests/integration/components/hds/side-nav/index-test.js
+++ b/showcase/tests/integration/components/hds/side-nav/index-test.js
@@ -211,6 +211,28 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
 
   // COLLAPSIBLE
 
+  test('if the @ariaLabel argument is not provided the default aria-labelledby value is set on the toggle button', async function (assert) {
+    await render(
+      hbs`<Hds::SideNav @isCollapsible={{true}} id="test-side-nav" />`
+    );
+    assert
+      .dom('.hds-side-nav__toggle-button')
+      .hasAttribute('aria-labelledby', 'hds-side-nav-header');
+    assert.dom('.hds-side-nav__toggle-button').hasNoAttribute('aria-label');
+  });
+
+  test('if the @ariaLabel argument is provided the label value is set on the toggle button', async function (assert) {
+    await render(
+      hbs`<Hds::SideNav @isCollapsible={{true}} id="test-side-nav" @ariaLabel="Test"/>`
+    );
+    assert
+      .dom('.hds-side-nav__toggle-button')
+      .hasNoAttribute('aria-labelledby');
+    assert
+      .dom('.hds-side-nav__toggle-button')
+      .hasAttribute('aria-label', 'Test');
+  });
+
   test('it responds to different events to toggle between "non-minimized" (by default) and "mimimized" states', async function (assert) {
     await render(
       hbs`<Hds::SideNav @isCollapsible={{true}} id="test-side-nav" />`