openui / openui/open-ui

[switch]: Should author defined content be allowed on tracks or thumb?

Open
#959 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs-triage switch
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
image

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. image
  • It’s unclear how to style the track and slider if the track content can be of arbitrary length image

Live example on codepen using ant design system

Possible solutions
  1. Allow for author defined text/content and find solutions to the above issues
  2. Don't allow for author defined text and risk not adressing all existing use cases
  3. Only allow decorative images or svg content, which covers most use cases and avoids the above issues mostly
  4. ...?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.