Accessibility: add title attribute to story iframe

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 title prop to story_iframe component & pass to title attribute on the iframe element.
  • In story_viewer, pass computed CardTitle to title prop on story_frame components
  • Add a story_viewer test to ensure that the story title matches the rendered title attribute on iframe elements. For this test specifically, I added an optional prop to createComponent() to allow a full mount instead of just shallowMount, as I needed to access the child story_iframe component in order to test the rendered title attribute.
Edited by 🤖 GitLab Bot 🤖

Merge request reports

Loading