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.

Sign up for GitHub

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

Jump to bottom

checkbox and switch css fixes for high contrast mode #2317

Merged
merged 3 commits into from
Aug 29, 2024
Merged

checkbox and switch css fixes for high contrast mode #2317

merged 3 commits into from
Aug 29, 2024

Conversation

tshimber
Copy link
Contributor

@tshimber tshimber commented Jun 4, 2024 •
edited
Loading

Fixes #2300

@netlify Netlify
Copy link

netlify bot commented Jun 4, 2024 •
edited
Loading

✅ Deploy Preview for marvelous-moxie-a6e2fe ready!

Name Link
🔨 Latest commit 4b8b0ff
🔍 Latest deploy log https://app.netlify.com/sites/marvelous-moxie-a6e2fe/deploys/66cefe46c6dbbf0009dc2241
😎 Deploy Preview https://deploy-preview-2317--marvelous-moxie-a6e2fe.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 configuration.

@tshimber
Copy link
Contributor Author

tshimber commented Jun 7, 2024 •
edited
Loading

@maomaoZH @acstll @felix-ico
hi, guys! I'm new here, gonna try to make some fixes. I was suggested to mention you for review and to give detailed description.

This is a fix of #2300. The reason why check-icon was disappearing were scale-switch styles. In switch component shadow is put to false, I guess there was some reason?
image

Anyway I don't touch it, but just add extra selector in css (see changes).

Also within whis PR I've fixed disappearing borders for checkbox in high contrast mode, 'cause box-shadow borders are not visible in HC. So I just put extra blocks of css for HC mode with normal borders. Design for disabled end error checkboxes should be discussed and implemented extra, but functionally they are ok now.

Also I've added checkbox template to html folder, I hope it's ok.

I'm wainitg for your feedback! Have a nice weekend)

@tshimber
Copy link
Contributor Author

tshimber commented Jun 7, 2024

Before:
image

After:
image

maomaoZH
maomaoZH approved these changes Jun 10, 2024
View reviewed changes
Copy link
Collaborator

@maomaoZH maomaoZH left a comment

Choose a reason for hiding this comment

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

@tshimber Thanks for the PR. LGTM. Yeah, the switch along with other input type is set shadow dom off by purpose so that the developers can access the elements easily.

@tshimber
Copy link
Contributor Author

@tshimber Thanks for the PR. LGTM. Yeah, the switch along with other input type is set shadow dom off by purpose so that the developers can access the elements easily.

thank you!

@tshimber
Copy link
Contributor Author

tshimber commented Jul 4, 2024

@maomaoZH @acstll @felix-ico
hi, guys! could you please tell, what are next steps by PRs? seems that it should be approved by all reviewers, correct? should i do smth from my side?
my team is asking me to clarify:)

@amir-ba amir-ba added the accessibility Related to accessibility label Aug 20, 2024
@tshimber tshimber force-pushed the feature-checkbox-in-high-contrast-mode branch 2 times, most recently from 8786cf6 to 10dbaa7 Compare August 28, 2024 10:37
@tshimber tshimber force-pushed the feature-checkbox-in-high-contrast-mode branch from 10dbaa7 to 4b8b0ff Compare August 28, 2024 10:39
@amir-ba amir-ba merged commit 318df56 into telekom:main Aug 29, 2024
12 checks passed
amir-ba added a commit that referenced this pull request Sep 19, 2024
@amir-ba @tshimber
Merge branch 'main' into release (#2355)
942c406 
* ci: sets up docker compose alias for compatibility (#2342)

* fix: dropdown scroll fixed (#2333)

* chip accessibility fix (#2332)

* feat: chip keyboard handling fixed

* feat: chip html added

* fix: snapshot updated

* fix: focus issues fixed

* fix: readme fix

* checkbox and switch css fixes for high contrast mode (#2317)

fix: checkbox and switch CSS fixes for high contrast mode

* ghost btn in storybook  (#2341)

* fix: ghost btn in storybook fixed

* fix: one more ghost fixed

* event part in storybook fixed (#2345)

* fix: event part in storybook fixed

* fix: german versions fixed

* aria details vs aria describedby fixed for text field (#2352)

* refactor: aria details vs aria describedby fixed for text field

* fix: reverted to ariaDetailedId + description added to storybook

* chore(release): publish (#2354)

* chore(release): publish

---------

Co-authored-by: tshimber <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@maomaoZH maomaoZH maomaoZH approved these changes

@acstll acstll Awaiting requested review from acstll

@felix-ico felix-ico Awaiting requested review from felix-ico

Assignees
No one assigned
Labels
accessibility Related to accessibility
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Check icon is not visible in Windows High Contrast Mode
3 participants
@tshimber @maomaoZH @amir-ba