Revert "Completely hide the meta boxes icons from screen readers"

[jasmussen]

Reverts #1388

I approved this prematurely. Seems it causes a number of issues with the icon button and we might want to try a different approach.

Icons in the quick toolbar lost their styles:

Icons in the editor bar are offset:

The quick toolbar appearing and disappearing when the block is selected causes a jump.

[jasmussen]

Merging for now, will open a separate ticket to address the aria issue.

[swissspidy]

The quick toolbar appearing and disappearing when the block is selected causes a jump.

See also #1300.

[jasmussen]

#1300 is a different issue. The issue reverted here was caused by the span element adding extra height to the icons, that wasn't accounted for in the negative margin that positions the toolbar.

[afercia]

Sorry, just noticed the color issue 😞 Some of the CSS selectors would need to be updated

&:hover > svg,
&:focus > svg {
	color: $dark-gray-500;
}

Haven't noticed the icons misalignment when testing in Safari because icons in safari are always misaligned 😬 See screenshot after the revert:

[jasmussen]

Ack yeah need to fix Safari.

And we can fix the issue with the span element causing jumps. But as I tried actually doing this, it seemed to cascade the issues, and since IconButton is used in many places I was wondering if we could do without the extra element. As I asked in #1388 (comment), can we apply the aria hidden attribute directly on the SVG itself?

[afercia]

Well the SVG elements already have aria-hidden but that doesn't fix the Firefox+NVDA bug 😞
Ideally, it would be great it this was fixed upstream because it is a browser+screen reader bug. Will keep experimenting.

Note: actually the issue is not the SVG content, it's the SVG updating that causes the browser to re-paint that area, rebuild the set of accessible properties (it shouldn't do this) and trigger the NVDA bug.