aria-practices
aria-practices copied to clipboard
w3c
Switch example using HTML button clashes with website CSS
The example on this page shows white text on white background: https://www.w3.org/WAI/ARIA/apg/example-index/switch/switch-button.html
Make sure that your examples are properly encapsulated and use higher specificity.
FWIW, I attempted to use the fork and edit functionality on the page and as these pages use HTML instead of the WAI markdown templates, I did not feel confident to make changes. It also looked like it referenced external files and I was not willing to dig through the repository.
@yatil
APG TF meets tomorrow. would help to know which text is white on white.
The example. The switches on the page. Both text and the switches under the "Environmenal Controls" heading are somehow white on the white background.
The ARIA Authoring Practices (APG) Task Force just discussed Switch example using HTML button clashes with website CSS.
The full IRC log of that discussion
<Matt_King> TOPIC: Switch example using HTML button clashes with website CSS<Matt_King> github: https://github.com/w3c/aria-practices/issues/2474
<W3C> https://github.com/w3c/aria-practices/issues/2474
<W3C> The CSS for this example is white on white
<W3C> MK his is a real bug
<W3C> JG: I can look at this one
<W3C> MK: If you fix it on the main branch
<W3C> JG: I am not sure
<W3C> Alex: Example example clashes with the theme style
<W3C> JG: We are using the button element, and that is the issue
<jamesn> .button, button {
<jamesn> border-radius: 5px;
<jamesn> display: inline-block;
<jamesn> display: -ms-inline-flexbox;
<jamesn> display: inline-flex;
<jamesn> -ms-flex-align: center;
<jamesn> align-items: center;
<jamesn> -ms-flex-pack: center;
<jamesn> justify-content: center;
<jamesn> padding: 8px 12px;
<jamesn> border: 2px solid #005a6a;
<jamesn> border: 2px solid var(--wai-green);
<jamesn> font-size: 13px;
<jamesn> font-size: .8125rem;
<jamesn> line-height: 1.4;
<jamesn> background-color: #005a6a;
<jamesn> background-color: var(--wai-green);
<jamesn> text-decoration: none;
<jamesn> font-weight: 700;
<jamesn> }
<W3C> JN: There is a button.css file
<W3C> MK: We are requesting a template change?
<W3C> MK: What are the CSS practices to fix this problem
<W3C> Alex: I have looked into a number of ways, including using custom elements
<W3C> JN: Can we request a change the selector to include only buttons without a role
<W3C> MK: Is it possible to create selectors that exclude sections
<W3C> Seth: We could ask them to include a class, but then that would have to add the class to the templase
<W3C> JN: We should look at selectors that are not using class
<W3C> Alex: There are techniques, but would require changing alot of our CSS
<W3C> JG: I am worried that there might get into a loop on changes
<W3C> MK: We are working closely with the template team
<W3C> MK: If the template doesn't change
<W3C> JN: There maybe other things broken with the example
<W3C> MK: If there are ways we can make sure our examples are not changing
<W3C> JG: We may want a reset style for an ID selector
<W3C> JN: A reset style sheet maybe a good idea
<W3C> Alex: There style sheet is responsive
<W3C> JN: Where the examples are, just have links to code pen
<W3C> MK: We need to fix them
<W3C> JG: We can work off main?
<W3C> MK: Yes
<W3C> rrsagent, draft minutes
<RRSAgent> I have made the request to generate https://www.w3.org/2022/09/20-aria-apg-minutes.html W3C
Just looking at the discussion. You can just prefix your button with a class and override the template code.