Gutenberg: Notice created by withNotices HoC should be announced by screen readers

[afercia]

See also #9425. All notices that appear on the screen display important information for users and should also be announced by screen readers.

Seems the withNotices higher order component just displays notices. For example. when trying to drag an image in the Image block and there's no connectivity, a notice appears within the block:

These visual notices don't use speak from the @wordpress/a11y package nor they dispatch any other audible message. In this case, the easier way to make these messages be announced by screen readers would be adding a role="alert" attribute to the notice wrapper element.

For reference: https://www.w3.org/TR/wai-aria-1.1/#alert

[LukePettway]

For these types of notices in the past I have used an announcer component which can be passed along a message from anywhere, does something exist like this in Gutenberg anywhere?

[afercia]

In Gutenberg there's speak() and the related higher order component withSpokenMessages that can be used to send a message to an ARIA live region.

However, these notices "appear" on the screen and in this case role=alert works properly.

[afercia]

Update: see https://www.w3.org/TR/wai-aria-1.1/#live_region_roles

Role alert: A type of live region with important, and usually time-sensitive, information ... Elements with the role alert have an implicit aria-live value of assertive ...

Role status: A type of live region whose content is advisory information for the user but is not important enough to justify an alert ... Elements with the role status have an implicit aria-live value of polite ...

These two roles can be used to differentiate the type of notice, depending on if it's important enough to interrupt the user flow (assertive) or not (polite).

[gziolo]

I closed initial try to fix it #9443 which became stale after a bigger refactoring. I'm also leaving some notes on how this issue should be approached.

However, quick question: is the notices module able to handle also "in place" notices besides the ones at the top of the editor? We'd need something to announce notices that appear within other components, for example:

the contrast checker:

notices when the apiFetch response is invalid / errors:

allowed file types:

etc. etc.

Yes. This is possible as @aduth explained:

I don't know that it's tracked anywhere, but I foresee that withNotices can (and should) be reimplemented to use the notices module, assigning some random/unique value as a scope using the notice module's context property.

However, this needs to be implemented this way. I think it would solve also a related issue with multiple notices showing up in those components. I think I saw PRs trying to fix it the other day.

[aduth]

In combination with a solution for #15708 (and likely with relevance to feedback to #15594), I've opened the pull request #15745 to move audible notice announcements to the component, which will account for withNotices and ad-hoc Notice component rendering. Feedback would be appreciated.