w3c / wcag

Web Content Accessibility Guidelines
https://w3c.github.io/wcag/guidelines/22/
Other
1.14k stars 256 forks source link

Understanding pages in Firefox 130: Links to definitions within Key Terms do not work when the section is collapsed #4086

Closed rianrietveld closed 2 months ago

rianrietveld commented 2 months ago

Update September 24, 2024: I discovered that on all Understanding pages the links to the definitions are broken. Not sure if there is already an issue about this.

In the pages Understanding SC 2.3.1 for WCAG 2.1 and and WCAG 2.2 the internal link to the definition of "general flash and red flash thresholds" is broken.

https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html#dfn-general-flash-and-red-flash-thresholds

In the page Understanding SC 2.3.1 for WCAG 2.0 this internal link is: https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html#general-thresholddef and it leads to the text of the definition.

Should this link to 2.1: https://www.w3.org/TR/WCAG21/#dfn-general-flash-and-red-flash-thresholds 2.2: https://www.w3.org/TR/WCAG22/#dfn-general-flash-and-red-flash-thresholds

rianrietveld commented 2 months ago

I discovered that on all Understanding pages the links to the definitions are broken. Not sure if there is already an issue about this.

kfranqueiro commented 2 months ago

Hi @rianrietveld, I'd like to clarify to make sure I'm testing the same thing you're describing.

Are you saying that, for example, the links to "web pages", "flash", and "general flash and red flash thresholds" within the Success Criterion box do not navigate anywhere when you activate them?

These links work for me both on the 2.1 and 2.2 docs, in Firefox (115, 128, 129 across OS X / Linux), Chrome (Vivaldi 6.9 on OS X and Linux), and Safari (tested 16.5). For example, this is where the first link in your issue description brings me to:

screenshot of the beginning of the "general flash and red flash thresholds" definition under Key Terms, with the dt element focused

It's worth noting that these link to positions within an initially-collapsed section, and I wonder if that could be contributing to the problem? Could you let me know what browser you're seeing this in, and potentially test other browsers you have access to, in order to check whether the same thing happens?

patrickhlauke commented 2 months ago

@kfranqueiro I just tried in Firefox (I usually go with Chrome, where these work fine), and indeed FX seems to have trouble with these in-page links when they're hidden behind the collapsed section.

EDIT: confirming it was Firefox 130.01 on macOS

kfranqueiro commented 2 months ago

I managed to update one of my Firefox browsers to 130 and that seems to be where the issue lies; seems like it could be a browser-side regression involving links jumping to within collapsed details elements. Will have to dig to find out if anything's already reported - or if it's some shift in interaction with an existing script.

Update: The underlying issue seems to be that Firefox 130 does not collapse elements within unopened details to 0 width/height, which fools the existing logic in openHiddenNodes() in main.js.

rianrietveld commented 2 months ago

Oh, yes! That's the issue! I use Firefox 130.0.1 (64-bit) on Mac Sonoma 14.5 Thanks for finding the issue! I tried to search for the link on the page and could't find it. And didn't open Key Terms because I was looking for definitions 🙄. Anyhow: the link doesn't work in FF when the dialog is closed, I can confirm that 😄

kfranqueiro commented 2 months ago

I created a PR last week on the repo responsible for the expand/collapse component used in the Understanding docs, and that has been merged and deployed today, so this should now be resolved. I just re-tested using the first link in this issue's description, and it now works in Firefox 130.

If anyone else still runs into this, first try a hard refresh (Ctrl/Cmd+Shift+R), and if the problem still seems to persist, let me know.

rianrietveld commented 2 months ago

@kfranqueiro thank you.