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

examples.js: Source code syntax highlighter bug creates color problem in HTML source display for date picker combobox example #2815

Closed
giacomo-petri opened this issue Sep 29, 2023 · 4 comments
Labels
bug Code defects; not for inaccurate prose help wanted Task force is looking for an owner for the issue Infrastructure Related to maintaining task force and repo operations, processes, systems, documentation

Comments

@giacomo-petri
Copy link
Contributor

giacomo-petri commented Sep 29, 2023

In Date Picker Combobox Example the HTML source code is not properly formatted, causing a color contrast issue for green text over light grey background, as per attachment.

screenshot highlighting insufficient contrast ratio
@giacomo-petri giacomo-petri added bug Code defects; not for inaccurate prose editorial Changes to prose that don't alter intended meaning, e.g., phrasing, grammar. May fix inaccuracies. labels Sep 29, 2023
@giacomo-petri
Copy link
Contributor Author

Same happens for the Example Disclosure Navigation Menu with Top-Level Links example: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/

screenshot highlighting insufficient contrast ratio

@mcking65 mcking65 added Site Design Related to design of the APG site on w3.org built during 2021 redesign project agenda Include in upcoming Authoring Practices Task Force meeting and removed editorial Changes to prose that don't alter intended meaning, e.g., phrasing, grammar. May fix inaccuracies. labels Oct 18, 2023
@a11ydoer
Copy link
Contributor

a11ydoer commented Oct 24, 2023

It shows as light green color because span class <span class="hljs-regexp">/div</span> was applied to this tag.
This span class came from the directory of "conetn-assets/wai-aria-practice/shared/ css folder" and the file is github.css
color hex code is #009926

@mcking65 mcking65 changed the title Date Picker Combobox Example - HTML source code example has wrong contrast ratio examples.js: Source code syntax highlighter bug creates color problem in HTML source display for date picker combobox example Oct 24, 2023
@mcking65 mcking65 added Infrastructure Related to maintaining task force and repo operations, processes, systems, documentation help wanted Task force is looking for an owner for the issue and removed agenda Include in upcoming Authoring Practices Task Force meeting Site Design Related to design of the APG site on w3.org built during 2021 redesign project labels Oct 24, 2023
@css-meeting-bot
Copy link
Member

The ARIA Authoring Practices (APG) Task Force just discussed Issue 2815 - Color contrast problem in source code section of example pages.

The full IRC log of that discussion <jugglinmike> Topic: Issue 2815 - Color contrast problem in source code section of example pages
<jugglinmike> github: https://github.com//issues/2815
<jugglinmike> Matt_King: This has screen shots describing the color contrast in the source code
<jugglinmike> Jem: the reporter is saying that the use of green/red will be a problem for some folks
<jugglinmike> Matt_King: Does this pass WCAG?
<jugglinmike> Jem: I can check if the contrast is technically an accessibility issue
<jugglinmike> Jem: Regardless of contrast and colors, though, it just doesn't look consistent
<jugglinmike> Matt_King: Based soley on what's written, it sounds like a contrast issue--not a green-red color issue
<jugglinmike> jugglinmike: the syntax hilighter is malfunctioning. It's highlighting the code in a way that doesn't make logical sense
<jugglinmike> [the group investigates the syntax highlighting behavior]
<jugglinmike> Jem: I'll leave a comment with some additional information about the problem
<jugglinmike> Matt_King: I'll modify the title so the problem is a little more clear
<jugglinmike> Matt_King: This doesn't effect every example page, right? Just some of them.
<jugglinmike> Jem: That's right
<jugglinmike> Matt_King: Okay, I think we have good documentation, now, and we have a path forward

mcking65 pushed a commit that referenced this issue Apr 7, 2024
#2939)

Fixes  syntax highlighting bug in the HTML source display on example pages (issue #2815):

* Update highlightjs to latest version and replace references to highlight.pack.js
* Rename highlight.min.js to highlight.pack.js
* Updating init script highlight js
* Replace break element with new line
@mcking65 mcking65 added this to the H1/2024 APG Improvements milestone Apr 7, 2024
@mcking65
Copy link
Contributor

mcking65 commented Apr 7, 2024

Resolved by #2939.

@giacomo-petri, thank you for raising this issue. The fix will go live in production on April 9.

@mcking65 mcking65 closed this as completed Apr 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Code defects; not for inaccurate prose help wanted Task force is looking for an owner for the issue Infrastructure Related to maintaining task force and repo operations, processes, systems, documentation
Projects
None yet
Development

No branches or pull requests

4 participants