Issue Summary

The interactive elements are missing keyboard support.

Steps to Reproduce

1. Open the “Amador” project and select it.
2. Navigate to the “Raise a request” link present in the side navigation and activate it.
3. On the “Help center” page navigate “IT help" link and activate it.
4. Now, navigate to the “Browse” button present in the main content area and activate it.
5. Observe a “Select Affected Business Service” modal dialog gets add on the page.
6. Using Screen reader, navigate to the interactive elements associated “Humboldt", “Mariposa” and “Mendocino” text elements.
7. Try to activate the buttons with an Enter or Space key.
8. Observe that the buttons does gets expanded/collapsed only with the mouse and not with Enter or Space keys.

Screen Recording

Screen Recording 2024-10-03 at 3.28.06 PM.mov

Screenshot

Actual Results

The interactive elements associated with “Humboldt", “Mariposa” and “Mendocino” text elements are not keyboard operable. Visually on activating the interactive elements with mouse, the content gets collapsed and expanded. Although the dynamic change in the content is easier to understand for sighted users, it is not intuitive for screen reader users.

As a result, if interactive elements are missing keyboard support then the screen readers and keyboard only users will miss out on important functionality associated with it.

Expected Results

Apply the following changes:

1. The mentioned interactive elements should receive keyboard support when user navigates through it using TAB key. For these interactive elements should be coded as button with type=”button” or role=”button”. Also it should announce accessible name for these buttons.
2. If using role="button" instead of the semantic <button> or <input type="button"> elements, you will need to make the element focusable and define event handlers for click and keydown events. This includes handling the Enter and Space keypresses in order to process all forms of user input.
3. Also, the screen reader should announce the expand/collapse state when interacting with the mentioned interactive elements for its users.
4. Set ‘aria-expanded' attribute to 'true' for the mentioned interactive elements when the button is in the expanded state. Ensure that the value of 'aria-expanded' attribute changes to 'false’ in collapsed state on user interaction via scripting.

Code snippet 1: Using <button>

<button aria-expanded="false" aria-label="Summary of Humboldt Business service" class="rlabs-icon js-object-expanding-icon rlabs-hover rlabs-icon-expand-marker"></button>

Code snippet 2: Using role=”button”{}

<div aria-expanded="false" role="button" aria-label="Summary of Humboldt Business service" class="rlabs-icon js-object-expanding-icon rlabs-hover rlabs-icon-expand-marker"></div> 

 
Note: Before implementing any labels please connect with the content design team to take a suggestion/approval from them.

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (14-inch, 2021)
macOs Sonoma 14.6.1
Chrome - Version 129.0.6668.60 (Official Build) (arm64)
Firefox- Version 129.0.1(64-bit)
Safari- Version 18.0 (19619.1.26.111.10, 19619)
JAWS- Version 2023
NVDA- Version 2023
Voiceover - Version Latest

Versions Tested

Please confirm all versions that have been tested for this issue, and indicate whether the tested version is affected or not affected, below: