Improve accessibility on HdIcons

[metal-gogo]

Without HdIcon we could use an svg asset like this:

<template>
  <img
    src="@/assets/img/icons/some.svg"
    width="16"
    height="16"
    alt="Some alt text to describe image"
  >
</template>

With HdIcon we can make it inline the svg with the following code:

<template>
  <hd-icon
    :src="someIcon"
    width="16px"
    height="16px"
  />
</template>

<script>
import { HdIcon } from 'homeday-blocks';
import { someIcon } from 'homeday-blocks/src/assets/small-icons';

export default {
  name: 'componentName',
  components: {
    HdIcon,
  },
  data() {
    someIcon,
  },
};
</script>

This is awesome! This gives us a lot of versatility and styling power. And the best part is that we are getting the icons directly from the design system.

The downside of using the component HdIcon on this case is that we lose the accessibility on the image. I believe that we should make a11y a first-class citizen on Homeday Blocks.

I suggest we implement accessibility on HdIcon adding the props:

• title: string, optional, if not provided could work as an empty alt attribute.
• id: string, optional, if not provided could be autogenerated
• description: string, optional

I add a couple of screenshots from this accessible svgs post describing how could accessibility be implemented 😁.

---

Reference:

• https://css-tricks.com/accessible-svgs/
• https://getbootstrap.com/docs/4.0/getting-started/accessibility/#interactive-components
• https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

[metal-gogo]

According to the library we are using, we could use a transformSource function to add the title.

shrpne/vue-inline-svg#3