Ensure all <mwc-fab> set a label for ARIA (#7587)

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -126,9 +126,10 @@ export class HaConfigAreasDashboard extends LitElement {
         ></ha-icon-button>
         <mwc-fab
           slot="fab"
-          title="${this.hass.localize(
+          .label=${this.hass.localize(
             "ui.panel.config.areas.picker.create_area"
-          )}"
+          )}
+          extended
           @click=${this._createArea}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

src/panels/config/automation/ha-automation-editor.ts

@@ -472,7 +472,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         <mwc-fab
           slot="fab"
           class=${classMap({ dirty: this._dirty })}
-          .title=${this.hass.localize("ui.panel.config.automation.editor.save")}
+          .label=${this.hass.localize("ui.panel.config.automation.editor.save")}
+          extended
           @click=${this._saveAutomation}
         >
           <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>

src/panels/config/automation/ha-automation-picker.ts

@@ -176,9 +176,10 @@ class HaAutomationPicker extends LitElement {
         </mwc-icon-button>
         <mwc-fab
           slot="fab"
-          title=${this.hass.localize(
+          .label=${this.hass.localize(
             "ui.panel.config.automation.picker.add_automation"
           )}
+          extended
           @click=${this._createNew}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

src/panels/config/helpers/ha-config-helpers.ts

@@ -160,9 +160,10 @@ export class HaConfigHelpers extends LitElement {
       >
         <mwc-fab
           slot="fab"
-          title="${this.hass.localize(
+          .label=${this.hass.localize(
             "ui.panel.config.helpers.picker.add_helper"
-          )}"
+          )}
+          extended
           @click=${this._createHelpler}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

src/panels/config/integrations/ha-config-integrations.ts

@@ -475,8 +475,10 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
         </div>
         <mwc-fab
           slot="fab"
-          aria-label=${this.hass.localize("ui.panel.config.integrations.new")}
+          .label=${this.hass.localize(
-          title=${this.hass.localize("ui.panel.config.integrations.new")}
+            "ui.panel.config.integrations.add_integration"
+          )}
+          extended
           @click=${this._createFlow}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts

@@ -84,7 +84,8 @@ class ZHAConfigDashboard extends LitElement {
         </ha-card>
         <a href="/config/zha/add" slot="fab">
           <mwc-fab
-            title=${this.hass.localize("ui.panel.config.zha.add_device")}
+            .label=${this.hass.localize("ui.panel.config.zha.add_device")}
+            extended
             ?rtl=${computeRTL(this.hass)}
           >
             <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts

@@ -128,7 +128,10 @@ export class ZHAGroupsDashboard extends LitElement {
       >
         <a href="/config/zha/group-add" slot="fab">
           <mwc-fab
-            title=${this.hass!.localize("ui.panel.config.zha.groups.add_group")}
+            .label=${this.hass!.localize(
+              "ui.panel.config.zha.groups.add_group"
+            )}
+            extended
           >
             <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
           </mwc-fab>

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -225,9 +225,10 @@ export class HaConfigLovelaceDashboards extends LitElement {
       >
         <mwc-fab
           slot="fab"
-          title="${this.hass.localize(
+          .label=${this.hass.localize(
             "ui.panel.config.lovelace.dashboards.picker.add_dashboard"
-          )}"
+          )}
+          extended
           @click=${this._addDashboard}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -105,9 +105,10 @@ export class HaConfigLovelaceRescources extends LitElement {
       >
         <mwc-fab
           slot="fab"
-          title=${this.hass.localize(
+          .label=${this.hass.localize(
             "ui.panel.config.lovelace.resources.picker.add_resource"
           )}
+          extended
           @click=${this._addResource}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

src/panels/config/person/ha-config-person.ts

@@ -148,7 +148,8 @@ class HaConfigPerson extends LitElement {
         </ha-config-section>
         <mwc-fab
           slot="fab"
-          title="${hass.localize("ui.panel.config.person.add_person")}"
+          .label=${hass.localize("ui.panel.config.person.add_person")}
+          extended
           @click=${this._createPerson}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

src/panels/config/scene/ha-scene-dashboard.ts

@@ -153,9 +153,10 @@ class HaSceneDashboard extends LitElement {
         </mwc-icon-button>
         <a href="/config/scene/edit/new" slot="fab">
           <mwc-fab
-            title=${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.config.scene.picker.add_scene"
             )}
+            extended
           >
             <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
           </mwc-fab>

src/panels/config/scene/ha-scene-editor.ts

@@ -405,7 +405,8 @@ export class HaSceneEditor extends SubscribeMixin(
         </div>
         <mwc-fab
           slot="fab"
-          .title=${this.hass.localize("ui.panel.config.scene.editor.save")}
+          .label=${this.hass.localize("ui.panel.config.scene.editor.save")}
+          extended
           @click=${this._saveScene}
           class=${classMap({ dirty: this._dirty })}
         >

src/panels/config/script/ha-script-editor.ts

@@ -367,9 +367,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         </div>
         <mwc-fab
           slot="fab"
-          .title=${this.hass.localize(
+          .label=${this.hass.localize(
             "ui.panel.config.script.editor.save_script"
           )}
+          extended
           @click=${this._saveScript}
           class=${classMap({
             dirty: this._dirty,

src/panels/config/script/ha-script-picker.ts

@@ -149,9 +149,10 @@ class HaScriptPicker extends LitElement {
           <mwc-fab
             ?is-wide=${this.isWide}
             ?narrow=${this.narrow}
-            title="${this.hass.localize(
+            .label=${this.hass.localize(
-              "ui.panel.config.script.picker.create_new_script"
+              "ui.panel.config.script.picker.add_script"
-            )}"
+            )}
+            extended
             ?rtl=${computeRTL(this.hass)}
           >
             <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

src/panels/config/tags/ha-config-tags.ts

@@ -209,7 +209,8 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         </mwc-icon-button>
         <mwc-fab
           slot="fab"
-          title=${this.hass.localize("ui.panel.config.tags.add_tag")}
+          .label=${this.hass.localize("ui.panel.config.tags.add_tag")}
+          extended
           @click=${this._addTag}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

src/panels/config/users/ha-config-users.ts

@@ -100,7 +100,8 @@ export class HaConfigUsers extends LitElement {
       >
         <mwc-fab
           slot="fab"
-          .title=${this.hass.localize("ui.panel.config.users.picker.add_user")}
+          .label=${this.hass.localize("ui.panel.config.users.picker.add_user")}
+          extended
           @click=${this._addUser}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

src/panels/config/zone/ha-config-zone.ts

@@ -257,7 +257,8 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
           : ""}
         <mwc-fab
           slot="fab"
-          title=${hass.localize("ui.panel.config.zone.add_zone")}
+          .label=${hass.localize("ui.panel.config.zone.add_zone")}
+          extended
           @click=${this._createZone}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts

@@ -110,6 +110,7 @@ export class HuiUnusedEntities extends LitElement {
       >
         <mwc-fab
           .label=${this.hass.localize("ui.panel.lovelace.editor.edit_card.add")}
+          extended
           @click=${this._addToLovelaceView}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

src/panels/lovelace/views/hui-masonry-view.ts

@@ -84,9 +84,10 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
       ${this.lovelace?.editMode
         ? html`
             <mwc-fab
-              title=${this.hass!.localize(
+              .label=${this.hass!.localize(
                 "ui.panel.lovelace.editor.edit_card.add"
               )}
+              extended
               @click=${this._addCard}
               class=${classMap({
                 rtl: computeRTL(this.hass!),

src/panels/lovelace/views/hui-panel-view.ts

@@ -78,9 +78,10 @@ export class PanelView extends LitElement implements LovelaceViewElement {
       ${this.lovelace?.editMode && this.cards.length === 0
         ? html`
             <mwc-fab
-              title=${this.hass!.localize(
+              .label=${this.hass!.localize(
                 "ui.panel.lovelace.editor.edit_card.add"
               )}
+              extended
               @click=${this._addCard}
               class=${classMap({
                 rtl: computeRTL(this.hass!),

src/translations/en.json

@@ -1375,7 +1375,7 @@
             "introduction": "The script editor allows you to create and edit scripts. Please follow the link below to read the instructions to make sure that you have configured Home Assistant correctly.",
             "learn_more": "Learn more about scripts",
             "no_scripts": "We couldn’t find any editable scripts",
-            "add_script": "Create new script",
+            "add_script": "Add script",
             "show_info": "Show info about script",
             "trigger_script": "Trigger script",
             "run_script": "Run script",