Issue description

In toolbar, on expanding the “Layout settings“ menu button, the selected state of menu items is not identified by screen reader users.

Platform: Jira DC

Version: 8.22.0

Steps to reproduce

1. Navigate to the “Structure” menu button in the header section and activate it.
2. Activate any structure board from the menu.
3. Navigate to the “Layout settings“ menu button from the toolbar and activate it.
4. With screen reader turned on, navigate to the selected menu item radio elements from the list and observe that the checked state is not announced.

Note: This issue is for a third party add-on "Structure" : https://marketplace.atlassian.com/apps/34717/structure-project-management-at-scale?hosting=server&tab=overview

Screenshot

Actual behaviour

In windows device’s Chrome/ Firefox browser along with JAWS/ NVDA screen reader, when the checked menu item radio elements receive focus, their checked state is not announced to screen reader users. This is caused due to incorrect semantic structure in source code for the parent menu and its menu item radio children.

Expected result

“Checked” should be announced for the selected radio buttons present in the list when they receive focus. The <ul> element should have role=”menu” with an associated label whereas the <li> elements inside it should have role=”menuitemradio”. The <a> elements present inside the <li> should have role=”presentation”.

Code example:

<ul role=”menu”
rel=”font-family”
aria-label=”Font”>
<li role=”menuitemradio” aria-checked=”true”>
Sans-serif
</li>
<li role=”menuitemradio” aria-checked=”false”>
Serif
</li>
<li role=”menuitemradio” aria-checked=”false”>
Monospace
</li>
<li role=”menuitemradio” aria-checked=”false”>
Fantasy
</li>
</ul>