Add alt to img, fix styling issue voice

Author: bramkragten

src/dialogs/voice-assistant-setup/styles.ts

@@ -7,7 +7,7 @@ export const AssistantSetupStyles = [
     :host {
       align-items: center;
       text-align: center;
-      min-height: 300px;
+      min-height: 400px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -22,6 +22,10 @@ export const AssistantSetupStyles = [
       width: 120px;
     }
     @media all and (max-width: 450px), all and (max-height: 500px) {
+      :host {
+        min-height: 100%;
+        height: auto;
+      }
       .content img {
         margin-top: 68px;
         margin-bottom: 68px;

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-area.ts

@@ -17,7 +17,10 @@ export class HaVoiceAssistantSetupStepArea extends LitElement {
     const device = this.hass.devices[this.deviceId];
 
     return html`<div class="content">
-        <img src="/static/images/voice-assistant/area.png" />
+        <img
+          src="/static/images/voice-assistant/area.png"
+          alt="Casita Home Assistant logo"
+        />
         <h1>Select area</h1>
         <p class="secondary">
           When you voice assistant knows where it is, it can better control the

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-change-wake-word.ts

@@ -21,7 +21,10 @@ export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement {
 
   protected override render() {
     return html`<div class="padding content">
-        <img src="/static/images/voice-assistant/change-wake-word.png" />
+        <img
+          src="/static/images/voice-assistant/change-wake-word.png"
+          alt="Casita Home Assistant logo"
+        />
         <h1>Change wake word</h1>
         <p class="secondary">
           Some wake words are better for

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-check.ts

@@ -36,7 +36,10 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
   protected override render() {
     return html`<div class="content">
       ${this._status === "timeout"
-        ? html`<img src="/static/images/voice-assistant/error.png" />
+        ? html`<img
+              src="/static/images/voice-assistant/error.png"
+              alt="Casita Home Assistant error logo"
+            />
             <h1>The voice assistant is unable to connect to Home Assistant</h1>
             <p class="secondary">
               To play audio, the voice assistant device has to connect to Home
@@ -53,7 +56,10 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
               >
               <ha-button @click=${this._testConnection}>Retry</ha-button>
             </div>`
-        : html`<img src="/static/images/voice-assistant/hi.png" />
+        : html`<img
+              src="/static/images/voice-assistant/hi.png"
+              alt="Casita Home Assistant hi logo"
+            />
             <h1>Hi</h1>
             <p class="secondary">
               Over the next couple steps we're going to personalize your voice

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-local.ts

@@ -44,7 +44,10 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
   protected override render() {
     return html`<div class="content">
       ${this._state === "INSTALLING"
-        ? html`<img src="/static/images/voice-assistant/update.png" />
+        ? html`<img
+              src="/static/images/voice-assistant/update.png"
+              alt="Casita Home Assistant loading logo"
+            />
             <h1>Installing add-ons</h1>
             <p>
               The Whisper and Piper add-ons are being installed and configured.
@@ -54,7 +57,10 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
               ${this._detailState || "Installation can take several minutes"}
             </p>`
         : this._state === "ERROR"
-          ? html` <img src="/static/images/voice-assistant/error.png" />
+          ? html` <img
+                src="/static/images/voice-assistant/error.png"
+                alt="Casita Home Assistant error logo"
+              />
               <h1>Failed to install add-ons</h1>
               <p>
                 We could not automatically install a local TTS and STT provider
@@ -75,7 +81,10 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
                 >
               </a>`
           : this._state === "NOT_SUPPORTED"
-            ? html`<img src="/static/images/voice-assistant/error.png" />
+            ? html`<img
+                  src="/static/images/voice-assistant/error.png"
+                  alt="Casita Home Assistant error logo"
+                />
                 <h1>Installation of add-ons is not supported on your system</h1>
                 <p>
                   Your system is not supported to automatically install a local

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts

@@ -68,7 +68,10 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
       : undefined;
 
     return html`<div class="content">
-        <img src="/static/images/voice-assistant/heart.png" />
+        <img
+          src="/static/images/voice-assistant/heart.png"
+          alt="Casita Home Assistant logo"
+        />
         <h1>Ready to Assist!</h1>
         <p class="secondary">
           Make any final customizations here. You can always change these in the

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts

@@ -65,7 +65,10 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement {
     const progressIsNumeric = stateObj && updateUsesProgress(stateObj);
 
     return html`<div class="content">
-      <img src="/static/images/voice-assistant/update.png" />
+      <img
+        src="/static/images/voice-assistant/update.png"
+        alt="Casita Home Assistant loading logo"
+      />
       <h1>
         ${stateObj &&
         (stateObj.state === "unavailable" || updateIsInstalling(stateObj))

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts

@@ -90,14 +90,17 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement {
     return html`<div class="content">
         ${!this._detected
           ? html`
-          <img src="/static/images/voice-assistant/sleep.png" />
+          <img src="/static/images/voice-assistant/sleep.png" alt="Casita Home Assistant logo"/>
           <h1>
             Say “${this._activeWakeWord(this.assistConfiguration)}” to wake the
             device up
           </h1>
           <p class="secondary">Setup will continue once the device is awake.</p>
         </div>`
-          : html`<img src="/static/images/voice-assistant/ok-nabu.png" />
+          : html`<img
+                src="/static/images/voice-assistant/ok-nabu.png"
+                alt="Casita Home Assistant logo"
+              />
               <h1>
                 Say “${this._activeWakeWord(this.assistConfiguration)}” again
               </h1>