8000 Check Mark is not visible inside the checkbox in the users section of the Admin in Windows High Contrast Mode · Issue #8334 · wagtail/wagtail · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Check Mark is not visible inside the checkbox in the users section of the Admin in Windows High Contrast Mode #8334

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
Closed
anujaraj opened this issue Apr 12, 2022 · 10 comments · Fixed by #8718
Closed

Check Mark is not visible inside the checkbox in the users section of the Admin in Windows High Contrast Mode #8334

anujaraj opened this issue Apr 12, 2022 · 10 comments · Fixed by #8718
Assignees
@anujaraj
Labels
Accessibility component:Bulk Actions type:Bug
Milestone
4.0

Comments

@anujaraj
Copy link
Contributor

Issue Summary

On the Admin Interface of the Wagtail website with the url point - /admin/users. While we click on the checkbox near the user details one can find a check mark in the checkbox, as attached below in the screenshot
Screenshot (274)

While on using the Windows High contrast mode the check box doesnt appear as shown in the screenshot
Screenshot (273)

Steps to Reproduce

  1. Go to the wagtail admin and click on setting and the click on users
  2. When you hover on the extreme left of the user details you will be able to click on the box to get it checked
  3. Now turn on the Windows High Contrast mode
  4. The checkbox will not have a visible checkmark

Technical details

  • Python version: 3.10.4
  • Django version: 4.0.3
  • Wagtail version: 3.0a0

Related PR

#7573 Bulk action
#7605 Fix checkboxes appearing always checked in Windows high contrast mode
@anujaraj anujaraj added status:Unconfirmed Issue, usually a bug, that has not yet been validated as a confirmed problem. type:Bug labels Apr 12, 2022
@anujaraj
Copy link
Contributor Author
anujaraj commented Apr 14, 2022 •
edited
Loading

Hello,
My idea to tackle the problem is that

  1. I am trying to add a border to the svg image of the checkbox that can allow the border to be visible after the high contrast mode.
    @thibaudcolas and @lb- if you can help me as to how can i add the border to : -webkit-mask-image:url() [the property is taken from admin/static/wagtailadmin/css/core.css]

@lb-
Copy link
Member
lb- commented Apr 18, 2022

@anujaraj what if we did something like

    @media (forced-colors: $media-forced-colours) {
      .checkbox-or-whatever {
        forced-color-adjust: none;

Then adjusted the colors manually as needed. Similar to how it is done in client/scss/components/_help-block.scss

My guess is you will need to do this in client/scss/components/_bulk_actions.scss - but that assumes it is a bulk actions issue only.

@anujaraj
Copy link
Contributor Author

Oh, that would have to be worked on client/scss/components/_bulk_actions.scss,
So then if it's a part of the bulk actions issue how should I proceed with working on it? Should I close this issue and then suggest these changes on the bulk action issue chat?

@lb-
Copy link
Member
lb- commented Apr 18, 2022

no need to close this bug, and my suggestion may not be the right place, just guessing based on the screenshot.
Keep trying to find a fix and then we can see how we go with that.

@anujaraj
Copy link
Contributor Author

Yes, so I think this particular checkbox element is in core.css. It has a svg that has a check mark which is called perfectly on clicking while in normal mode yet in windows high Contrast it doesn't work. Possible solutions I have tried

  1. using @media forced-color : the issue I am facing is that I am unable to find the exact element in which I should incorporate the property
  2. changing the svg according to the Contrast Mode. eg making a border that is in a color visible in contrast mode. I have tried using border color over svg yet I haven't reached any specific conclusion

@lb-
Copy link
Member
lb- commented May 5, 2022

@anujaraj let's get to the bottom of this.

  • When you say core.css do you mean this file client/scss/core.scss or do mean the bundled core.css (not scss).
  • Can you provide any screenshots of what you have tried, even in the browser tools?
  • From my digging, it looks like this could be a global checkbox styling issue and needs to be fixed in client/scss/elements/_forms.scss - can you confirm? Are you able to do local development where you change this file and then refresh your browser to see changes (via npm run watch)?
input[type='checkbox']:checked:before {
  background: $color-teal;
  mask-image: url('#{$images-root}icons/tick.svg');
  mask-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
  top: 2px;
  // Remove once we drop support for Safari 13.
  // stylelint-disable-next-line property-disallowed-list
  left: 2px;
  inset-inline-start: 2px;
}

@anujaraj
Copy link
Contributor Author
anujaraj commented May 5, 2022 •
edited
Loading

@lb-
I have inspected the checkbox and I think its inside core.css (the main one):

input[type=checkbox]:before {
    font-family: wagtail;
    font-style: normal;
    text-align: center;
    position: absolute;
    top: -5px;
    cursor: pointer;
    display: block;
    content: "";
    line-height: 20px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    color: hsl(180.4761904762,100%,24.7058823529%);
    color: var(--color-primary);
}

I have tried making changes in the client/scss/core.scss, yet I didn't see any changes on the browser.
I am attaching screenshot-this shows the exact location that I think is responsible for the checkbox inside core.css and the other. Just to see if providing a gradient would work, I used https://www.w3schools.com/css/tryit.asp?filename=trycss3_mask-image2 to see if the SVG of the checkbox can have some gradient and then would help it to be visible over high contrast but it ended up making the entire box a cyan-colored gradient. That's how I realized its inside core.css.
Screenshot (289)

Yet I feel if we can provide a border to the SVG checkbox that will allow a contrast color border visible in Windows High Contrast Mode, could be useful It shall be visible in windows with high contrast.

@lb-
Copy link
Member
lb- commented May 11, 2022

@anujaraj it looks like you may not have your local dev running correctly.

You should be able to run npm start then make a change in any .scss file, refresh the admin you are running and then see the change.

Are you able to get to that stage? if not - you may need to reach out on the Slack channel in #support to get some help with developing this solution.

@anujaraj
Copy link
Contributor Author

@lb- I am sorry, I think I missed a few steps to see my changes. Thank you for pointing them. I shall definitely seek help at support incase if needed. I think it should work with scss

@janehughes janehughes moved this from Todo to In Progress in Contrast Themes 🥷 Jun 13, 2022
@anujaraj
Copy link
Contributor Author

I have committed changes with the following pull request - #8677

@lb- lb- mentioned this issue Jun 14, 2022
Closed
8 tasks
@anujaraj anujaraj moved this from In Progress to Added PR in Contrast Themes 🥷 Jun 15, 2022
@anujaraj anujaraj mentioned this issue Jun 21, 2022
Merged
7 tasks
jaap3 pushed a commit to leukeleu/wagtail that referenced this issue Jul 7, 2022
Fixed wagtail#8334 -- ExcelDateFormatter generates invalid format str…
bbfedf9 
…ings

The format strings generated previously would not work correctly in macOs Preview and Numbers
@thibaudcolas thibaudcolas removed the status:Unconfirmed Issue, usually a bug, that has not yet been validated as a confirmed problem. label Jul 9, 2022
@thibaudcolas thibaudcolas added this to the 4.0 milestone Jul 9, 2022
Repository owner moved this from Added PR 📩 to Done ✅ in Contrast Themes 🥷 Jul 10, 2022
thibaudcolas added a commit that referenced this issue Jul 10, 2022
@anujaraj @thibaudcolas
Make checkboxes visible in forced colors mode. Fix #8334 (#8718)
3cb9b70 
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
@thibaudcolas thibaudcolas mentioned this issue May 8, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@anujaraj anujaraj

Labels
Accessibility component:Bulk Actions type:Bug
Projects
WCAG 2.2 & ATAG 2.0
Status: No status
Contrast Themes 🥷
Status: ✅ Done
Milestone
4.0
3 participants
@thibaudcolas @lb- @anujaraj
0