Toolbar: The selected state of the toggle buttons is not announced by screen reader.

Issue Summary

For the elements such as "Bold", "Italic" & "Underline", etc the screen reader don’t announce them as toggle button & selected state is not announced.

Steps to Reproduce

1. Navigate to the "Create issue" modal dialog with screen reader turned on.
2. Navigate to the toolbar inside "description" input.
3. Navigate to the elements such as "Bold", "Italic" & "Underline" 
4. Observe that the toggle state is not announced by screen reader.

Actual Results

While navigating with screen reader, when user navigate to the toggle buttons "Bold", "Italic" & "Underline", etc the screen reader won’t announce them as toggle button. The aria-pressed attribute is missing from the element. 

Additionally the element as marked as link instead of button. And when user activate the link focus moves to input field inappropriately.

This makes screen reader users difficult to interact with the toggle elements effectively.

Expected Results

The screen reader should announce the element as toggle button along with the current state.

Provide aria-pressed attribute to the "Bold", "Italic" & "Underline" <a> elements. By default the value should be "false" & when pressed it should be set to "true".

Additionally provide role="button" to <a> element so that the screen reader will announce them as button instead of links.

Screenshot

Screen recording

74428-Toggle buttons.mov

Workaround

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