SVG icons: restore attributes required for accessibility

[afercia]

#8916 changed many SVG icons, hardcoding them instead of using the Dashicon component. Thus, all the new icons now miss a few HTML attributes that are required for accessibility:

• role="img" aria-hidden="true" to ensure they're hidden from assistive technologies
• focusable="false" to work around an IE 11 bug where all the SVG icons within focusable elements are considered by IE focusable themselves, so there's the need to press the Tab key twice when navigating using the keyboard

I'm not sure what are the plans for all these hardcoded SVG icons. For sure, using the Dashicon component was ideal to standardize all the default props and rendered HTML attributes. If these new icons are going to stay hardcoded across the codebase (which I see less ideal), then there's the need to add to all of them the missing attributes.

[aduth]

For icons which we expect to be developer-provided (e.g. block icons), should we anticipate that they could forget these attributes† and try to correct them programmatically?

† Painfully obvious given the "Regression" label 😉

[afercia]

Of course it would be great to make sure these attributes are present also in icons provided by plugins 🙂

[jasmussen]

Fixed it in PR linked above.

Though worth noting this doesn't fix it for all plugin blocks in the future. Is the solution documentation, or JS wizardry? For now though, I'd think that would be a separate (though worthwhile) consideration from this ticket.