Add required `aria-label` prop to VIconButton

[sarayourfriend]

Problem

The IconButton component should always have an aria- label unless it is aria-hidden, which it shouldn't probably ever be considering it's an interactive part of the page. Without the label screen readers don't have the necessary information to describe the button to the user.

Description

We should add a required prop for the aria-label attribute to enforce that it is always passed when using this component.

Implementation

• [ ] 🙋 I would be interested in implementing this feature.

[ramadanomar]

I would be interested in resolving this bug.

[sarayourfriend]

The issue's assigned to you @ramadanomar, thank you.

[ramadanomar]

Just a quick question: Wouldn't it be better to require aria-label as a prop for VButton component as VIConButton is just a VButton with a VIcon. Shouldn't all buttons have an aria label to improve accesibility?

This is how VIconButton template looks like

<template>
  <VButton
    v-bind="buttonProps"
    size="disabled"
    class="icon-button flex flex-shrink-0 items-center justify-center border-1.5 active:shadow-ring"
    :class="buttonSizeClasses"
    :type="type"
    v-on="$listeners"
  >
    <slot name="default" :icon-size-classes="iconSizeClasses" />
    <VIcon
      v-if="iconProps"
      class="pointer-events-none"
      :class="iconSizeClasses"
      v-bind="iconProps"
    />
  </VButton>
</template>

[sarayourfriend]

That's a good question. As far as I understand it, aria-label is redundant on a button that has descriptive text. A screen reader will pick and read only one or the other, not both, so they'll need to match (and be sensible) anyway, for a normal button.

The reason it's required for an icon button is because the icon is not interpretable by the screen reader.

If you have a different understanding of aria-label for a textual button though with examples, please let me know. You can see on this WAI-ARIA button examples page, however, that they do not use aria-label for the buttons that have regular text content: https://www.w3.org/WAI/ARIA/apg/example-index/button/button