Skip to content

Commit

Permalink
feat: iframe accessibility
Browse files Browse the repository at this point in the history
This change udpates the iframe-common script to set several
important attributes for screen reader's to properly interpret the
presence of the iframe.

The attributes do the following things:
* ariaBusy (aria-busy): notifies the screen reader that the iframe is loading
* role=document: tells screen readers to treat the frame contents as a document
* aria-live=assertive: tells screen readers to immediately read the
  frame content
* tabindex=0: tabindex is required on document roles to ensure that it is
  treated as keyboard accessible

J=TECHOPS-10193
TEST=manual

Manually tested using both Mac VoiceOver and Windows Narrator and validated
that the results were read by the screen reader.
  • Loading branch information
benmcginnis committed Oct 23, 2023
1 parent 6a472ed commit 797d534
Showing 1 changed file with 11 additions and 4 deletions.
15 changes: 11 additions & 4 deletions static/js/iframe-common.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const iframeMessageQueue = [];

/**
* Puts an iframe on the page of an Answers experience and sets up resizing and cross-domain communication
*
*
* @param {string} domain The location of the answers experience
* @param {AnswersExperienceFrame} answersExperienceFrame
*/
Expand Down Expand Up @@ -65,7 +65,7 @@ export function generateIFrame(domain, answersExperienceFrame) {
iframeUrl += '?' + new_params.join('&');
return iframeUrl;
};

iframe.src = calcFrameSrc();
iframe.frameBorder = 0;

Expand All @@ -74,8 +74,15 @@ export function generateIFrame(domain, answersExperienceFrame) {
iframe.style.minWidth = '100%';
iframe.id = 'answers-frame';

// for screen reader accessibility
iframe.ariaBusy = "true";
iframe.setAttribute('role', 'document');
iframe.setAttribute('aria-live', 'assertive');
iframe.setAttribute('tabindex', "0");

// Scroll to the top of the page when the iframe loads or a link is clicked.
iframe.addEventListener('load', () => {
iframe.ariaBusy = "false";
document.documentElement.scrollTop = 0;
// For Safari
document.body.scrollTop = 0;
Expand Down Expand Up @@ -136,7 +143,7 @@ function registerPopStateListener() {

/**
* Reloads the iframe with a recalculated src URL.
* Does not reload the iframe if the URL has only changed its hash param.
* Does not reload the iframe if the URL has only changed its hash param.
*/
function popStateListener() {
/** @param {string} url */
Expand All @@ -154,7 +161,7 @@ function registerPopStateListener() {
/**
* Sends data to the answers iframe if possible. Otherwise the message is queued
* so that it can be sent when the iframe initializes.
* @param {Object} obj
* @param {Object} obj
*/
export function sendToIframe (obj) {
const iframe = document.querySelector('#answers-frame');
Expand Down

0 comments on commit 797d534

Please sign in to comment.