Inaccessible icons in Support Forums

[sabernhardt]

1. On the ​HelpHub front page, these icons are linked without any text inside them (empty links). Either the links could be removed from the icons to match the ​Support Forums page, or else the icons can be placed inside the links with the heading instead of having them separate.
2. ​Accessibility guidelines require a color contrast of at least 3:1 for icons against their background, and #32373c at 40% opacity is insufficient (2.2:1).
3. The icon character can be hidden from screen readers with aria-hidden.

[sabernhardt]

The ​styles should have a text color without the reduced opacity. #8d969f has a 3:1 contrast ratio against white, and a darker option would be fine.

		.dashicons {
			font-size: ms(16);
			color: #8d969f;
			width: auto;
			height: auto;
		}

If grouping the icon and heading within the link, the .icon-wrapper element can be a div or a span:

<div class="info-box">
	<a href="https://wordpress.org/support/category/getting-started/">
		<span class="icon-wrapper">
			<span class="dashicons dashicons-wordpress" aria-hidden="true"></span>
		</span>
		<h3>Getting Started</h3>
	</a>

[sabernhardt]

HelpHub front page's current gray icons

[sabernhardt]

using #8d969f gray for icons

[hilayt24]

Hi @sabernhardt, Thanks for the ticket and the suggestions. I added the color to the dash icons and removed the opacity from them.

[hilayt24]

Color added and opacity removed

[sabernhardt]

​HelpHub apparently does not have the icons anymore.

I do not know how to test the patch properly, but the change looks good for the Support Forums.

[coffee2code]

In 13370:

Support: Improve color contrast of icons on forums page.

Props hilayt24, sabernhardt.
Fixes #6305.