Fix aria-labelledby attributes

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';

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}

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>

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 && (

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 && (

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 />

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}

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}

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'));
       }
     });
   }