Fix cart image link accessibility pattern#623
Conversation
| <tr class="cart-item" id="CartItem-{{ item.index | plus: 1 }}"> | ||
| <td class="cart-item__media"> | ||
| {% if item.image %} | ||
| <a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a> |
There was a problem hiding this comment.
Since <a> is empty can we just do this instead?
| <a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a> | |
| <a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> |
There was a problem hiding this comment.
This results in invalid HTML. Any element with an opening tag must be accompanied by a closing tag (with the exception of elements which do not feature a text node such as input, img, br, etc.
There was a problem hiding this comment.
You are right, thank you. I knew with HTML5 more tags could be self-closing and assumed this was the case for a too. I confused it with how now you can do <br> instead of <br/>
Can we remove the extra space?
| <a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a> | |
| <a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"></a> |
There was a problem hiding this comment.
Originally, I removed the extra space, but due to the a:empty display: none rule, it gets overwritten.
If I remove the empty space, most likely I will have to write a more specific CSS rules.
What are your thoughts?
There was a problem hiding this comment.
Oh you are right! Then I think we can leave it as is since that makes sense 👍
And the decision/reason for it is documented here in case we need to come back to it
3baf83e
* Add space to avoid the CSS :empty display none rule * move link inside the condition only if media exist * Add comment
Why are these changes introduced?
Related PR: #605
The goal of this PR is the same as #605 , except that we want users to be able to right click to open a new tab. Currently, we use JS to trigger the link so it's not possible
What approach did you take?
Followed Scott's approach:
<a>tag, and use position absolute to take full spacearia-hiddenandtabindex=-1so assistive technology can't detect the link, but only the image.Demo links
Checklist