Issue Summary

On the “Create page | Toolbar” page, the aria-disabled=” true” attribute is not defined for the toolbar.

Steps to Reproduce

1. Navigate to the above-mentioned page.
2. Navigate to the main content area and press Shift + Tab key
3. Observe that the toolbar is disabled visually.

Screen Recording

Screen Recording 2023-08-14 at 4.21.27 PM.mov

Actual Results

When the shift + tab is hit from the main content area, the toolbar visually seems to be disabled, but the toolbar section is not set as "disable" programmatically. As a result, users of screen readers won't comprehend the switch's disabled status. 

Expected Results

Set the HTML "disabled" attribute when the toolbar section is in the disabled state. Ensure that the attribute is removed when the section is in an active state.

Alternatively, set the "aria-disabled" attribute to "true" when the section is in the disabled state. Ensure that the value of the "aria-disabled" attribute changes on user interaction via scripting.

Code snippet

<div id="toolbar" disabled >
    <div id="rte-toolbar" class="aui-toolbar aui-toolbar2"><button id="inviteToEditLink" aria-label="Invite people to edit with you" aria-haspopup="true" aria-expanded="false" class="aui-button invite-to-edit-button" original-title="" resolved=""><span class="invite-plus-icon"></span></button>

Workaround

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

Environment

MacBook Pro (14-inch, 2021)
macOs Ventura  13.4
Chrome - Version 114.0.5735.106 (Official Build) (arm64)
Firefox- Version 112.0. 1
Safari- Version 16.5 (18615.2.9.11.4)
JAWS- Version 2023
NVDA- Version 2023
Voiceover - Version Latest