Improve dialog accessibility & input metadata#159
Merged
Conversation
Add accessible dialog semantics and stable form field metadata, minor UI and theme tweaks, and a test. Highlights: - Use DialogTitle/DialogDescription for connection and settings dialogs and expose aria-describedby for descriptions. - Add name, autocomplete and spellCheck attributes to auth inputs; update show password button (focus/disabled styles) and keyboard focus rings for auth method buttons. - Add image width/height and layout fixes (min-w-0) for LibraryCard. - Set color-scheme on the root element and add theme-color meta tags for light/dark modes. - Add a Vitest integration test that verifies the named dialog and credential field metadata. - Package.json: add a "doctor" script and react-doctor dependency; small formatting fix. These changes improve accessibility, keyboard navigation, and visual consistency.
Reviewer's GuideAdds accessible dialog semantics and stable auth field metadata, enhances keyboard focus styling and image/layout behavior, wires theme color-scheme to the document root, and introduces a Vitest integration test plus a small tooling addition for react-doctor. Flow diagram for theme application and color schemeflowchart LR
ThemeSelection[Select theme auto light dark]
applyTheme[applyTheme theme]
RootClass[documentElement.classList]
RootStyle[documentElement.style.colorScheme]
ThemeSelection --> applyTheme
applyTheme --> RootClass
applyTheme --> RootStyle
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
React DoctorScore: |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 1 issue
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location path="src/components/connection/steps/AuthStep.tsx" line_range="196-201" />
<code_context>
<div className="relative">
<Input
id="password"
+ name="password"
type={showPassword ? 'text' : 'password'}
placeholder="Enter your password…"
value={String(field.state.value)}
</code_context>
<issue_to_address>
**suggestion:** Add autocomplete and spellcheck hints for the password input
For this password field, consider adding `autoComplete="current-password"` (or a more specific value for this flow) and `spellCheck={false}` so the browser doesn’t spellcheck or autocorrect the input and can handle password management properly.
```suggestion
<Input
id="password"
name="password"
type={showPassword ? 'text' : 'password'}
placeholder="Enter your password…"
autoComplete="current-password"
spellCheck={false}
value={String(field.state.value)}
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves UI accessibility and form metadata stability across dialogs and authentication inputs, while also polishing visual/layout behavior and adding a regression test to lock in the new accessible semantics.
Changes:
- Add
DialogTitle/DialogDescriptionsemantics (and wiring viaaria-describedby) for the connection wizard and settings dialogs. - Stabilize auth/server address input metadata (
name,autoComplete,spellCheck) and improve keyboard focus styling for auth controls. - Reduce layout shift and truncation issues (explicit
imgdimensions;min-w-0), and add theme-related metadata (color-scheme,theme-colormeta tags) plus a new Vitest integration test.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/stores/app-store.ts | Sets color-scheme on the root element to match resolved theme. |
| src/components/settings/SettingsDialog.tsx | Adds accessible dialog title/description and a close button; minor header layout tweaks. |
| src/components/filter/LibraryCard.tsx | Adds explicit image dimensions and fixes truncation with min-w-0. |
| src/components/connection/steps/AuthStep.tsx | Adds stable input metadata and improves focus/disabled styling for auth controls. |
| src/components/connection/ConnectionWizardContent.tsx | Adds accessible dialog title/description for the wizard (screen-reader only). |
| src/tests/connection-wizard.form.test.tsx | Adds a test verifying dialog naming and credential field metadata. |
| package.json | Adds doctor script and react-doctor dev dependency. |
| index.html | Adds theme-color meta tags for light/dark modes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+72
to
+77
| @@ -72,6 +73,7 @@ | |||
| "vite": "^8.0.14", | |||
| "vite-plugin-pwa": "^1.3.0", | |||
| "vitest": "^4.1.7", | |||
| "workbox-window": "^7.4.1" | |||
| "workbox-window": "^7.4.1", | |||
| "react-doctor": "^0.2.6" | |||
Contributor
Code Review SummaryStatus: No Issues Found | Recommendation: Merge All previously raised issues have been resolved. The latest commit ( Resolved Issues
Files Reviewed (incremental — 2 files since b11fb1b)
Reviewed by claude-4.6-sonnet-20260217 · 126,098 tokens |
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
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.
Add accessible dialog semantics and stable form field metadata, minor UI and theme tweaks, and a test. Highlights:
Summary by Sourcery
Improve accessibility and metadata for dialogs, authentication inputs, and theming across the app.
New Features:
Enhancements:
Build:
Tests: