fix: add role=alert to write-mode warning banner for screen readers#151
Merged
Mananwebdev160408 merged 4 commits intoJul 4, 2026
Conversation
checkConnectionHealth was defined but never called after init(). Add a 30s setInterval useEffect so health status updates automatically without requiring a page refresh. Fixes Mananwebdev160408#144
…ccessibility View mode and theme dropdown triggers had aria-haspopup/aria-expanded but no aria-label — screen readers announced them as generic 'button'. Decorative SVG icons and color dots inside buttons were also read aloud causing double-announcement. Changes: - Add dynamic aria-label to view mode dropdown trigger - Add dynamic aria-label to theme dropdown trigger - Add aria-hidden to decorative icons inside view/theme dropdowns - Add aria-hidden to ChevronIcon in both dropdown triggers - Add aria-hidden to color dot divs in theme dropdown items Fixes Mananwebdev160408#143
Search result divs had onClick but no role, tabIndex, or onKeyDown. Keyboard-only users could not Tab to results or activate them. - Add role=button to each result div - Add tabIndex=0 to make results focusable via Tab - Add onKeyDown handler for Enter and Space keys - Add aria-label announcing table name and match count - Add cursor:pointer for visual consistency Fixes Mananwebdev160408#142
Warning banner had no ARIA live region — screen readers silently ignored it, leaving visually impaired users unaware they were in a mode allowing destructive database operations. - Add role=alert to the warning banner div - Add aria-live=assertive to interrupt and announce immediately - Add aria-atomic=true to read the full message as one unit - Add aria-hidden=true to the decorative AlertTriangleIcon Fixes Mananwebdev160408#141
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
2 participants
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.
Problem
Fixes #141
The write-mode warning banner rendered when the
--writeflag is active had no ARIA live region. Screen readers silently ignored it, meaning visually impaired users had no way to know they were in a mode that allows INSERT, UPDATE, and DELETE operations on their database. This is both an accessibility violation and a safety concern, violating WCAG 2.1 Success Criterion 4.1.3 (Status Messages).Root Cause
The warning banner
<div>inApp.tsxwas missing three ARIA attributes:role="alert"— screen readers treated it as a plain container and never announced itaria-live="assertive"— no live region meant no automatic announcement on mountaria-atomic="true"— without this, screen readers may read the message in fragmentsAdditionally the decorative
AlertTriangleIconhad noaria-hidden, causing it to be announced as an unlabelled graphic before the warning text.Fix
role="alert"to the warning banner<div>— marks it as an important announcementaria-live="assertive"— interrupts the screen reader immediately to announce the banner when it appearsaria-atomic="true"— ensures the full message is read as one complete unitaria-hidden="true"toAlertTriangleIcon— hides the decorative icon so screen readers announce only the textFiles Changed
frontend/src/App.tsx— 4 attribute additions to the write-mode warning banner only, no logic or styling changesTesting
--writeflag)<div>in DevTools — confirmrole="alert",aria-live="assertive", andaria-atomic="true"are present