Modal status messages are not perceivable by screen reader

[Lisa Seeto]

It was found that the status messages (saved, error etc...) are not perceivable by a Screen Reader (SR). This was tested in a session with Julius focusing on the "Comments and Details" modal when viewing blocks in "Details" mode BUT it could apply to further modals that can have status messages, i.e anything that requires a comment, annotation etc...

The steps when testing with the SR:
1. Log in to Mahara site as any user, and create a new page or edit an existing one
2. Add a block, such as an image block and then put page into 'Details' mode
3. Select to add a comment to the Image block by clicking its block header or image
4. In the modal, attempt to make a blank comment.
Expected results:
The modal stays open, with the error message "There was an error with submitting this form. Please check the marked fields and try again." correctly labelled to be read by a SR
Actual results:
The modal stays open with the error message but it is not perceivable by a SR
5. Enter text in the comment field to create a comment
6. Reopen the modal and select to delete the newly created comment
Expected results:
The modal stays open with the status message "Comment removed" perceivable by SR
Actual results:
The modal stays open with the status message but it is not detected by the SR

Helpful Resources:
ARIA19: Using ARIA role=alert or Live Regions to Identify Errors
https://www.w3.org/TR/WCAG20-TECHS/ARIA19.html

Using the alert role:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role