Accessibility issues with the dropdown-menu display

[williamcanton]

Description

Currently, the TopNavigation component in Cloudscape has an attribute called utilities which can be used to list buttons, and other dropdown-menu items. The ariaLabel only mutes the accessibility issue on the top level before the dropdown-menu is display. However, once the dropdown-menu is shown by clicking on it, other accessibility issues were detected by scanning tools like axe DevTools. But inside the definition of the item dropdown-menu and the associated sub items attribute, there are no other accessibility supports to address the issues reported by DevTools. Can you add accessibility supports to the dropdown-menu and the sub items list associated with the TopNavigation component? Other regular dropdown menus might have the same accessibility problems.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

[avinashbot]

Could you share which accessibility issues were specifically highlighted? I ran axe DevTools and Chrome Lighthouse on our top navigation demo with a dropdown menu open and it didn't highlight any issues for me.

[williamcanton]

Hi Avinash, Thanks for looking into the accessibility issue relating to the TopNavigation component in CloudScape framework. Here is the screenshot showing the User Profile dropdown menu: ***@***.*** Axe DevTools reported that there is one critical issue and one serious issue: ***@***.*** The critical issue is relating to the following message from axe DevTools: Ensure elements with an ARIA role that require parent roles are contained by them Element Location: .awsui_menu-item_93a1u_1vvrv_183 <span aria-label="Sign out of the application" class="awsui_menu-item_93a1u_1vvrv_183 awsui_menu-item_q2oen_w271r_6" tabindex="0" role="menuitem">Sign out</span> I believe the generated HTML span element contains a role=”menuitem”, but the there was no parent container that has a role of menubar. The TopNavigation is the container of this User Profiler dropdown menu, but it only supports two attributes: identity and utilities and not role. Furthermore, the utilities attribute supports the dropdown-menu type but does not support the role attribute even though it is supposed to be the container of the dropdown-menu items. The serious issue is relating to the structure of the ul element listing the menu items of the dropdown menu: Ensure that lists are structured correctly Generated HTML code looks like this: <ul class="awsui_options-list_19gcf_1hl2l_141 awsui_decrease-block-margin_19gcf_1hl2l_197" tabindex="-1" aria-label="User profile dropdown menu" aria-labelledby="awsui-button-dropdown__header:rm:" style="position: static;"> <li class="awsui_item-element_93a1u_1vvrv_141 awsui_highlighted_93a1u_1vvrv_163" role="presentation" data-testid="signout"> <span aria-label="Sign out of the application" class="awsui_menu-item_93a1u_1vvrv_183 awsui_menu-item_q2oen_w271r_6" tabindex="0" role="menuitem">Sign out</span> </li> Axe DevTools stated that “To solve this problem, you need to fix the following: List element has direct children that are not allowed: [role=presentation]” It seemed like the roles in the li and the span elements are in conflict as highlighted above. Here is the code fragment relating to the use of the TopNavigation component in CloudScape framework: <nav role="navigation" aria-label="Top navigation"> <TopNavigation identity={{ href: "/", logo: { src: "/images/appseal-white.png", alt: APP_NAME + " Logo" }, title: "Application logo", }} utilities={[ { type: "button", text: theme === Mode.Dark ? "Light Mode" : "Dark Mode", onClick: onChangeThemeClick, }, { type: "menu-dropdown", ariaLabel: "User profile dropdown menu", description: userName ?? "", iconName: "user-profile", onItemClick: onUserProfileClick, items: [ { id: "signout", text: "Sign out", ariaLabel: "Sign out of the application", }, ], }, ]} /> </nav> If you have more questions, feel free to connect with me. I hope to find a solution to the accessibility issues. William

[williamcanton]

I found similar accessibility issues with the regular dropdown menu as shown below: ***@***.*** Here is the code fragment that implemented the dropdown menu button: <ButtonDropdown expandToViewport={true} items={(props.message.metadata.Sources as any[]).map((item) => { return { id: item.uri, // Using uri as unique id instead of static "id" disabled: false, text: item.title, href: item.uri, external: true, externalIconAriaLabel: "(opens in new tab)", ariaLabel: `Open ${item.title} in new tab`, role: "menuitem", // Add explicit role }; })} Sources</ButtonDropdown> Generated HTML code is a ul with the role=”presentation” and the li with role=”menuitem”. Axe DevTools stated that “To solve this problem, you need to fix the following: Required ARIA parents role not present: menu, menubar, group”. This is similar to the User Profile dropdown-menu embedded inside the TopNavigation component.

[williamcanton]

Another critical accessibility issue found: The dismiss button on the Flashbar component has an accessibility issue even though the dismissLabel is provided: ***@***.*** Here is the code fragment that implemented the above panel using Flashbar component: <Flashbar items={[ { content: ( <ProgressBar value={uploadProgress} variant="flash" description={ uploadingStatus === "success" || uploadingStatus === "error" ? null : currentFileName } label={ uploadingStatus === "success" || uploadingStatus === "error"? "Uploading files" : `Uploading files ${uploadingIndex} of ${filesToUpload.length}` } status={getProgressbarStatus()} resultText={ uploadingStatus === "success" ? "Upload complete" : "Upload failed" } /> ), type: uploadingStatus, dismissible: uploadingStatus === "success" || uploadingStatus === "error", dismissLabel: "Dismiss icon button", onDismiss: () => setUploadPanelDismissed(true), buttonText: uploadingStatus === "success" ? "View files" : undefined, onButtonClick: () => props.tabChangeFunction(), id: "upload-status", statusIconAriaLabel: "Status icon", }, ]} i18nStrings={{ ariaLabel: uploadingStatus === "success" ? "Upload completed successfully notification" : "Upload failed notification", errorIconAriaLabel: "Error status", inProgressIconAriaLabel: "Upload in progress", infoIconAriaLabel: "Information status", successIconAriaLabel: "Success status", warningIconAriaLabel: "Warning status", notificationBarAriaLabel: "Notification bar", notificationBarText: uploadingStatus === "success" ? "Upload succeeded" : "Upload failed", }} />