Improve sprite_icon output markup accessibility

Summary

From !99548 (comment 1194566548) rendered <svg> elements are read by screen-readers as "25" etc.

There's no aria-label on the and buttons, and the svg icon needs role="img" and aria-hidden="true". This is why it's being announced as "link, image, 25" (and other numbers). See this example for the code.

https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-button--icon-button

Improvements

Update sprite_icon to provide aria-hidden="true" and role="img" attributes to the outputted <svg>

 content_tag(
   :svg,
   content_tag(:use, '', { 'href' => "#{sprite_icon_path}##{icon_name}" }),
   class: css_classes.empty? ? nil : css_classes.join(' '),
+  role: 'img',
+  aria: { hidden: 'true' },
   data: { testid: "#{icon_name}-icon" }
 )

Risks

sprite_icon is used heavily throughout to render <svg> icons. Changes to markup will impact large areas of the codebase and might benefit from being opt-in unless it's beneficial to update everywhere universally.

Involved components

HAML files using sprite_icon

Intended side effects

Hide <svg> icons from accessibility tree, reducing screen-readers reading out icon IDs as content.