Skip to content

fix(a11y): increase sm and icon button touch targets to 44x44px (#243) - #342

Open
arpita-1111 wants to merge 1 commit into
ionfwsrijan:mainfrom
arpita-1111:fix-243-button-touch-targets
Open

fix(a11y): increase sm and icon button touch targets to 44x44px (#243)#342
arpita-1111 wants to merge 1 commit into
ionfwsrijan:mainfrom
arpita-1111:fix-243-button-touch-targets

Conversation

@arpita-1111

Copy link
Copy Markdown

Linked issue

Closes #243

What this PR does

Increases the touch target size of the sm and icon button variants to meet WCAG 2.2 Success Criterion 2.5.8 (Target Size - Minimum). Previously these variants were smaller than the recommended 44x44 CSS pixels, making them harder to interact with on touch-enabled devices.

Type of change

  • Bug fix
  • New feature
  • ML model / training pipeline
  • Refactor (no behaviour change)
  • Documentation
  • Tests only
  • Accessibility fix

Stack affected

  • Backend
  • Frontend
  • Both

Changes

Frontend

  • Updated frontend/src/app/components/ui/button.tsx.
  • Changed sm variant height from h-8 (32px) to h-11 (44px).
  • Changed icon variant size from size-9 (36px) to size-11 (44px).
  • Existing visual style, padding, and layout preserved.

Testing

How did you test this?

  • Ran the frontend locally with npm run dev.
  • Visually inspected the sidebar navigation, dashboard buttons, and icon-only controls.
  • Confirmed buttons remain visually consistent with the design system after the size increase.

Checklist

  • Tested locally end-to-end (visual check of sm/icon buttons across the app)
  • No new console errors or unhandled exceptions introduced
  • Added or updated tests where applicable
  • New dependencies added
  • No new model files added

Anything reviewers should focus on

Please confirm the sm and icon button variants render correctly across different pages (sidebar, toolbar, dashboard) and that no layouts break due to the increased touch target size.

Screenshots (if UI changed)

Sidebar navigation buttons (Dashboard, Findings, Fixes, Verify, Leaderboard) and Light mode toggle now render at increased touch target size, confirmed visually in local dev environment.

@github-actions

Copy link
Copy Markdown

🎉 Thank you @arpita-1111 for submitting a Pull Request!

We're excited to review your contribution.

✅ Before Review

  • Ensure all CI checks pass.
  • Complete the PR template.
  • Link the related issue.

Want faster reviews and contributor support?

Join our Discord community:

🔗 https://discord.gg/FcXuyw2Rs

Maintainers and mentors are active there and can help resolve blockers quickly.

Happy Contributing! 🚀

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.

[Accessibility] Increase Button Touch Targets to Meet WCAG Minimum Size Requirements

1 participant