fix(settings): wire search button aria-expanded + hide redundant row labels

settings.component.html
- Add aria-expanded + aria-controls on the search toggle button so
  screen readers announce whether the search panel is open. Mirrors
  the fix applied to logs.component.html.
- Add aria-hidden="true" to the three duplicate-text spans next to
  setting-backup, setting-restore, and setting-users buttons. Each
  button already carries the same translated text as its aria-label,
  so SRs were announcing the label twice (once for the visible span,
  once for the button).

Carries forward the accessibility improvements from #2699.

Deferred (substantial behavioural refactors, out of scope for pure
attribute grafting):
- settings.component.ts restart-required toast rewrite (custom HTML
  toast with manually injected Restart button + click/keydown handlers
  on a synthesized <button>). Explicit in the deferred list.
- sidebar.component.ts interaction refactor (cached element refs,
  touchstart routing, click-outside-to-close). Pure behavioural change,
  no a11y intent.
- settings.service.ts getIframeOrigin helper extraction + comment
  removal. Pure refactor, no a11y intent.

Already on HEAD (skipped):
- backup.component.html — fully done (role="group" on per-backup
  action groups, aria-hidden on every icon and the toggle label,
  translated aria-labels on every button)
- sidebar.component.html — already excellent (role="menuitem",
  tabindex=0, handleKeydown, ariaCurrentWhenActive="page",
  aria-hidden on all icons, <nav> wrapper with role+aria-label)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 2 people

CHANGELOG.md

@@ -22,6 +22,7 @@ All notable changes to `homebridge-config-ui-x` will be documented in this file.
 - fix(plugins): tighten screen-reader coverage for plugins page and bridge modal (@rfiorentino1)
 - fix(status): tighten screen-reader coverage for status widgets (@rfiorentino1)
 - fix(logs): wire search button aria-expanded + hide decorative toolbar icons (@rfiorentino1)
+- fix(settings): wire search button aria-expanded + hide redundant row labels (@rfiorentino1)
 
 ### Other Changes
 

ui/src/app/modules/settings/settings.component.html

@@ -6,7 +6,9 @@ <h3 class="primary-text m-0">{{ 'menu.settings.title' | translate }}</h3>
     <button
       type="button"
       class="btn btn-elegant my-0 me-0"
+      aria-controls="settings-search-region"
       [attr.aria-label]="'form.search' | translate"
+      [attr.aria-expanded]="showSearchBar()"
       (click)="toggleSearch()"
     >
       <i aria-hidden="true" [class]="`fas fa-search${showSearchBar() ? ' primary-text' : ''}`"></i>
@@ -15,7 +17,7 @@ <h3 class="primary-text m-0">{{ 'menu.settings.title' | translate }}</h3>
 </div>
 
 @if (showSearchBar()) {
-  <div class="row">
+  <div id="settings-search-region" class="row">
     <div class="col-md-12">
       <form novalidate>
         <input
@@ -98,7 +100,7 @@ <h5 class="primary-text">
               [attr.inert]="isItemHidden('setting-backup') || null"
             >
               <div class="setting-row-inner d-flex justify-content-between align-items-center">
-                <span class="pe-2">{{ 'backup.title_backup' | translate }}</span>
+                <span class="pe-2" aria-hidden="true">{{ 'backup.title_backup' | translate }}</span>
                 <button
                   type="button"
                   class="btn btn-primary waves-effect m-0 ms-3 py-1 min-w-50"
@@ -115,7 +117,7 @@ <h5 class="primary-text">
               [attr.inert]="isItemHidden('setting-restore') || null"
             >
               <div class="setting-row-inner d-flex justify-content-between align-items-center">
-                <span class="pe-2">{{ 'config.restore.title' | translate }}</span>
+                <span class="pe-2" aria-hidden="true">{{ 'config.restore.title' | translate }}</span>
                 <button
                   type="button"
                   class="btn btn-primary waves-effect m-0 ms-3 py-1 min-w-50"
@@ -132,7 +134,7 @@ <h5 class="primary-text">
               [attr.inert]="isItemHidden('setting-users') || null"
             >
               <div class="setting-row-inner d-flex justify-content-between align-items-center">
-                <span class="pe-2">{{ 'menu.tooltip_user_accounts' | translate }}</span>
+                <span class="pe-2" aria-hidden="true">{{ 'menu.tooltip_user_accounts' | translate }}</span>
                 <a
                   class="btn btn-primary waves-effect m-0 ms-3 py-1 min-w-50"
                   routerLink="/users"