LG-8894: Describe personal key example for assistive technology#7965
LG-8894: Describe personal key example for assistive technology#7965
Conversation
changelog: User-Facing Improvements, Accessibility, Improve personal key example description for assistive technology
| </p> | ||
|
|
||
| <div class="scale-down"> | ||
| <figure class="margin-0 scale-down" aria-label="<%= t('users.personal_key.accessible_labels.preview') %>"> |
There was a problem hiding this comment.
Not within the scope of this ticket, but if this were to be made a <figure> element, would it make sense for the personal key partial to be made into a <figcaption> element instead of a typical <div>?
There was a problem hiding this comment.
I was on the fence about making this change. Visually, it's meant to look like a sort of embedded preview example, and I thought it'd be useful to indicate that somehow rather than just skipping straight to the first bit of content in the preview. I think including a <figcaption> could make sense if the visible preview had some sort of caption. In this implementation, the aria-label serves the purpose captioning the figure, and the personal key partial is the contents of the figure example preview.
zachmargolis
left a comment
zachmargolis
left a comment
There was a problem hiding this comment.
LGTM, is it worth adding any view specs taht check for aria-hidden or something?
nickttng
left a comment
nickttng
left a comment
There was a problem hiding this comment.
This improvement looks good to me
Yeah 👍 Updated specs in 98e0fc6 |
* LG-8894: Describe personal key example for assistive technology changelog: User-Facing Improvements, Accessibility, Improve personal key example description for assistive technology * Update personal key specs to test for code example
* LG-8894: Describe personal key example for assistive technology changelog: User-Facing Improvements, Accessibility, Improve personal key example description for assistive technology * Update personal key specs to test for code example
4 participants
🎫 Ticket
LG-8894
🛠 Summary of changes
Adds a non-visible text element describing the personal key example shown with placeholder characters, so that a user can understand what is being shown is an example personal key, instead of having "X" announced 16 times.
📜 Testing Plan
👀 Screenshots
Before:
lg-8894-before.mov
After:
lg-8894-after.mov