[icon] Add support for setting aria-label on the icon [1 day]

[web-padawan]

Motivation

We make the icons hidden from screen readers in #2936 but in some cases users might want to override this.

Proposed solution

Inspired by how the <lion-icon> web component handles this:

static get properties() {
  return {
    // ...
    ariaLabel: {
      type: String,
      value: '',
      observer: '_ariaLabelChanged'
      reflectToAttribute: true
    }
  };
}

_ariaLabelChanged(ariaLabel) {
  if (ariaLabel) {
    this.setAttribute('aria-hidden', 'false');
  } else {
    this.setAttribute('aria-hidden', 'true');
  }
}

[yuriy-fix]

We could find the way of properly announcing icons. Take a look at the existing solutions.

[web-padawan]

Based on https://www.sarasoueidan.com/blog/accessible-icon-buttons/

Since the button doesn’t have any text content in it, nor does it have a label defined using any ARIA attributes, the icon itself will now be used as a name. Since the icon has a clear label, that label will be used as the accessible name for the button.

Please note that I do not recommend using this technique as it fails in some browser / screen reader combinations. Personally, I’d not use the SVG icon itself to provide a label for the button when I can provide one on the button itself directly