Alert notification not accessible to screen reader user after wiki page save


Location: 07 Wiki - Edit

Severity: 9

Description: When the article is saved after changes are made, a message is rendered "A new version of the article was successfully added". However, the page is refreshed, focus is redirected to the top and the message is not rendered to assistive technologies. Users have to navigate through the page to find the message which makes it more difficult for them. Low vision users who have their screens magnified will not find the message easily if the focus is back to the top of the page.

Pattern: None

Auditor Note: Developers must ensure that assistive technology users are aware of the changes in content, more specifically the success message rendered. To do this, developers must set focus on the message. This will help screen reader read the message content, it will also help magnification software users focus on the message.
Add tabindex="-1" in the message to allow focus but not place static text in the tab order, and use JavaScript focus method to set focus to it when it is displayed.

Internal Note: either move focus, modify the title element, or use aria-live to make the screen reader user aware of the alert. There has been an informal discussion about deprecating Wiki

Steps to Reproduce


Current Behavior


Expected Behavior


Reason for Variance


Release Notes


User Impact Summary



Greg Martin
November 7, 2017, 6:58 PM

Verified as functioning. Closing ticket

Greg Martin
November 7, 2017, 3:28 PM

I believe this is complete with the completion of 1554. Will test and verify.

Eric Fischer
October 27, 2017, 6:07 PM

Pairs with, they address the same problem.

Suggestion 1: Use StatusAlert component from paragon, it's pretty cool.

Suggestion 2: Move alert inside of <div class="article-wrapper">, set focus there when needed.

Your pinned fields
Click on the next to a field label to start pinning.


Greg Martin


Mark Sadecki

Story Points