search

Shopify / dawn

Shopify's first source available reference theme, with Online Store 2.0 features and performance built-in.
Other
2.53k stars 3.42k forks source link

[Card product] - `aria-labelledby` referencing element that sometimes doesnt exist #2097

Open sofiamatulis opened 2 years ago

sofiamatulis commented 2 years ago

Describe the current behavior

In the card product.liquid file - aria-labelledby is referencing element that sometimes doesnt exist.

https://github.com/Shopify/dawn/commit/b10202cf32cb930607de4b0611cdde8d2bb24b29#diff-167fc70beb2d8c5dbf3e81a213fd3808f6b2e1d1c60590a6863724dc0dca3ea6R147

It references 2 elements: CardLink-{{ section_id }}-{{ card_product.id }} which we have here and Badge-{{ section_id }}-{{ card_product.id }} which we have here

It looks like the 2nd one is under an if statement which sometimes may not be true https://screenshot.click/03-37-zv2j7-6znsm.png so it doesnt render.

Describe the expected behavior There should be an if statement in the aria-labelledby to only render when the element exists

mathildebuenerd commented 2 years ago

Theoretically an invalid id should be ignored when the id reference is computed:

user agents SHOULD ignore ID references that do not match the ID of another element in the same document.

Source: https://w3c.github.io/aria/#mapping_additional_relations_error_processing

So my guess is that there should be no real accessibility issue of having an invalid id. I haven't tested with assistive technology though. The bug was reported by an accessibility checker, I think that unless we see an actual consequence for merchants we should not address it or give it a low priority