[CL-689][CL-799] Fix Icon button a11y errors (#15750)

* Throw error if appA11yTitle is null in icon button

* Add required label input

* Fix icon button errors in CL components and storeis

* fix popover aria-label errors

* remove commented code

* add labels to icon buttons in browser

* add labels to icon buttons in web

* add labels to icon buttons in license

* add labels to icon buttons in send

* add labels to icon buttons in angular

* fix missing pipe error

* fix sso icon button missed in error

* update labels in vault

* add section expand button label

* Adding labels to icon buttons

* Add lint rule to not allow icon buttons without label input

* rename util file

* trigger updates on title change

* update eslint rule name and folder

* add edit collection label to vault headers

* fix web header story label

* add show/hide summary labels

* update summary message

* fix breadcrumbs label message

* fix JSDoc to use correct input

* remove commented code

* use label as aria-label always. Remove init function

* add moreBreadcrumbs translation message to other apps

* add @bitwarden/team-ui-foundation as code owner for component eslint rules

* switch title to const variable

* add jsdoc comment on what the label input is used for

* [PM-22415] Tax ID notifications for Organizations and Providers (#15996)

* [NO LOGIC] Rename BillableEntity to BitwardenSubscriber

This helps us maintain paraody with server where we call this choice type ISubscriber. I chose BitwardenSubscriber to avoid overlap with RxJS

* [NO LOGIC] Move subscriber-billing.client to clients folder

* [NO LOGIC] Move organization warnings under organization folder

* Move getWarnings from OrganizationBillingApiService to new OrganizationBillingClient

I'd like us to move away from stashing so much in libs and utilizing the JsLibServicesModule when it's not necessary to do so. These are invocations used exclusively by the Web Vault and, until that changes, they should be treated as such

* Refactor OrganizationWarningsService

There was a case added to the Inactive Subscription warning for a free trial, but free trials do not represent inactive subscriptions so this was semantically incorrect. This creates another method that pulls the free trial warning and shows a dialog asking the user to subscribe if they're on one.

* Implement Tax ID Warnings throughout Admin Console and Provider Portal

* Fix linting error

* Jimmy's feedback

* remove duplicate messages keys

* revert changes to popover stories

* add back dupe myItems key for now as it was already here

* fix directive type errors

* remove variable left in error from merge conflict

* revert unintentional change to reports layout

* add back reports change

---------

Co-authored-by: Alex Morask <144709477+amorask-bitwarden@users.noreply.github.com>

libs/components/src/a11y/a11y-title.directive.ts

@@ -1,4 +1,6 @@
-import { Directive, effect, ElementRef, input, Renderer2 } from "@angular/core";
+import { Directive, effect, ElementRef, input } from "@angular/core";
+
+import { setA11yTitleAndAriaLabel } from "./set-a11y-title-and-aria-label";
 
 @Directive({
   selector: "[appA11yTitle]",
@@ -6,19 +8,16 @@ import { Directive, effect, ElementRef, input, Renderer2 } from "@angular/core";
 export class A11yTitleDirective {
   title = input.required<string>({ alias: "appA11yTitle" });
 
-  constructor(
-    private el: ElementRef,
-    private renderer: Renderer2,
-  ) {
+  constructor(private el: ElementRef) {
     const originalTitle = this.el.nativeElement.getAttribute("title");
     const originalAriaLabel = this.el.nativeElement.getAttribute("aria-label");
+
     effect(() => {
-      if (originalTitle === null) {
-        this.renderer.setAttribute(this.el.nativeElement, "title", this.title());
-      }
-      if (originalAriaLabel === null) {
-        this.renderer.setAttribute(this.el.nativeElement, "aria-label", this.title());
-      }
+      setA11yTitleAndAriaLabel({
+        element: this.el.nativeElement,
+        title: originalTitle ?? this.title(),
+        label: originalAriaLabel ?? this.title(),
+      });
     });
   }
 }

libs/components/src/a11y/set-a11y-title-and-aria-label.ts

@@ -0,0 +1,16 @@
+export function setA11yTitleAndAriaLabel({
+  element,
+  title,
+  label,
+}: {
+  element: HTMLElement;
+  title?: string;
+  label?: string;
+}): void {
+  if (title) {
+    element.setAttribute("title", title);
+  }
+  if (label) {
+    element.setAttribute("aria-label", label);
+  }
+}

libs/components/src/async-actions/in-forms.mdx

@@ -125,7 +125,13 @@ handler.
 
 ```html
 <button type="button" bitFormButton bitButton [bitAction]="handler">Do action</button>
-<button type="button" bitFormButton bitIconButton="bwi-star" [bitAction]="handler"></button>
+<button
+  type="button"
+  bitFormButton
+  bitIconButton="bwi-star"
+  label="Your label here"
+  [bitAction]="handler"
+></button>
 ```
 
 ## `[bitSubmit]` Disabled Form Submit

libs/components/src/async-actions/in-forms.stories.ts

@@ -7,6 +7,7 @@ import { delay, of } from "rxjs";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 
+import { A11yTitleDirective } from "../a11y";
 import { ButtonModule } from "../button";
 import { FormFieldModule } from "../form-field";
 import { IconButtonModule } from "../icon-button";
@@ -28,20 +29,21 @@ const template = `
     <bit-form-field>
       <bit-label>Email</bit-label>
       <input bitInput formControlName="email" />
-      <button type="button" bitSuffix bitIconButton="bwi-refresh" bitFormButton [bitAction]="refresh"></button>
+      <button type="button" label="Refresh" bitSuffix bitIconButton="bwi-refresh" bitFormButton [bitAction]="refresh"></button>
     </bit-form-field>
 
     <button class="tw-me-2" type="submit" buttonType="primary" bitButton bitFormButton>Submit</button>
     <button class="tw-me-2" type="button" buttonType="secondary" bitButton bitFormButton>Cancel</button>
     <button class="tw-me-2" type="button" buttonType="danger" bitButton bitFormButton [bitAction]="delete">Delete</button>
     <button class="tw-me-2" type="button" buttonType="secondary" bitButton bitFormButton [disabled]="true">Disabled</button>
-    <button class="tw-me-2" type="button" buttonType="muted" bitIconButton="bwi-star" bitFormButton [bitAction]="delete">Delete</button>
+    <button class="tw-me-2" type="button" buttonType="muted" bitIconButton="bwi-star" label="Delete" bitFormButton [bitAction]="delete">Delete</button>
   </form>`;
 
 @Component({
   selector: "app-promise-example",
   template,
   imports: [
+    A11yTitleDirective,
     AsyncActionsModule,
     ButtonModule,
     FormFieldModule,
@@ -86,6 +88,7 @@ class PromiseExampleComponent {
   selector: "app-observable-example",
   template,
   imports: [
+    A11yTitleDirective,
     AsyncActionsModule,
     ButtonModule,
     FormFieldModule,

libs/components/src/async-actions/standalone.mdx

@@ -63,7 +63,7 @@ from how click handlers are usually defined with the output syntax `(click)="han
 ```html
 <button bitButton [bitAction]="handler">Do action</button>
 
-<button bitIconButton="bwi-trash" [bitAction]="handler"></button>`;
+<button bitIconButton="bwi-trash" label="Your label here" [bitAction]="handler"></button>`;
 ```
 
 ## Stories

libs/components/src/async-actions/standalone.stories.ts

@@ -16,7 +16,7 @@ const template = /*html*/ `
   <button type="button" bitButton buttonType="primary" [bitAction]="action" class="tw-me-2">
     Perform action {{ statusEmoji }}
   </button>
-  <button type="button" bitIconButton="bwi-trash" buttonType="danger" [bitAction]="action"></button>`;
+  <button type="button" label="Delete" bitIconButton="bwi-trash" buttonType="danger" [bitAction]="action"></button>`;
 
 @Component({
   template,

libs/components/src/banner/banner.component.html

@@ -19,8 +19,7 @@
       buttonType="main"
       size="small"
       (click)="onClose.emit()"
-      [attr.title]="'close' | i18n"
-      [attr.aria-label]="'close' | i18n"
+      [label]="'close' | i18n"
     ></button>
   }
 </div>

libs/components/src/breadcrumbs/breadcrumbs.component.html

@@ -35,6 +35,7 @@
     bitIconButton="bwi-ellipsis-h"
     [bitMenuTriggerFor]="overflowMenu"
     size="small"
+    [label]="'moreBreadcrumbs' | i18n"
   ></button>
   <bit-menu #overflowMenu>
     @for (breadcrumb of overflow; track breadcrumb) {

libs/components/src/breadcrumbs/breadcrumbs.component.ts

@@ -2,6 +2,8 @@ import { CommonModule } from "@angular/common";
 import { Component, ContentChildren, QueryList, input } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
+import { I18nPipe } from "@bitwarden/ui-common";
+
 import { IconButtonModule } from "../icon-button";
 import { LinkModule } from "../link";
 import { MenuModule } from "../menu";
@@ -16,7 +18,7 @@ import { BreadcrumbComponent } from "./breadcrumb.component";
 @Component({
   selector: "bit-breadcrumbs",
   templateUrl: "./breadcrumbs.component.html",
-  imports: [CommonModule, LinkModule, RouterModule, IconButtonModule, MenuModule],
+  imports: [I18nPipe, CommonModule, LinkModule, RouterModule, IconButtonModule, MenuModule],
 })
 export class BreadcrumbsComponent {
   readonly show = input(3);

libs/components/src/breadcrumbs/breadcrumbs.stories.ts

@@ -2,9 +2,12 @@ import { Component, importProvidersFrom } from "@angular/core";
 import { RouterModule } from "@angular/router";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
 
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
 import { IconButtonModule } from "../icon-button";
 import { LinkModule } from "../link";
 import { MenuModule } from "../menu";
+import { I18nMockService } from "../utils";
 
 import { BreadcrumbComponent } from "./breadcrumb.component";
 import { BreadcrumbsComponent } from "./breadcrumbs.component";
@@ -26,6 +29,16 @@ export default {
   decorators: [
     moduleMetadata({
       imports: [LinkModule, MenuModule, IconButtonModule, RouterModule, BreadcrumbComponent],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              moreBreadcrumbs: "More breadcrumbs",
+            });
+          },
+        },
+      ],
     }),
     applicationConfig({
       providers: [

libs/components/src/dialog/dialog/dialog.component.html

@@ -37,8 +37,7 @@
         buttonType="main"
         size="default"
         bitDialogClose
-        [attr.title]="'close' | i18n"
-        [attr.aria-label]="'close' | i18n"
+        [label]="'close' | i18n"
       ></button>
     }
   </header>

libs/components/src/dialog/dialog/dialog.stories.ts

@@ -101,8 +101,7 @@ export const Default: Story = {
             bitIconButton="bwi-trash"
             buttonType="danger"
             size="default"
-            title="Delete"
-            aria-label="Delete"></button>
+            label="Delete"></button>
         </ng-container>
       </bit-dialog>
     `,
@@ -219,7 +218,7 @@ export const WithCards: Story = {
               <h2 bitTypography="h6">
                 Foo
               </h2>
-              <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+              <button type="button" label="Favorite" bitIconButton="bwi-star" size="small" slot="end"></button>
             </bit-section-header>
             <bit-card>
               <bit-form-field>
@@ -239,7 +238,7 @@ export const WithCards: Story = {
               <h2 bitTypography="h6">
                 Bar
               </h2>
-              <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+              <button label="Favorite" type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
             </bit-section-header>
             <bit-card>
               <bit-form-field>
@@ -265,8 +264,7 @@ export const WithCards: Story = {
             bitIconButton="bwi-trash"
             buttonType="danger"
             size="default"
-            title="Delete"
-            aria-label="Delete"></button>
+            label="Delete"></button>
         </ng-container>
       </bit-dialog>
   </form>

libs/components/src/disclosure/disclosure.component.ts

@@ -28,6 +28,7 @@ let nextId = 0;
   *   bitIconButton="bwi-sliders"
   *   [buttonType]="'muted'"
   *   [bitDisclosureTriggerFor]="disclosureRef"
+  *   [label]="'Settings' | i18n"
   * ></button>
   * <bit-disclosure #disclosureRef open>click button to hide this content</bit-disclosure>
   * ```

libs/components/src/disclosure/disclosure.stories.ts

@@ -27,7 +27,7 @@ export const DisclosureWithIconButton: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <button type="button" bitIconButton="bwi-sliders" [buttonType]="'muted'" [bitDisclosureTriggerFor]="disclosureRef">
+      <button type="button" label="Settings" bitIconButton="bwi-sliders" [buttonType]="'muted'" [bitDisclosureTriggerFor]="disclosureRef">
       </button>
       <bit-disclosure #disclosureRef class="tw-text-main tw-block" open>click button to hide this content</bit-disclosure>
     `,

libs/components/src/drawer/drawer-header.component.html

@@ -5,11 +5,5 @@
       {{ title() }}
     </h2>
   </div>
-  <button
-    bitIconButton="bwi-close"
-    type="button"
-    bitDrawerClose
-    [attr.title]="'close' | i18n"
-    [attr.aria-label]="'close' | i18n"
-  ></button>
+  <button bitIconButton="bwi-close" type="button" bitDrawerClose [label]="'close' | i18n"></button>
 </header>

libs/components/src/form-field/form-field.stories.ts

@@ -239,8 +239,8 @@ export const Readonly: Story = {
       <bit-form-field>
         <bit-label>Input</bit-label>
         <input bitInput type="password" value="Foobar" [readonly]="true" />
-        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
-        <button type="button" bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Input'"></button>
+        <button type="button" label="Toggle password" bitIconButton bitSuffix bitPasswordInputToggle></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" [label]="'Clone Input'"></button>
       </bit-form-field>
 
       <bit-form-field>
@@ -261,7 +261,7 @@ export const Readonly: Story = {
               <bit-label>Input</bit-label>
               <input bitInput type="password" value="Foobar" readonly />
               <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
-              <button type="button" bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Input'"></button>
+              <button type="button" bitSuffix bitIconButton="bwi-clone" [label]="'Clone Input'"></button>
             </bit-form-field>
 
             <bit-form-field>
@@ -309,11 +309,11 @@ export const ButtonInputGroup: Story = {
             <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </bit-label>
-        <button type="button" bitPrefix bitIconButton="bwi-star" [appA11yTitle]="'Favorite Label'"></button>
+        <button type="button" bitPrefix bitIconButton="bwi-star" [label]="'Favorite Label'"></button>
         <input bitInput placeholder="Placeholder" />
-        <button type="button" bitSuffix bitIconButton="bwi-eye" [appA11yTitle]="'Hide Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" [appA11yTitle]="'Menu Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-eye" [label]="'Hide Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" [label]="'Clone Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" [label]="'Menu Label'"></button>
       </bit-form-field>
     `,
   }),
@@ -326,11 +326,11 @@ export const DisabledButtonInputGroup: Story = {
     template: /*html*/ `
       <bit-form-field>
         <bit-label>Label</bit-label>
-        <button type="button" bitPrefix bitIconButton="bwi-star" disabled [appA11yTitle]="'Favorite Label'"></button>
+        <button type="button" bitPrefix bitIconButton="bwi-star" disabled [label]="'Favorite Label'"></button>
         <input bitInput placeholder="Placeholder" disabled />
-        <button type="button" bitSuffix bitIconButton="bwi-eye" disabled [appA11yTitle]="'Hide Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-clone" disabled [appA11yTitle]="'Clone Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [appA11yTitle]="'Menu Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-eye" disabled [label]="'Hide Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" disabled [label]="'Clone Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [label]="'Menu Label'"></button>
 
       </bit-form-field>
     `,
@@ -345,9 +345,9 @@ export const PartiallyDisabledButtonInputGroup: Story = {
       <bit-form-field>
         <bit-label>Label</bit-label>
         <input bitInput placeholder="Placeholder" disabled />
-        <button type="button" bitSuffix bitIconButton="bwi-eye" [appA11yTitle]="'Hide Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [appA11yTitle]="'Menu Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-eye" [label]="'Hide Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" [label]="'Clone Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [label]="'Menu Label'"></button>
       </bit-form-field>
     `,
   }),

libs/components/src/form-field/password-input-toggle.spec.ts

@@ -20,7 +20,13 @@ import { BitPasswordInputToggleDirective } from "./password-input-toggle.directi
       <bit-form-field>
         <bit-label>Password</bit-label>
         <input bitInput type="password" />
-        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+        <button
+          type="button"
+          label="Toggle password visibility"
+          bitIconButton
+          bitSuffix
+          bitPasswordInputToggle
+        ></button>
       </bit-form-field>
     </form>
   `,

libs/components/src/form-field/password-input-toggle.stories.ts

@@ -48,7 +48,7 @@ export const Default: Story = {
         <bit-form-field>
           <bit-label>Password</bit-label>
           <input bitInput type="password" />
-          <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+          <button type="button" label="Toggle password visibility" bitIconButton bitSuffix bitPasswordInputToggle></button>
         </bit-form-field>
       </form>
     `,
@@ -63,7 +63,7 @@ export const Binding: Story = {
         <bit-form-field>
           <bit-label>Password</bit-label>
           <input bitInput type="password" />
-          <button type="button" bitIconButton bitSuffix bitPasswordInputToggle [(toggled)]="toggled"></button>
+          <button type="button" label="Toggle password visibility" bitIconButton bitSuffix bitPasswordInputToggle [(toggled)]="toggled"></button>
         </bit-form-field>
   
         <label class="tw-text-main">

libs/components/src/icon-button/icon-button.component.ts

@@ -1,8 +1,9 @@
 import { NgClass } from "@angular/common";
-import { Component, computed, ElementRef, HostBinding, input, model } from "@angular/core";
+import { Component, computed, effect, ElementRef, HostBinding, input, model } from "@angular/core";
 import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 import { debounce, interval } from "rxjs";
 
+import { setA11yTitleAndAriaLabel } from "../a11y/set-a11y-title-and-aria-label";
 import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
 import { FocusableElement } from "../shared/focusable-element";
 
@@ -62,7 +63,7 @@ const sizes: Record<IconButtonSize, string[]> = {
   small: ["tw-text-base", "tw-p-2", "tw-rounded"],
 };
 /**
-  * Icon buttons are used when no text accompanies the button. It consists of an icon that may be updated to any icon in the `bwi-font`, a `title` attribute, and an `aria-label`.
+  * Icon buttons are used when no text accompanies the button. It consists of an icon that may be updated to any icon in the `bwi-font`, a `title` attribute, and an `aria-label` that are added via the `label` input.
 
   * The most common use of the icon button is in the banner, toast, and modal components as a close button. It can also be found in tables as the 3 dot option menu, or on navigation list items when there are options that need to be collapsed into a menu.
 
@@ -94,6 +95,14 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
 
   readonly size = model<IconButtonSize>("default");
 
+  /**
+   * label input will be used to set the `aria-label` attributes on the button.
+   * This is for accessibility purposes, as it provides a text alternative for the icon button.
+   *
+   * NOTE: It will also be used to set the `title` attribute on the button if no `title` is provided.
+   */
+  readonly label = input<string>();
+
   @HostBinding("class") get classList() {
     return [
       "tw-font-semibold",
@@ -159,5 +168,15 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
     return this.elementRef.nativeElement;
   }
 
-  constructor(private elementRef: ElementRef) {}
+  constructor(private elementRef: ElementRef) {
+    const originalTitle = this.elementRef.nativeElement.getAttribute("title");
+
+    effect(() => {
+      setA11yTitleAndAriaLabel({
+        element: this.elementRef.nativeElement,
+        title: originalTitle ?? this.label(),
+        label: this.label(),
+      });
+    });
+  }
 }

libs/components/src/icon-button/icon-button.stories.ts

@@ -9,6 +9,7 @@ export default {
   component: BitIconButtonComponent,
   args: {
     bitIconButton: "bwi-plus",
+    label: "Your button label here",
   },
   argTypes: {
     buttonType: {

libs/components/src/item/item.mdx

@@ -102,10 +102,10 @@ Actions are commonly icon buttons or badge buttons.
       <button type="button" bitBadge variant="primary">Auto-fill</button>
     </bit-item-action>
     <bit-item-action>
-      <button type="button" bitIconButton="bwi-clone" aria-label="Copy"></button>
+      <button type="button" bitIconButton="bwi-clone" label="Copy"></button>
     </bit-item-action>
     <bit-item-action>
-      <button type="button" bitIconButton="bwi-ellipsis-v" aria-label="Options"></button>
+      <button type="button" bitIconButton="bwi-ellipsis-v" label="Options"></button>
     </bit-item-action>
   </ng-container>
 </bit-item>

libs/components/src/item/item.stories.ts

@@ -77,10 +77,10 @@ export const Default: Story = {
             <button type="button" bitBadge variant="primary">Fill</button>
           </bit-item-action>
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-clone" size="small"></button>
+            <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
           </bit-item-action>
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+            <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
           </bit-item-action>
         </ng-container>
       </bit-item>
@@ -150,10 +150,10 @@ export const TextOverflowTruncate: Story = {
         </bit-item-content>
         <ng-container slot="end">
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-clone" size="small"></button>
+            <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
           </bit-item-action>
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+            <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
           </bit-item-action>
         </ng-container>
       </bit-item>
@@ -173,10 +173,10 @@ export const TextOverflowWrap: Story = {
         </bit-item-content>
         <ng-container slot="end">
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-clone" size="small"></button>
+            <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
           </bit-item-action>
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+            <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
           </bit-item-action>
         </ng-container>
       </bit-item>
@@ -198,10 +198,10 @@ const multipleActionListTemplate = /*html*/ `
           <button type="button" bitBadge variant="primary">Fill</button>
         </bit-item-action>
         <bit-item-action>
-          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+          <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
         </bit-item-action>
         <bit-item-action>
-          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
         </bit-item-action>
       </ng-container>
     </bit-item>
@@ -217,10 +217,10 @@ const multipleActionListTemplate = /*html*/ `
           <button type="button" bitBadge variant="primary">Fill</button>
         </bit-item-action>
         <bit-item-action>
-          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+          <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
         </bit-item-action>
         <bit-item-action>
-          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
         </bit-item-action>
       </ng-container>
     </bit-item>
@@ -236,10 +236,10 @@ const multipleActionListTemplate = /*html*/ `
           <button type="button" bitBadge variant="primary">Fill</button>
         </bit-item-action>
         <bit-item-action>
-          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+          <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
         </bit-item-action>
         <bit-item-action>
-          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
         </bit-item-action>
       </ng-container>
     </bit-item>
@@ -255,10 +255,10 @@ const multipleActionListTemplate = /*html*/ `
           <button type="button" bitBadge variant="primary">Fill</button>
         </bit-item-action>
         <bit-item-action>
-          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+          <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
         </bit-item-action>
         <bit-item-action>
-          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
         </bit-item-action>
       </ng-container>
     </bit-item>
@@ -274,10 +274,10 @@ const multipleActionListTemplate = /*html*/ `
           <button type="button" bitBadge variant="primary">Fill</button>
         </bit-item-action>
         <bit-item-action>
-          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+          <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
         </bit-item-action>
         <bit-item-action>
-          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
         </bit-item-action>
       </ng-container>
     </bit-item>
@@ -293,10 +293,10 @@ const multipleActionListTemplate = /*html*/ `
           <button type="button" bitBadge variant="primary">Fill</button>
         </bit-item-action>
         <bit-item-action>
-          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+          <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
         </bit-item-action>
         <bit-item-action>
-          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
         </bit-item-action>
       </ng-container>
     </bit-item>
@@ -410,10 +410,10 @@ export const VirtualScrolling: Story = {
                 <button type="button" bitBadge variant="primary">Fill</button>
               </bit-item-action>
               <bit-item-action>
-                <button type="button" bitIconButton="bwi-clone" size="small"></button>
+                <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
               </bit-item-action>
               <bit-item-action>
-                <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+                <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
               </bit-item-action>
             </ng-container>
           </bit-item>
@@ -440,10 +440,10 @@ export const WithoutBorderRadius: Story = {
             <button type="button" bitBadge variant="primary">Fill</button>
           </bit-item-action>
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-clone"></button>
+            <button type="button" bitIconButton="bwi-clone" label="Clone"></button>
           </bit-item-action>
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+            <button type="button" bitIconButton="bwi-ellipsis-v" label="More options"></button>
           </bit-item-action>
         </ng-container>
       </bit-item>

libs/components/src/navigation/nav-group.component.html

@@ -18,11 +18,10 @@
         [buttonType]="'nav-contrast'"
         (click)="toggle($event)"
         size="small"
-        [title]="'toggleCollapse' | i18n"
         aria-haspopup="true"
         [attr.aria-expanded]="open().toString()"
         [attr.aria-controls]="contentId"
-        [attr.aria-label]="['toggleCollapse' | i18n, text()].join(' ')"
+        [label]="['toggleCollapse' | i18n, text()].join(' ')"
       ></button>
     </ng-template>
     <ng-container slot="end">

libs/components/src/navigation/nav-item.stories.ts

@@ -95,7 +95,7 @@ export const WithChildButtons: Story = {
           [bitIconButton]="'bwi-pencil-square'"
           [buttonType]="'nav-contrast'"
           size="small"
-          aria-label="option 2"
+          label="Edit"
         ></button>
         <button
           type="button" 
@@ -104,7 +104,7 @@ export const WithChildButtons: Story = {
           [bitIconButton]="'bwi-check'"
           [buttonType]="'nav-contrast'"
           size="small"
-          aria-label="option 3"
+          label="Confirm"
         ></button>
       </bit-nav-item>
     `,

libs/components/src/navigation/side-nav.component.html

@@ -37,7 +37,7 @@
           buttonType="nav-contrast"
           size="small"
           (click)="sideNavService.toggle()"
-          [attr.aria-label]="'toggleSideNavigation' | i18n"
+          [label]="'toggleSideNavigation' | i18n"
           [attr.aria-expanded]="data.open"
           aria-controls="bit-side-nav"
         ></button>

libs/components/src/popover/popover.component.html

@@ -18,8 +18,7 @@
           <button
             type="button"
             bitIconButton="bwi-close"
-            [attr.title]="'close' | i18n"
-            [attr.aria-label]="'close' | i18n"
+            [label]="'close' | i18n"
             (click)="closed.emit()"
             size="small"
           ></button>

libs/components/src/section/section.mdx

@@ -51,7 +51,7 @@ padding to align the header with the border radius of the card/item.
 <bit-section>
   <bit-section-header>
     <h2 bitTypography="h6">I'm a section header</h2>
-    <button bitIconButton="bwi-star" size="small" slot="end"></button>
+    <button bitIconButton="bwi-star" label="Favorite" size="small" slot="end"></button>
   </bit-section-header>
   <bit-card>
     <h3 bitTypography="h3">I'm card content</h3>

libs/components/src/section/section.stories.ts

@@ -69,7 +69,7 @@ export const HeaderVariants: Story = {
         <h2 bitTypography="h6">
           Title with icon button suffix
         </h2>
-        <button type="button" bitIconButton="bwi-refresh" size="small"></button>
+        <button type="button" label="Refresh" bitIconButton="bwi-refresh" size="small"></button>
       </bit-section-header>
     `,
   }),
@@ -88,7 +88,7 @@ export const HeaderEndSlotVariants: Story = {
         <h2 bitTypography="h6">
           Title with end slot icon button
         </h2>
-        <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+        <button type="button" label="Favorite" bitIconButton="bwi-star" size="small" slot="end"></button>
       </bit-section-header>
     `,
   }),
@@ -103,7 +103,7 @@ export const HeaderWithPadding: Story = {
             <h2 bitTypography="h6">
               Card as immediate sibling
             </h2>
-            <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button type="button" label="Favorite" bitIconButton="bwi-star" size="small" slot="end"></button>
           </bit-section-header>
           <bit-card>
             <h3 bitTypography="h3">bit-section-header has padding</h3>
@@ -114,7 +114,7 @@ export const HeaderWithPadding: Story = {
             <h2 bitTypography="h6">
               Card nested in immediate sibling
             </h2>
-            <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button type="button" label="Favorite" bitIconButton="bwi-star" size="small" slot="end"></button>
           </bit-section-header>
           <div>
             <bit-card>
@@ -127,7 +127,7 @@ export const HeaderWithPadding: Story = {
             <h2 bitTypography="h6">
               Item as immediate sibling
             </h2>
-            <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button type="button" label="Favorite" bitIconButton="bwi-star" size="small" slot="end"></button>
           </bit-section-header>
           <bit-item>
             <bit-item-content bitTypography="body1">bit-section-header has padding</bit-item-content>
@@ -138,7 +138,7 @@ export const HeaderWithPadding: Story = {
             <h2 bitTypography="h6">
               Item nested in immediate sibling
             </h2>
-            <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button type="button" label="Favorite" bitIconButton="bwi-star" size="small" slot="end"></button>
           </bit-section-header>
           <bit-item-group>
             <bit-item>
@@ -160,7 +160,7 @@ export const HeaderWithoutPadding: Story = {
             <h2 bitTypography="h6">
               No card or item used
             </h2>
-            <button bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button bitIconButton="bwi-star" size="small" slot="end" label="Favorite"></button>
           </bit-section-header>
           <div>
             <h3 bitTypography="h3">just a div, so bit-section-header has no padding</h3>
@@ -171,7 +171,7 @@ export const HeaderWithoutPadding: Story = {
             <h2 bitTypography="h6">
               Card nested in non-immediate sibling
             </h2>
-            <button bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button bitIconButton="bwi-star" size="small" slot="end" label="Favorite"></button>
           </bit-section-header>
           <div class="tw-text-main">
             a div here

libs/components/src/stories/kitchen-sink/components/dialog-virtual-scroll-block.component.ts

@@ -36,7 +36,7 @@ import { TableDataSource, TableModule } from "../../../table";
               <button
                 bitIconButton="bwi-ellipsis-v"
                 type="button"
-                aria-label="Options"
+                label="Options"
                 (click)="openDefaultDialog()"
               ></button>
             </td>

libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts

@@ -80,7 +80,13 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
           </button>
         </bit-label>
         <input bitInput type="password" formControlName="password" />
-        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+        <button
+          type="button"
+          label="Toggle password visibility"
+          bitIconButton
+          bitSuffix
+          bitPasswordInputToggle
+        ></button>
       </bit-form-field>
 
       <div class="tw-mb-6">

libs/components/src/stories/kitchen-sink/components/kitchen-sink-table.component.ts

@@ -23,6 +23,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
               type="button"
               bitIconButton="bwi-ellipsis-v"
               [bitMenuTriggerFor]="menu1"
+              label="Options"
             ></button>
             <bit-menu #menu1>
               <a href="#" bitMenuItem>Anchor link</a>
@@ -40,6 +41,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
               type="button"
               bitIconButton="bwi-ellipsis-v"
               [bitMenuTriggerFor]="menu2"
+              label="Options"
             ></button>
             <bit-menu #menu2>
               <a href="#" bitMenuItem>Anchor link</a>

libs/components/src/toast/toast.component.html

@@ -25,6 +25,7 @@
       type="button"
       size="small"
       (click)="this.onClose.emit()"
+      [label]="'close' | i18n"
     ></button>
   </div>
   <div class="tw-h-1 tw-w-full tw-bg-text-main/30" [style.width]="progressWidth() + '%'"></div>