Skip to content

fix(dashkit): address interface review findings on critical interactive components - #12

Merged
carllosnc merged 1 commit into
masterfrom
fix/interface-review-a11y
Nov 2, 2026
Merged

carllosnc merged 1 commit into
masterfrom
fix/interface-review-a11y

Conversation

@carllosnc

Copy link
Copy Markdown
Owner

Description

This PR addresses critical accessibility (a11y) and interface review findings across interactive components in Dashkit:

  • Visible focus rings: Added focus rings to Button, Accordion, Tabs, Sidebar, NavigationMenu, ButtonGroup, ColorPicker, and Slider (WCAG 2.4.7 / 1.4.11).
  • Accessible names & labels: Added names/labels for Toast close button, ColorPicker swatches and hex input, Sidebar toggle, OtpInput digits, and CopyField label association (WCAG 4.1.2).
  • Dialog labeling: Added labelledBy and label props for Modal and Drawer dialogs.
  • Keyboard navigation & focus management:
    • Chip keyboard operability via native button / role=button (WCAG 2.1.1).
    • Hover Popovers open/close on focus and blur (WCAG 2.1.1).
    • Dropdown & Select move focus into popups on open and restore to trigger on close; removed mismatched aria-haspopup=menu.
    • Added listbox/combobox keyboard navigation and ARIA support (arrows/Home/End, Enter, aria-activedescendant, option roles, label association).
  • Reduced motion: Honor prefers-reduced-motion with MotionConfig and CSS fallback (WCAG 2.3.3).
  • Color contrast: Replaced text-ds-400 with text-ds-600 dark:text-ds-400 on light surfaces for compliant contrast ratios (WCAG 1.4.3 / 1.4.11).
  • Toast improvements: Reached close button easily, keep error toasts until dismissed, pause timers on hover/focus, and prevent truncation of toast content.
  • Form fields & mobile usability: Link error and helper text via aria-invalid and aria-describedby; render inputs at 16px below sm breakpoint to prevent iOS auto-zoom; enlarged touch target hit areas for Chip delete, Combobox clear, and Toast close.

Verification

  • bun run check:all passed (all tests, linter, and build succeeded).

…ve components

- add visible focus rings to Button, Accordion, Tabs, Sidebar, NavigationMenu,
  ButtonGroup, ColorPicker and Slider (WCAG 2.4.7/1.4.11)
- add accessible names: Toast close, ColorPicker swatches and hex input,
  Sidebar toggle, OtpInput digits, CopyField label association (4.1.2)
- keep collapsed Sidebar item text in the accessibility tree (4.1.2)
- make Chip keyboard-operable via a native button / role=button (2.1.1)
- open hover Popovers from focus and blur (2.1.1)
- honor prefers-reduced-motion with MotionConfig and a CSS fallback (2.3.3)
- replace text-ds-400 with text-ds-600 dark:text-ds-400 on light surfaces
  (measured 2.56:1 on white, 2.33:1 on ds-100; 1.4.3/1.4.11)
- make the Toast close button reachable (group class, focus opacity, larger
  hit area), keep error toasts until dismissed, pause timers on hover/focus
  and stop truncating toast content (2.2.2/2.4.7)
- label Modal and Drawer dialogs with labelledBy/label props (4.1.2)
- move focus into Dropdown and Select popups on open and restore it to the
  trigger on close; drop the mismatched aria-haspopup=menu (2.4.3/4.1.2)
- add listbox/combobox keyboard and ARIA support: arrows/Home/End, Enter,
  aria-activedescendant, option roles, label association (2.1.1/4.1.2)
- link error and helper text to fields with aria-invalid/aria-describedby
- render inputs at 16px below the sm breakpoint to prevent iOS zoom (1.4.4)
- enlarge hit areas on Chip delete, Combobox clear and Toast close (2.5.8)
@netlify

netlify Bot commented Nov 2, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for dashkit ready!

Name Link
🔨 Latest commit b374502
🔍 Latest deploy log https://app.netlify.com/projects/dashkit/deploys/6ae8e5ae8b353186a66216fc
😎 Deploy Preview https://deploy-preview-12--dashkit.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@carllosnc
carllosnc merged commit 2513e65 into master Nov 2, 2026
4 of 5 checks passed
@carllosnc
carllosnc deleted the fix/interface-review-a11y branch November 2, 2026 19:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant