feat(accessibility): improve accessibility for to better align with WCAG 2.1 AA#2164
Merged
feat(accessibility): improve accessibility for to better align with WCAG 2.1 AA#2164
Conversation
Implement full WCAG 2.1 AA compliant keyboard navigation for the ConfigureColumnsDropdown component to allow users to reorder columns and toggle visibility without a mouse. Changes: - Create reusable useKeyboardReorder hook for keyboard-accessible list reordering - Add Alt+Arrow Up/Down keyboard shortcuts for reordering columns - Add Space/Enter key handlers for toggling column visibility - Implement ARIA live regions for screen reader announcements - Add visual keyboard shortcut hints (Alt+↑↓ to reorder) - Add comprehensive test coverage for keyboard reorder functionality - Add proper focus management with visual focus indicators - Add screen reader instructions for keyboard navigation The hook implements proper cleanup of timeouts to prevent memory leaks and can be reused in other components that need keyboard-accessible reordering.
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
Create a custom ESLint rule to ensure all Remix route files export a
meta function with proper page titles for better SEO and UX.
The rule checks for meta exports in route files that have either:
- A default component export (renders UI)
- A loader or action function
Changes:
- Add new rule: require-meta-export-in-routes.cjs
- Register rule in eslint-local-rules.cjs (commented out)
- Add rule to .eslintrc configuration (commented out)
The rule is currently commented out to avoid conflicts with ongoing
route refactoring work in another branch. It can be enabled by
uncommenting the lines in both config files.
Rule will warn when a route file is missing:
export const meta: MetaFunction<typeof loader> = ({ data }) => [
{ title: data ? appendToMetaTitle(data.header.title) : "" }
];
Add skip links to allow keyboard users to bypass repetitive navigation
and jump directly to main content or navigation menu. This satisfies
WCAG 2.4.1 Bypass Blocks (Level A) requirement.
Changes:
- Create new SkipLinks component with two links:
- Skip to main content
- Skip to navigation
- Add skip links at top of layout (first focusable element)
- Add id="main-content" to main content area (SidebarInset)
- Add id="navigation" to sidebar navigation (AppSidebar)
- Add tabIndex={-1} to main content for focus management
- Style skip links to be visually hidden until focused
Skip links are positioned off-screen and only become visible when
focused via keyboard (Tab key), providing accessible navigation for
keyboard and screen reader users.
Add explicit autoComplete prop to Input component interface for better form UX and accessibility. This allows proper browser autofill support for various input types (email, password, name, etc.). The prop is automatically passed through to the underlying input/textarea element via the spread operator, enabling standard HTML autocomplete functionality. Common autocomplete values: - "email" - "name", "given-name", "family-name" - "username" - "new-password", "current-password" - "tel", "street-address", "postal-code" - And many more per HTML spec
Add proper autocomplete attributes to user-related form inputs to improve form filling UX and enable browser autofill functionality. Changes: - Add autoComplete="email" to email input fields - Add autoComplete="given-name" to first name field - Add autoComplete="family-name" to last name field - Add autoComplete="tel" to phone number field These autocomplete values follow the HTML Living Standard specification and improve both user experience and accessibility by helping password managers and browsers properly identify and autofill form fields. Files updated: - app/components/user/change-email.tsx (email fields) - app/components/user/details-form.tsx (name fields) - app/components/user/user-contact-form.tsx (email and phone fields)
Add proper autocomplete attributes to the onboarding form inputs to improve user experience and enable browser autofill functionality. Changes: - Add autoComplete="given-name" to first name field - Add autoComplete="family-name" to last name field - Add autoComplete="username" to username field These attributes help browsers and password managers correctly identify and autofill form fields during the user onboarding process, improving the signup experience.
DonKoko
changed the title
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.
Implement full WCAG 2.1 AA compliant keyboard navigation for the ConfigureColumnsDropdown component to allow users to reorder columns and toggle visibility without a mouse.
Changes:
The hook implements proper cleanup of timeouts to prevent memory leaks and can be reused in other components that need keyboard-accessible reordering.