a11y: improve settings pages and layout#2699
Closed
rfiorentino1 wants to merge 3 commits into
Closed
Conversation
bwp91
force-pushed
the
latest
branch
3 times, most recently
from
e181448 to
efc61f9
Compare
bwp91
pushed a commit
that referenced
this pull request
May 24, 2026
…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>
bwp91
pushed a commit
that referenced
this pull request
May 24, 2026
settings.component.ts - showRestartToast() - Replace tapToDismiss with an explicit, focusable Restart button. The old toast relied on clicking anywhere on the toast body to trigger the restart, which had no keyboard equivalent — screen-reader users could hear the toast but had no way to act on it without using a mouse. - Inject role="alert" + aria-live="assertive" + aria-atomic="true" on the toast container in the onShown callback so the message is announced when it appears. - Add type="button" + translated aria-label="Close" on toastr's close control (which is otherwise an <a> with no accessible name). - Translated "Restart Homebridge" button reuses menu.hbrestart.title; "Close" reuses form.button_close. No new i18n keys needed. This is a fragile DOM-manipulation against toastr internals — flagged in the commit body as a known maintenance risk if toastr restructures its toast template. Carries forward the accessibility improvements from #2699 (deferred from earlier in this branch). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
Author
|
Superseded by the May 24 commits already merged into |
bwp91
pushed a commit
that referenced
this pull request
May 26, 2026
…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>
bwp91
pushed a commit
that referenced
this pull request
May 26, 2026
settings.component.ts - showRestartToast() - Replace tapToDismiss with an explicit, focusable Restart button. The old toast relied on clicking anywhere on the toast body to trigger the restart, which had no keyboard equivalent — screen-reader users could hear the toast but had no way to act on it without using a mouse. - Inject role="alert" + aria-live="assertive" + aria-atomic="true" on the toast container in the onShown callback so the message is announced when it appears. - Add type="button" + translated aria-label="Close" on toastr's close control (which is otherwise an <a> with no accessible name). - Translated "Restart Homebridge" button reuses menu.hbrestart.title; "Close" reuses form.button_close. No new i18n keys needed. This is a fragile DOM-manipulation against toastr internals — flagged in the commit body as a known maintenance risk if toastr restructures its toast template. Carries forward the accessibility improvements from #2699 (deferred from earlier in this branch). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
bwp91
pushed a commit
that referenced
this pull request
May 26, 2026
…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>
bwp91
pushed a commit
that referenced
this pull request
May 26, 2026
settings.component.ts - showRestartToast() - Replace tapToDismiss with an explicit, focusable Restart button. The old toast relied on clicking anywhere on the toast body to trigger the restart, which had no keyboard equivalent — screen-reader users could hear the toast but had no way to act on it without using a mouse. - Inject role="alert" + aria-live="assertive" + aria-atomic="true" on the toast container in the onShown callback so the message is announced when it appears. - Add type="button" + translated aria-label="Close" on toastr's close control (which is otherwise an <a> with no accessible name). - Translated "Restart Homebridge" button reuses menu.hbrestart.title; "Close" reuses form.button_close. No new i18n keys needed. This is a fragile DOM-manipulation against toastr internals — flagged in the commit body as a known maintenance risk if toastr restructures its toast template. Carries forward the accessibility improvements from #2699 (deferred from earlier in this branch). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
bwp91
pushed a commit
that referenced
this pull request
May 26, 2026
…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>
bwp91
pushed a commit
that referenced
this pull request
May 26, 2026
settings.component.ts - showRestartToast() - Replace tapToDismiss with an explicit, focusable Restart button. The old toast relied on clicking anywhere on the toast body to trigger the restart, which had no keyboard equivalent — screen-reader users could hear the toast but had no way to act on it without using a mouse. - Inject role="alert" + aria-live="assertive" + aria-atomic="true" on the toast container in the onShown callback so the message is announced when it appears. - Add type="button" + translated aria-label="Close" on toastr's close control (which is otherwise an <a> with no accessible name). - Translated "Restart Homebridge" button reuses menu.hbrestart.title; "Close" reuses form.button_close. No new i18n keys needed. This is a fragile DOM-manipulation against toastr internals — flagged in the commit body as a known maintenance risk if toastr restructures its toast template. Carries forward the accessibility improvements from #2699 (deferred from earlier in this branch). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
bwp91
pushed a commit
that referenced
this pull request
May 26, 2026
…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>
bwp91
pushed a commit
that referenced
this pull request
May 26, 2026
settings.component.ts - showRestartToast() - Replace tapToDismiss with an explicit, focusable Restart button. The old toast relied on clicking anywhere on the toast body to trigger the restart, which had no keyboard equivalent — screen-reader users could hear the toast but had no way to act on it without using a mouse. - Inject role="alert" + aria-live="assertive" + aria-atomic="true" on the toast container in the onShown callback so the message is announced when it appears. - Add type="button" + translated aria-label="Close" on toastr's close control (which is otherwise an <a> with no accessible name). - Translated "Restart Homebridge" button reuses menu.hbrestart.title; "Close" reuses form.button_close. No new i18n keys needed. This is a fragile DOM-manipulation against toastr internals — flagged in the commit body as a known maintenance risk if toastr restructures its toast template. Carries forward the accessibility improvements from #2699 (deferred from earlier in this branch). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
bwp91
pushed a commit
that referenced
this pull request
May 26, 2026
…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>
bwp91
pushed a commit
that referenced
this pull request
May 26, 2026
settings.component.ts - showRestartToast() - Replace tapToDismiss with an explicit, focusable Restart button. The old toast relied on clicking anywhere on the toast body to trigger the restart, which had no keyboard equivalent — screen-reader users could hear the toast but had no way to act on it without using a mouse. - Inject role="alert" + aria-live="assertive" + aria-atomic="true" on the toast container in the onShown callback so the message is announced when it appears. - Add type="button" + translated aria-label="Close" on toastr's close control (which is otherwise an <a> with no accessible name). - Translated "Restart Homebridge" button reuses menu.hbrestart.title; "Close" reuses form.button_close. No new i18n keys needed. This is a fragile DOM-manipulation against toastr internals — flagged in the commit body as a known maintenance risk if toastr restructures its toast template. Carries forward the accessibility improvements from #2699 (deferred from earlier in this branch). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
bwp91
pushed a commit
that referenced
this pull request
May 27, 2026
…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>
bwp91
pushed a commit
that referenced
this pull request
May 27, 2026
settings.component.ts - showRestartToast() - Replace tapToDismiss with an explicit, focusable Restart button. The old toast relied on clicking anywhere on the toast body to trigger the restart, which had no keyboard equivalent — screen-reader users could hear the toast but had no way to act on it without using a mouse. - Inject role="alert" + aria-live="assertive" + aria-atomic="true" on the toast container in the onShown callback so the message is announced when it appears. - Add type="button" + translated aria-label="Close" on toastr's close control (which is otherwise an <a> with no accessible name). - Translated "Restart Homebridge" button reuses menu.hbrestart.title; "Close" reuses form.button_close. No new i18n keys needed. This is a fragile DOM-manipulation against toastr internals — flagged in the commit body as a known maintenance risk if toastr restructures its toast template. Carries forward the accessibility improvements from #2699 (deferred from earlier in this branch). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
bwp91
pushed a commit
that referenced
this pull request
May 27, 2026
settings.component.ts - showRestartToast() - Replace tapToDismiss with an explicit, focusable Restart button. The old toast relied on clicking anywhere on the toast body to trigger the restart, which had no keyboard equivalent — screen-reader users could hear the toast but had no way to act on it without using a mouse. - Inject role="alert" + aria-live="assertive" + aria-atomic="true" on the toast container in the onShown callback so the message is announced when it appears. - Add type="button" + translated aria-label="Close" on toastr's close control (which is otherwise an <a> with no accessible name). - Translated "Restart Homebridge" button reuses menu.hbrestart.title; "Close" reuses form.button_close. No new i18n keys needed. This is a fragile DOM-manipulation against toastr internals — flagged in the commit body as a known maintenance risk if toastr restructures its toast template. Carries forward the accessibility improvements from #2699 (deferred from earlier in this branch). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary\n- Improve accessibility for settings pages and shared layout.