Accessibility: add title attribute to story iframe
-
Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA. As a benefit of being a GitLab Community Contributor, you receive complimentary access to GitLab Duo.
Resolves #1997 (closed)
Description
This PR adds a title attribute to each story iframe element so that assistive tech (screenreaders, etc) can read out a description of the frame when someone navigates to it. This follows the WCAG 2.2 recommendation for iframe descriptions (see #1997 (closed) for more information).
I chose to reuse the computed CardTitle to populate the iframe's title because it would be the minimal change necessary to satisfy this accessibility criteria, but please let me know if you disagree. Thank you!
Summary of changes
- Add
titleprop tostory_iframecomponent & pass totitleattribute on theiframeelement. - In
story_viewer, pass computedCardTitletotitleprop onstory_framecomponents - Add a
story_viewertest to ensure that the story title matches the renderedtitleattribute on iframe elements. For this test specifically, I added an optional prop tocreateComponent()to allow a fullmountinstead of justshallowMount, as I needed to access the childstory_iframecomponent in order to test the renderedtitleattribute.
Edited by 🤖 GitLab Bot 🤖