Anti-Pattern Suggestion: Radio Buttons and Checkboxes
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 35/100
- Issue type
- Documentation
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- css
- Domain
- accessibility, documentation, frontend
Research direction
Find the repository's existing anti-pattern or form-control guidance and review how related entries are organized. Add guidance covering custom radio buttons and checkboxes hidden with display:none, visibility:hidden, or zero dimensions, and consider whether the two cases belong together; done means both accessibility problems are clearly documented.
Written by the indexing model from the issue text.
Description
There are 2 CSS anti-patterns I've run into with radio buttons and checkboxes that have custom styles. Please let me know if you'd rather have these in 2 separate issues and I can do that. If you add these, feel free to take as much or as little of my descriptions as you want. I know the display: none issue is one I see all the time:
Inputs Set to Display: None
display: none and visibility: hidden prevent screen reader users and sighted keyboard users from being able to focus and interact with the inputs. Screen reader users may not even know that the fields exist at all.
Inputs have width and/or height set to 0
This hides the fields from screen readers. [If I recall correctly, in FF/NVDA, if you focus a checkbox that has width and height 0 it will be read as "blank". Presumably it only gets read at all because it's in the focus order.]
- Dominant language
- No language data
- Stars
- 19
- Forks
- 3
- PR merge metrics
- No merged PRs in 30d
Getting set up
This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from MelSumner/ember-component-patterns
-
Difficulty 1/5 Under an hour Newbie friendliness 45/100
-
Difficulty 3/5 1-2 days Newbie friendliness 35/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 35/100
MelSumner/ember-component-patterns#6 · 1 reaction ·
All issues in MelSumner/ember-component-patterns
Similar issues
-
area/web interface
Difficulty 2/5 1-3 hours Newbie friendliness 62/100
mastodon/mastodon#41009 · 2 comments ·
Maintainers usually reply within 1 day
-
accessibility good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
-
[Bug]: Provider showcase is flat divsPossibly taken @Senthil455 claimed this today. OpenOSIC'26
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
AditthyaSS/iloveAgents#1702 · 2 comments ·
Maintainers usually reply within 1 day
-
bug good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day
-
good first issue track:translation
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
Sara-Managed-Projects/space-radar#684 ·
Maintainers usually reply within 1 day