Hi guys,

I've came up the following issue recently while trying implement accessibility features for iOS voice over screen reader.

I've had to correct two issues when the screen reader was active:

1. when closing the modal popup the expected behaviour should be going back to the area/element (in this case addToAny buttons), instead it send the user on the top/bottom of the page depending on the direction that the user will virtually scroll
2. modal popup doesn't retain focus so it scrolls to the top/bottom of the page behind the modal popup, the expected behaviour should be letting the user scrolling just through the window that is presented on the front

The code that worked for me is the following, I had to tweak and edit using javascript what the "default" addToAny src is sending to the site.

\\keeps the focus inside the modal popup
var a2a_modal = document.getElementById('a2a_modal');
var a2apage_full = document.getElementById('a2apage_full');
a2apage_full.setAttribute('style', 'visibility:hidden');
$('.a2a_dd').on('click', function () {
var page_wrapper = document.getElementsByClassName('page-wrapper');
jQuery(page_wrapper).attr('aria-hidden', 'true');
a2apage_full.style.setProperty('visibility','visible');
a2a_modal.setAttribute('style', 'visibility:visible');
});
$('.close-a2a-modal').on('click', function (){
var page_wrapper = document.getElementsByClassName('page-wrapper');
jQuery(page_wrapper).attr('aria-hidden', 'false');
a2apage_full.style.setProperty('visibility','hidden');
a2a_modal.setAttribute('style', 'visibility:hidden');
});

For future references, the European union is getting all the state members to comply with some rules by September 2020. So, I'm wondering if this should be fixed and included within the module itself.

Comments

gcern created an issue. See original summary.

apaderno’s picture

Assigned: gcerni » Unassigned
Issue tags: -voiceover, -screenreader, -iphone, -compatibility, -modal, -drupal7