feat(a11y): Accessible svg's in dashboard

Apart from fixing the dashboard svg's, the idea of this MR is to implement a generic solution for accessible svg's in the app.

There are two types of svg's:

  • functional
  • decorative

Functional svg's must:

  • have a child with a unique id
  • itself must contain "aria-labelledby" property, which refers to the title id
  • have a "role='img'"
  • must be exposed to the screenreader, therefore "aria-hidden" shouldn't be set or at least set to "false"

Decorative svg's must:

  • not be exposed to the screenreader, e.g. have "aria-hidden=true" property

Therefore:

  • SvgIconProps types has been extended
  • createIconComponents script has been adapted and rerun, for the changes to be applied to all existing icons

Moreover a bug has been fixed in the createIconIndex script:

Closes #2078

Edited by oleksii sukhodolskyi

Merge request reports

Loading
Loading