diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index 8aaaad0503..25a6597d1a 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -32,6 +32,7 @@ import { removeEventListener, } from './helpers'; import { printIonWarning } from './logging'; +import { isPlatform } from './platform'; let lastOverlayIndex = 0; let lastId = 0; @@ -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'); + } }; /**