[switch]: Should author defined content be allowed on tracks or thumb?
Nobody has claimed this yet.
- Dominant language
- MDX
- Stars
- 4.5k
- Forks
- 226
- Avg merge
- 2d 22h
- Merged PRs (30d)
- 4
Description
I'm working on the switch proposal pull request. @scottaohara raised multiple concerns with author defined content inside the different parts of the proposed <switch> element.
Question
Should authors be able to add text content to either the track or the thumb elements?
Research
About a third of analyzed Design Systems use this feature (Design System Analysis section in the pull request).
- 30% display content on the track
- 18% display content on the thumb
Example: https://ant.design/components/switch
Accessibility concerns
- Content mapping will be difficult since it's a new concept
- The switch is already described by its label and content should be ignored
Relevant comment: https://github.com/openui/open-ui/pull/785#discussion_r1396420527
Layout issues
Custom content can have various layout issues.
- The content on both sides cannot be wider than the thumb. Otherwise, the thumb is no longer capable of hiding the content of the inactive track content.
- It’s unclear how to style the track and slider if the track content can be of arbitrary length
Live example on codepen using ant design system
Possible solutions
- Allow for author defined text/content and find solutions to the above issues
- Don't allow for author defined text and risk not adressing all existing use cases
- Only allow decorative images or svg content, which covers most use cases and avoids the above issues mostly
- ...?
Contributor guide
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.
Research direction
Start with the switch proposal pull request #785, especially its Design System Analysis section and the linked accessibility discussion. Compare the track and thumb content use cases, including the Ant Design example and CodePen, then resolve whether author-defined content should be allowed. Done means the proposal has a decided treatment for text, decorative content, accessibility mapping, and layout concerns.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100