feat(microchart-bar): improve accessibility

[akashsonune]

---

Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

• element-ng
• element-translate-ng

[gemini-code-assist]

Code Review

This pull request enhances the SiMicrochartBarComponent by adding an img role for accessibility. However, the review points out that this implementation is incomplete and suggests adding an aria-label with a corresponding input property to provide an accessible name for screen readers.

[gemini-code-assist]

Adding role='img' is a good first step for accessibility, but it's incomplete. An element with an image role must have an accessible name, otherwise screen readers will announce it as an 'unlabeled image', which is not helpful.

To fix this, you should provide an accessible name via aria-label. The suggestion below adds this binding to the host. To make it work, you'll also need to add a corresponding ariaLabel input to the component class:

/**
 * Accessible label for the chart.
 * @defaultValue ''
 */
ariaLabel = input<string>('');

This will allow consumers of the component to provide a meaningful description of the chart for assistive technologies.

  host: {
    role: 'img',
    '[attr.aria-label]': 'ariaLabel()'
  }

[akashsonune]

@dr-itz WDYT, the role=img has to be supported by the aria-label to have a real improvement. shall we let user take care of this,i.e to provide the aria-label?