From 21889924e7c4b561fb19772ee09ce5d9c309c5d4 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 20 Aug 2020 09:12:13 -0400
Subject: [PATCH] Fix aria-labelledby attributes

---
 docs/assets/plugins/code-block/code-block.js | 2 +-
 src/components/checkbox/checkbox.tsx         | 2 +-
 src/components/details/details.tsx           | 2 +-
 src/components/dialog/dialog.tsx             | 2 +-
 src/components/drawer/drawer.tsx             | 2 +-
 src/components/dropdown/dropdown.tsx         | 2 +-
 src/components/radio/radio.tsx               | 2 +-
 src/components/switch/switch.tsx             | 2 +-
 src/components/tab-group/tab-group.tsx       | 4 ++--
 9 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/assets/plugins/code-block/code-block.js b/docs/assets/plugins/code-block/code-block.js
index 792928b93..851f1dfc5 100644
--- a/docs/assets/plugins/code-block/code-block.js
+++ b/docs/assets/plugins/code-block/code-block.js
@@ -52,7 +52,7 @@
           pre.id = preId;
           pre.classList.add('code-block__source');
           pre.setAttribute('data-lang', pre.getAttribute('data-lang').replace(/ preview$/, ''));
-          pre.setAttribute('aria-labeledby', toggleId);
+          pre.setAttribute('aria-labelledby', toggleId);
 
           toggle.id = toggleId;
           toggle.type = 'button';
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
index c68054039..76101ca83 100644
--- a/src/components/checkbox/checkbox.tsx
+++ b/src/components/checkbox/checkbox.tsx
@@ -156,7 +156,7 @@ export class Checkbox {
             value={this.value}
             checked={this.checked}
             disabled={this.disabled}
-            aria-labeledby={this.labelId}
+            aria-labelledby={this.labelId}
             onClick={this.handleClick}
             onBlur={this.handleBlur}
             onFocus={this.handleFocus}
diff --git a/src/components/details/details.tsx b/src/components/details/details.tsx
index ce6070a4c..8385e3ac3 100644
--- a/src/components/details/details.tsx
+++ b/src/components/details/details.tsx
@@ -203,7 +203,7 @@ export class Details {
             id={`${this.componentId}-content`}
             class="details__content"
             role="region"
-            aria-labeledby={`${this.componentId}-header`}
+            aria-labelledby={`${this.componentId}-header`}
           >
             <slot />
           </div>
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index 5b67e5a8c..7eff96b3e 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -209,7 +209,7 @@ export class Dialog {
           aria-modal="true"
           aria-hidden={!this.open}
           aria-label={this.noHeader ? this.label : null}
-          aria-labeledby={!this.noHeader ? `${this.componentId}-title` : null}
+          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}
           tabIndex={0}
         >
           {!this.noHeader && (
diff --git a/src/components/drawer/drawer.tsx b/src/components/drawer/drawer.tsx
index 6f83d6453..4b71f9924 100644
--- a/src/components/drawer/drawer.tsx
+++ b/src/components/drawer/drawer.tsx
@@ -228,7 +228,7 @@ export class Drawer {
           aria-modal="true"
           aria-hidden={!this.open}
           aria-label={this.noHeader ? this.label : null}
-          aria-labeledby={!this.noHeader ? `${this.componentId}-title` : null}
+          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}
           tabIndex={0}
         >
           {!this.noHeader && (
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index c0097574d..ca36bbd20 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -296,7 +296,7 @@ export class Dropdown {
           class="dropdown__panel"
           role="menu"
           aria-hidden={!this.open}
-          aria-labeledby={this.componentId}
+          aria-labelledby={this.componentId}
           hidden
         >
           <slot />
diff --git a/src/components/radio/radio.tsx b/src/components/radio/radio.tsx
index c1cfe6ce3..dbf8dd313 100644
--- a/src/components/radio/radio.tsx
+++ b/src/components/radio/radio.tsx
@@ -162,7 +162,7 @@ export class Radio {
             value={this.value}
             checked={this.checked}
             disabled={this.disabled}
-            aria-labeledby={this.labelId}
+            aria-labelledby={this.labelId}
             onClick={this.handleClick}
             onBlur={this.handleBlur}
             onFocus={this.handleFocus}
diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx
index 05daa24d3..c85d1c395 100644
--- a/src/components/switch/switch.tsx
+++ b/src/components/switch/switch.tsx
@@ -130,7 +130,7 @@ export class Switch {
             value={this.value}
             checked={this.checked}
             disabled={this.disabled}
-            aria-labeledby={this.labelId}
+            aria-labelledby={this.labelId}
             onClick={this.handleClick}
             onBlur={this.handleBlur}
             onFocus={this.handleFocus}
diff --git a/src/components/tab-group/tab-group.tsx b/src/components/tab-group/tab-group.tsx
index 4d4bb02fb..fb9ccbd79 100644
--- a/src/components/tab-group/tab-group.tsx
+++ b/src/components/tab-group/tab-group.tsx
@@ -79,7 +79,7 @@ export class TabGroup {
     this.mutationObserver = new MutationObserver(mutations => {
       if (
         mutations.some(mutation => {
-          return !['aria-labeledby', 'aria-controls'].includes(mutation.attributeName);
+          return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName);
         })
       ) {
         setTimeout(() => this.setAriaLabels());
@@ -223,7 +223,7 @@ export class TabGroup {
       const panel = panels.find(el => el.name === tab.panel);
       if (panel) {
         tab.setAttribute('aria-controls', panel.getAttribute('id'));
-        panel.setAttribute('aria-labeledby', tab.getAttribute('id'));
+        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));
       }
     });
   }