Clarity: Signposts have accessibility issues

[kglickman]

Select one ... (check one with "x")

[x ] bug
[ ] feature request
[ ] enhancement

Expected behavior

• When tabbing to a signpost icon, the icon should get a focus outline

Actual behavior

• The icon has the focus, but there is no visible indication of such.
• I am also getting a message about the icon in an internal accessibility testing tool - Minimum contrast of 2.81 with its background is not sufficient to meet WCAG AA requirements for text of size 12px and weight of 500.

Reproduction of behavior

This can be reproduced on the Clarity web page https://vmware.github.io/clarity/documentation/signposts in the section titled "Signpost positions"

Environment details

• Angular version: 4.1.3

• Clarity version: 0.9.13

• OS and version: Windows 7

• Browser: [all | Chrome 60 | IE 11

[mathisscott]

1) The signpost icon should have focus indicated with the outline as well as the icon turning action blue.

2) To handle WCAG AA compliance, the signpost icon should be #737373 when not highlighted/focused and #0065AB when hovered/focused.

[mathisscott]

NOTE: this may require some images in the documentation to change

[reddolan]

I am ok with both of @mathisscott's recommendations. From the naked eye, the changes aren't perceptible.

This does bring up a greater challenge which is about our default icon color being #747474. It is not accessible on a #fafafa background. We might want to change our default icon color to #737373 so as to not run into any more accessibility issues. This unfortunately is not part of our color palette cc: @lil-kim

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.