Make sure button text is meaningful

Description

Location: 07 Wiki - Edit

Severity: 7

Description: The close button to dismiss the success message displayed after saving changes to an article does not have the proper role or a meaningful label. The control is rendered as "X link" through a screen reader. This is not meaningful and does not describe the purpose of the control.

Pattern: None

Auditor Note: Developers must ensure the proper role and name is provided for all controls. In this case, the element must be a button since it is performing an action and the name should be more meaningful such as "Dismiss Message" or "Close Message".
To convey the proper role, developers can use a standard HTML button element or add ARIA role="button" and making sure that space bar also actiavtes the button. It is recommended to use a standard HTML button because it will allow space bar to activate the button by default.
Compliant Example:
<button class="close" data-dismiss="alert" aria-label="Dismiss Message">&times;</button>

Internal Note: Agree with the suggested fix. There has also been an informal discussion about deprecating Wiki altogether.

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Activity

Show:
Greg Martin
November 2, 2017, 6:25 PM

Note to self for non-paragon styling

Eric Fischer
October 27, 2017, 5:46 PM
Edited

-Do this, but unescape it

<a class="close" data-dismiss="alert" href="#">&lt;span aria--hidden="true"&gt;×&lt;/span&gt;&lt;span class="sr"&gt;Dismiss&lt;/span&gt;</a>-

Make it a button. Use paragon as able.

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

Assignee

Greg Martin

Reporter

Mark Sadecki

Story Points

1