Issue Summary

The "Previous..." and "Next..." interactive elements are not keyboard operable and they lack role and names.

Steps to Reproduce

1. Open the "Home" page.
2. Navigate to the header section.
3. Navigate to the "Help" > "Jira Credits" buttons and activate them > a modal appears.
4. Navigate to the mentioned instances and inspect their code.
5. Observe that the role and accessible names have not been defined.
6. Also, they are not keyboard focusable.

Screenshot

Screen Recording

Screen Recording 2025-01-20 at 11.59.16 AM.mov

Actual Results

The keyboard support is missing for the interactive elements such as the "Previous..." and "Next..." buttons present in the "Jira Credits 🌍" modal dialog that becomes available on activating the "Help" and "Jira Credits" buttons in the header section. The role button and accessible names are also not defined for the mentioned "Previous" and "Next" interactive elements.

This made it difficult for keyboard-only users and screen reader users to access and understand the functionality associated with them.

Expected Results

The buttons should be focusable and operable with a keyboard and have a programmatically defined role button and accessible names.
Ensure that all the interactive elements are focusable and operable using a keyboard and screen reader.

Apply the following changes:

• Code the "Previous..." and "Next..." interactive elements using <button> tag or role="button" and tabindex="0".

• Provide unique and descriptive labels such as “Previous...” and "Next..." for the buttons using 'aria-label' attribute to provide accessible names.
• Also, hide the "←" and "→" for the screen reader users using aria-hidden="true" attribute.
• Modify the scripts to ensure the buttons are operable with a keyboard and a mouse.

A working example of an accessible button can be found at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button 

Code Example:

<button aria-label="Previous..." id="prev" class="arrow prev"...>
 <span aria-hidden="true">←</span>
</button> 
(...)
<button aria-label="Next..." id="next" class="arrow next"...>
 <span aria-hidden="true">→</span>
</button>

Note: Before implementing the labels/accessible names for the mentioned buttons. Kindly, consult with the content design team for suggestion/approval.

Workaround

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

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.7
Chrome - Version 131.0.6778.86 (Official Build) (arm64)
Firefox- Version 134.0 (64-bit) 
Safari- Version 18.1.1 (20619.2.8.11.12)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest