Issue Summary

The buttons elements associated with table are not keyboard operable.

Steps to Reproduce

1. Navigate to the "Create" button in header section.
2. Activate the above mentioned button.
3. Observe that "Create Issue" modal dialog has been appeared on the screen.
4. Navigate to the "Description" textarea.
5. Navigate to "Other" link and activate it.
6. Select the "Table" option and observe that table has been added in the textarea.
7. Using keyboard check that table option are not accessible.

Screen Recording

Screen Recording 2023-05-09 at 9.25.54 AM.mov

Actual Results

The "Delete table", "Insert row before". "Insert row before", and so on is not operable with a keyboard. The role and state of the buttons is not programmatically determined for screen reader users. This made it difficult for keyboard-only and screen reader users to access the functionality associated with mentioned button.

Expected Results

Apply the following changes:

• Code the mentioned button using <button> tag.
• Provide 'aria-pressed' attribute to ensure that the mentioned button is identified as toggle button.

A working example of accessible button can be found at https://www.w3.org/WAI/ARIA/apg/patterns/button/

Workaround

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

Environment

MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.3.1
Chrome - Version 112.0.5615.49 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 16.4 (18615.1.26.11.23)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest