Repository: ionic-team/ionic-framework
File: core/src/components/menu/menu.tsx (TypeScript)

Code before:

    if (isOpen) {
      // add css class and hide content behind menu from screen readers
      if (this.contentEl) {
        this.contentEl.classList.add(MENU_CONTENT_OPEN);

        /**
         * When the menu is open and overlaying the main
         * content, the main content should not be announced
         * by the screenreader as the menu is the main
         * focus. This is useful with screenreaders that have
         * "read from top" gestures that read the entire
         * page from top to bottom when activated.
         */
        this.contentEl.setAttribute('aria-hidden', 'true');
      }

      // emit open event
      this.ionDidOpen.emit();

      /**
       * Set up focus trapping. Focus the host element to start with
       * instead of the first descendant to avoid the scroll position
       * jumping to that element right away.
       */
      this.el.focus();
      document.addEventListener('focus', this.handleFocus, true);
    } else {
      // remove css classes and unhide content from screen readers
      this.el.classList.remove(SHOW_MENU);

      /**
       * Remove tabindex from the menu component
       * so that is cannot be tabbed to.
       */
      this.el.removeAttribute('tabindex');
      if (this.contentEl) {
        this.contentEl.classList.remove(MENU_CONTENT_OPEN);

        /**
         * Remove aria-hidden so screen readers
         * can announce the main content again
         * now that the menu is not the main focus.
         */
        this.contentEl.removeAttribute('aria-hidden');
      }

      if (this.backdropEl) {
        this.backdropEl.classList.remove(SHOW_BACKDROP);
      }


Review comment (suggestion):
Should this check to see if the focused element is already inside of `ion-menu`? If it is, we probably do not want to change the focus.

Code after:

    if (isOpen) {
      // add css class and hide content behind menu from screen readers
      if (this.contentEl) {
        this.contentEl.classList.add(MENU_CONTENT_OPEN);

        /**
         * When the menu is open and overlaying the main
         * content, the main content should not be announced
         * by the screenreader as the menu is the main
         * focus. This is useful with screenreaders that have
         * "read from top" gestures that read the entire
         * page from top to bottom when activated.
         */
        this.contentEl.setAttribute('aria-hidden', 'true');
      }

      // emit open event
      this.ionDidOpen.emit();

      /**
       * Move focus to the menu to prepare focus trapping, as long as
       * it isn't already focused. Use the host element instead of the
       * first descendant to avoid the scroll position jumping around.
       */
      const focusedMenu = document.activeElement?.closest('ion-menu');
      if (focusedMenu !== this.el) {
        this.el.focus();
      }

      // start focus trapping
      document.addEventListener('focus', this.handleFocus, true);
    } else {
      // remove css classes and unhide content from screen readers
      this.el.classList.remove(SHOW_MENU);

      /**
       * Remove tabindex from the menu component
       * so that is cannot be tabbed to.
       */
      this.el.removeAttribute('tabindex');
      if (this.contentEl) {
        this.contentEl.classList.remove(MENU_CONTENT_OPEN);

        /**
         * Remove aria-hidden so screen readers
         * can announce the main content again
         * now that the menu is not the main focus.
         */
        this.contentEl.removeAttribute('aria-hidden');
      }