fix(ui-library): button group accessibility (#595) (#639)

deven-org · Nov 23, 2023 · 1f28479 · 1f28479
1 parent 1462489
commit 1f28479
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.ts b/packages/ui-library/src/components/actions/buttons/icon-button/index.ts
@@ -20,7 +20,7 @@ const TAG_NAME = 'blr-icon-button';
 export class BlrIconButton extends LitElement {
   static styles = [styleCustom];
 
-  @property() arialabel?: string;
+  @property() arialabel!: string;
   @property() icon?: SizelessIconType;
   @property() onClick?: HTMLButtonElement['onclick'];
   @property() onBlur?: HTMLButtonElement['onblur'];
@@ -50,8 +50,8 @@ export class BlrIconButton extends LitElement {
       const dynamicStyles = this.theme === 'Light' ? [actionLight] : [actionDark];
 
       const classes = classMap({
-        [`${this.variant}`]: this.variant,
-        [`${this.size}`]: this.size,
+        [this.variant]: this.variant,
+        [this.size]: this.size,
         disabled: this.disabled,
         loading: this.loading || false,
       });
@@ -77,10 +77,10 @@ export class BlrIconButton extends LitElement {
         'Icon',
       ]).toLowerCase() as SizesType;
 
-      return html`<style>
-          ${dynamicStyles.map((style) => style)}
+      return html`
+        <style>
+          ${dynamicStyles}
         </style>
-
         <span
           aria-label=${this.arialabel || nothing}
           class="blr-semantic-action blr-icon-button ${classes}"
@@ -107,7 +107,8 @@ export class BlrIconButton extends LitElement {
             hideAria: true,
             classMap: iconClasses,
           })}
-        </span>`;
+        </span>
+      `;
     }
   }
 }

diff --git a/packages/ui-library/src/components/ui/button-group/index.stories.ts b/packages/ui-library/src/components/ui/button-group/index.stories.ts
@@ -30,6 +30,7 @@ const contentIconButtons = html`
     variant: 'primary',
     loadingStatus: 'Loading',
     disabled: false,
+    arialabel: 'button_1',
   })}
   ${BlrIconButtonRenderFunction({
     size: 'md',
@@ -38,6 +39,7 @@ const contentIconButtons = html`
     variant: 'secondary',
     loadingStatus: 'Loading',
     disabled: false,
+    arialabel: 'button_2',
   })}
 `;