fix(menu): hide from screen readers while animating (#30036)

Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> When the menu is presented on an Android device, TalkBack's focus rings may appear in the wrong position due to the transition (specifically `transform` styles). This occurs because the focus rings are initially displayed at the starting position of the elements before the transition begins. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - When an overlay is being animated (presenting or dismissing), the overlay will hide from screen readers. This allows Talkback to display the focus rings on the correct position. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `8.4.1-dev.11732305980.19d90e1c` Related to #29951

Author: thetaPC

core/src/components/menu/menu.tsx

@@ -8,6 +8,7 @@ import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers';
 import { menuController } from '@utils/menu-controller';
 import { BACKDROP, GESTURE, getPresentedOverlay } from '@utils/overlays';
+import { isPlatform } from '@utils/platform';
 import { hostContext } from '@utils/theme';
 
 import { config } from '../../global/config';
@@ -631,6 +632,23 @@ export class Menu implements ComponentInterface, MenuI {
  private beforeAnimation(shouldOpen: boolean, role?: string) {
  assert(!this.isAnimating, '_before() should not be called while animating');
 
+ /**
+ * When the menu is presented on an Android device, TalkBack's focus rings
+ * may appear in the wrong position due to the transition (specifically
+ * `transform` styles). This occurs because the focus rings are initially
+ * displayed at the starting position of the elements before the transition
+ * begins. This workaround ensures the focus rings do not appear in the
+ * incorrect location.
+ *
+ * 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.
+ */
+ if (isPlatform('android')) {
+ this.el.setAttribute('aria-hidden', 'true');
+ }
+
  // this places the menu into the correct location before it animates in
  // this css class doesn't actually kick off any animations
  this.el.classList.add(SHOW_MENU);
@@ -687,6 +705,17 @@ export class Menu implements ComponentInterface, MenuI {
  }
 
  if (isOpen) {
+ /**
+ * When the menu is presented on an Android device, TalkBack's focus rings
+ * may appear in the wrong position due to the transition (specifically
+ * `transform` styles). The menu is hidden from screen readers during the
+ * transition to prevent this. Once the transition is complete, the menu
+ * is shown again.
+ */
+ if (isPlatform('android')) {
+ this.el.removeAttribute('aria-hidden');
+ }
+
  // emit open event
  this.ionDidOpen.emit();
 
@@ -703,6 +732,8 @@ export class Menu implements ComponentInterface, MenuI {
  // start focus trapping
  document.addEventListener('focus', this.handleFocus, true);
  } else {
+ this.el.removeAttribute('aria-hidden');
+
  // remove css classes and unhide content from screen readers
  this.el.classList.remove(SHOW_MENU);
 

core/src/utils/overlays.ts

@@ -971,11 +971,12 @@ export const createTriggerController = () => {
  * like TalkBack do not announce or interact with the content until the
  * animation is complete, avoiding confusion for users.
  *
- * 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. This only
- * applies to Android devices.
+ * When the overlay is presented on an Android device, TalkBack's focus rings
+ * may appear in the wrong position due to the transition (specifically
+ * `transform` styles). This occurs because the focus rings are initially
+ * displayed at the starting position of the elements before the transition
+ * begins. This workaround ensures the focus rings do not appear in the
+ * incorrect location.
  *
  * 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