Web component: Masthead - On iPhone Voice over - menu options are not available immediately after the triggering element.

[Praveen-sr]

Detailed description

Jeff would like this fix included in the v1.11.0rc scheduled for Wednesday, Sept 16.

Issue:
After activating the Hamburger menu button
The options are not available immediately after the triggering element.
visually it is appearing after the triggering element but for the screen reader users it is available after navigating through the following elements:
the IBM logo link, Open IBM search field button and User profile.

Expected: screen reader should identify the control immediately after the triggering element.

Note: Working fine in react Staging.

Additional information

[annawen1]

The fix for this issue in React was to simply move the <MastheadLeftNav/> above the Logo, search, and profile components. The <HeaderContainer /> that wraps the Masthead provides a isSideNavExpanded flag which we used to determine whether the hamburger menu is open or not.

              {(navigation || mastheadL1Data) && isSideNavExpanded && (
                  <MastheadLeftNav />
                )}

                <IbmLogo
                  autoid={`${stablePrefix}--masthead-${navType}__l0-logo`}
                />

                <div className={`${prefix}--header__search ${hasPlatform}`}>
                  {navigation && !mastheadL1Data && (
                    <MastheadTopNav />
                  )}
                  {hasSearch && (
                    <MastheadSearch />
                  )}
                </div>

CC @asudoh

[asudoh]

Thank you for the info @annawen1!