Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(styles): add user-select: none to toggle #11670

Merged

Conversation

joshblack
Copy link
Contributor

Closes #10881

Add user-select: none to toggle to prevent text selection.

Changelog

New

Changed

  • Update .cds--toggle select to set user-select: none

Removed

Testing / Reviewing

  • Verify that text selection no longer occurs when quickly clicking the toggle
  • Review the approach of setting user-select: none to see if this is too broad of a change and if this should be more specific

@joshblack joshblack requested a review from a team as a code owner June 23, 2022 15:19
@netlify
Copy link

netlify bot commented Jun 23, 2022

Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 781b9d1
🔍 Latest deploy log https://app.netlify.com/sites/carbon-components-react/deploys/62c48f0feddf0a0008973e2a
😎 Deploy Preview https://deploy-preview-11670--carbon-components-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jun 23, 2022

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 781b9d1
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/62c48f0ff77acc0008fdff9c
😎 Deploy Preview https://deploy-preview-11670--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Copy link
Member

@tay1orjones tay1orjones left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can confirm this fixes it. The only potential downside I see is that the label is no longer selectable/highlight-able

label.can.not.be.highlighted.mov

I'm not aware of any a11y requirement or similar that would require the text be selectable, so I think it's a fine tradeoff? I also can't think of a strong use case for someone to need to select/highlight the label for copy/paste 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

[Bug]: Clicking on Toggle component selects nearby text
3 participants