Switch example using HTML button clashes with website CSS

[yatil]

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.

[yatil]

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]

Hello? Is someone maintaining this repository?

[mcking65]

@yatil

APG TF meets tomorrow. would help to know which text is white on white.

[yatil]

The example. The switches on the page. Both text and the switches under the "Environmenal Controls" heading are somehow white on the white background.

[css-meeting-bot]

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//issues/2474
<W3C> https://github.com//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

[yatil]

Just looking at the discussion. You can just prefix your button with a class and override the template code.

[mcking65]

The fix for this is planned to go live this Thursday.