-
Bug
-
Resolution: Unresolved
-
Low
-
None
-
4.20.0, 5.3.1
-
Severity 3 - Minor
-
Issue Summary
Missing keyboard support for the text formatting dropdown in the toolbar section for the comment on this page section.
Element name: Buttons
- Text styles button
- Bold button
- More options button
- Bullet list button
- Attach file
- --etc.,
---------------------------------
Element name: Submenus of the below menu buttons - Text styles button
- More options button.
Location: Present in the "Comment on this request" edit field, on the main page.
Steps to Reproduce
- In the Help portal, select the My request button and select All Requests.
- In the available request, select any 1 request.
- In the Available page, select the Comment tab.
- In the comment toolbar, try to select the Heading level with the keyboard and screen reader.
Actual Results
In the editor toolbar section, for the selection for the more formatting button, the dropdown list is not accessible to keyboard-only users. This makes the keyboard users inaccessible to the interactive content available.
Additionally, the dropdown list is missing list markup, as a result, screen reader users find it difficult to understand the information effectively.
Expected Results
Ensure the keyboard and screen reader focus is received to the dropdown menu.
Refer to the following code implementation:
<button type="button" aria-haspopup="true" aria-controls="menu1" class="item menu-button" tabindex="-1" aria-label="Select heading"> <span> Normal text </span> </button> <ul role="menu" id="menu1" aria-label="Heading levels"> <li role="menuitemradio" aria-checked="true"> Heading level 1 </li> <li role="menuitemradio" aria-checked="true"> Heading level 2 </li> (...) </ul>
Refer to the following link:https://www.w3.org/WAI/ARIA/apg/example-index/toolbar/toolbar.html
Screenshot
Workaround
Can be added with "###" and the space, will add a heading level 3 and with "/heading" in the text area.
Bug Ref: 745775
Bulldog Ref:
- links to
- mentioned in
-
Page Failed to load