Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions core/src/utils/overlays.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
removeEventListener,
} from './helpers';
import { printIonWarning } from './logging';
import { isPlatform } from './platform';

let lastOverlayIndex = 0;
let lastId = 0;
Expand Down Expand Up @@ -973,18 +974,26 @@ export const createTriggerController = () => {
* If the overlay is being presented, it prevents focus rings from appearing
* in incorrect positions due to the transition (specifically `transform`
* styles), ensuring that when aria-hidden is removed, the focus rings are
* correctly displayed in the final location of the elements.
* correctly displayed in the final location of the elements. This only
* applies to Android devices.
*
* If this solution is applied to iOS devices, then it leads to a bug where
* the overlays cannot be accessed by screen readers. This is due to
* VoiceOver not being able to update the accessibility tree when the
* `aria-hidden` is removed.
*
* @param overlay - The overlay that is being animated.
*/
const hideAnimatingOverlayFromScreenReaders = (overlay: HTMLIonOverlayElement) => {
if (doc === undefined) return;

/**
* Once the animation is complete, this attribute will be removed.
* This is done at the end of the `present` method.
*/
overlay.setAttribute('aria-hidden', 'true');
if (isPlatform('android')) {
/**
* Once the animation is complete, this attribute will be removed.
* This is done at the end of the `present` method.
*/
overlay.setAttribute('aria-hidden', 'true');
}
};

/**
Expand Down
Loading