Improve settings page accessibility (No. 2) (#25965)

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

@@ -54,6 +54,9 @@ class HaConfigNavigation extends LitElement {
               `,
       }));
     return html`
+      <div class="visually-hidden" role="heading" aria-level="2">
+        ${this.hass.localize("panel.config")}
+      </div>
       <ha-navigation-list
         has-secondary
         .hass=${this.hass}
@@ -68,6 +71,17 @@ class HaConfigNavigation extends LitElement {
     ha-navigation-list {
       --navigation-list-item-title-font-size: var(--ha-font-size-l);
     }
+    /* Accessibility */
+    .visually-hidden {
+      position: absolute;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      width: 1px;
+      margin: -1px;
+      padding: 0;
+      border: 0;
+    }
   `;
 }
 

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

@@ -115,7 +115,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
                     ></ha-spinner>`
                   : nothing}
               </div>
-              <span
+              <span slot="headline"
                 >${deviceEntry
                   ? computeDeviceNameDisplay(deviceEntry, this.hass)
                   : entity.attributes.friendly_name}</span