Accessibility Assessment - Roadmaps: Disable state not announced for the screen Reader user

Issue Summary

Disable state is not announced for the options such as "Epic" and "Story".

Steps to Reproduce

1. Navigate to the "Plans" dropdown and activate it.
2. Select any option from the list.
3. Using the screen reader, navigate to the mentioned button in the main content area and activate it.
4. Listen that the state is not announced for the options.

Actual Results

The "Epic" and "Story" options do not convey their disabled state when the user navigates using the JAWS screen reader. This is because these elements use role="menu" and role="menuitem" attributes. As well, the "Epic" and "Story" interactive elements are announced together.

As a result, screen reader users are not able to understand the button's disabled state.

Expected Results

• Remove roles "menu" and "menuitem" from the mentioned instances.
• Code the "Epic" and "Story" options with native HTML <button> tag. Alternatively, use the role="button".
• Make sure that when the "Epic" and "Story" options are enabled, they receive keyboard focus.

Workaround

Currently there is no known workaround for this behaviour.

Environment

MacBook Pro (16-inch, 2019)
macOS 14.3 (23D56)
Chrome - Version 121.0.6167.184
Firefox- Version 122.0.1 (64-bit)
Safari- Version 16.5.2 (18615.2.9.11.10)
JAWS- Version 2024
NVDA- Version 2023.3
Voiceover - Version Latest