Radio Button not accessible in high contrast mode - Githubissues

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.

https://radix-ui.com/primitives

MIT License

14.9k stars 725 forks source link

Radio Button not accessible in high contrast mode #2993

Open maxkarkowski opened 1 week ago

maxkarkowski commented 1 week ago

Bug report

Current Behavior

User with a high contrast mode can't see the radio buttons, because there are not real elements.

SCR-20240703-kira

Expected behavior

Due to Accessibility reasons all elements should also be visible for users with high contrast mode on.

Reproducible example

CodeSandbox Template

enable high contrast mode via web developer tools

Suggested solution

make the default and the selected state of a radio button visible in high contrast mode. maybe some default css for forced-colors media query

Additional context

could be also relevant for checkbox components

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-radio-group	^1.1.3
React	n/a	18
Browser	Arc(Chromium Engine )	126.0.6478.127
Node	n/a	20
Operating System	MacOS	14.5

SameerJS6 commented 1 week ago

We can use the forced-colors media query to define the element colors in high contrast mode. A temporary solution for Tailwind users might be this. For plain CSS, we can create a custom class and adjust its colors using the forced-colors media query.

Thank you for mentioning this issue @maxkarkowski