feat(components): add swirlAriaLabelledby prop to SwirlCard

getflip · Nov 14, 2023 · 16bb2f9 · 16bb2f9
1 parent d840612
commit 16bb2f9
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 8 deletions.
diff --git a/.changeset/healthy-rules-bathe.md b/.changeset/healthy-rules-bathe.md
@@ -0,0 +1,7 @@
+---
+"@getflip/swirl-components": minor
+"@getflip/swirl-components-angular": minor
+"@getflip/swirl-components-react": minor
+---
+
+Add swirl-aria-labelledby prop to swirl-car
diff --git a/packages/swirl-components/src/components.d.ts b/packages/swirl-components/src/components.d.ts
@@ -337,6 +337,7 @@ export namespace Components {
         "paddingInlineEnd"?: SwirlCardPadding;
         "paddingInlineStart"?: SwirlCardPadding;
         "swirlAriaLabel"?: string;
+        "swirlAriaLabelledby"?: string;
     }
     /**
      * slot - The slides
@@ -4312,6 +4313,7 @@ declare namespace LocalJSX {
         "paddingInlineEnd"?: SwirlCardPadding;
         "paddingInlineStart"?: SwirlCardPadding;
         "swirlAriaLabel"?: string;
+        "swirlAriaLabelledby"?: string;
     }
     /**
      * slot - The slides

diff --git a/packages/swirl-components/src/components/swirl-card/swirl-card.tsx b/packages/swirl-components/src/components/swirl-card/swirl-card.tsx
@@ -60,6 +60,7 @@ export class SwirlCard {
   @Prop() paddingInlineEnd?: SwirlCardPadding;
   @Prop() paddingInlineStart?: SwirlCardPadding;
   @Prop() swirlAriaLabel?: string;
+  @Prop() swirlAriaLabelledby?: string;
 
   render() {
     const Tag = Boolean(this.href) ? "a" : this.as;
@@ -111,6 +112,7 @@ export class SwirlCard {
       <Host styles={{ height: this.height }}>
         <Tag
           aria-label={this.swirlAriaLabel}
+          aria-labelledby={this.swirlAriaLabelledby}
           class={className}
           href={this.href}
           rel={

diff --git a/packages/swirl-components/src/components/swirl-console-layout/swirl-console-layout.spec.tsx b/packages/swirl-components/src/components/swirl-console-layout/swirl-console-layout.spec.tsx
@@ -19,8 +19,8 @@ describe("swirl-console-layout", () => {
       <swirl-console-layout app-name="App name" heading="Heading">
         <mock:shadow-root>
           <div class="console-layout">
-            <div aria-hidden="true" class="console-layout__sidebar" inert="">
-              <header class="console-layout__header">
+            <header aria-hidden="true" class="console-layout__sidebar" inert="">
+              <div class="console-layout__header">
                 <div class="console-layout__logo">
                   <svg class="console-layout__logo-mark" fill="none" height="26" viewBox="0 0 16 26" width="16" xmlns="http://www.w3.org/2000/svg">
                     <path d="M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z" fill="#145AF5"></path>
@@ -32,14 +32,14 @@ describe("swirl-console-layout", () => {
                     Admin
                   </swirl-text>
                 </div>
-              </header>
+              </div>
               <nav aria-label="Main" class="console-layout__navigation">
                 <slot name="navigation"></slot>
               </nav>
               <div class="console-layout__user">
                 <slot name="user"></slot>
               </div>
-            </div>
+            </header>
             <main aria-labelledby="app-name" class="console-layout__main">
               <header class="console-layout__app-bar">
                 <span class="console-layout__mobile-navigation-button">

diff --git a/packages/swirl-components/src/components/swirl-console-layout/swirl-console-layout.tsx b/packages/swirl-components/src/components/swirl-console-layout/swirl-console-layout.tsx
@@ -179,12 +179,12 @@ export class SwirlConsoleLayout {
           onClick={this.onClick}
           onKeyDown={this.onKeyDown}
         >
-          <div
+          <header
             aria-hidden={String(!this.sidebarActive)}
             class="console-layout__sidebar"
             ref={(el) => (this.sidebarEl = el)}
           >
-            <header class="console-layout__header">
+            <div class="console-layout__header">
               <div class="console-layout__logo">
                 <svg
                   class="console-layout__logo-mark"
@@ -215,7 +215,7 @@ export class SwirlConsoleLayout {
                   {this.logoText}
                 </swirl-text>
               </div>
-            </header>
+            </div>
             <nav
               aria-label={this.navigationLabel}
               class="console-layout__navigation"
@@ -225,7 +225,7 @@ export class SwirlConsoleLayout {
             <div class="console-layout__user">
               <slot name="user"></slot>
             </div>
-          </div>
+          </header>
           <main
             aria-labelledby={Boolean(this.appName) ? "app-name" : undefined}
             class="console-layout__main"

diff --git a/packages/swirl-components/vscode-data.json b/packages/swirl-components/vscode-data.json
@@ -1323,6 +1323,10 @@
         {
           "name": "swirl-aria-label",
           "description": ""
+        },
+        {
+          "name": "swirl-aria-labelledby",
+          "description": ""
         }
       ]
     },