Avatar a11y

[veith]

Bug Description

Avatar always set an aria-label, even when no accessible-name was given. And if the avatar is not set to interactive, the avatar will not set the role button. This causes an error on chai a11y tests if you use the avatar in an avatar-group, if you test the avatar standalone, there is no error.

test result

 Error: Accessibility Violations
      ---
      Rule: aria-allowed-attr
      Impact: serious
      Elements must only use allowed ARIA attributes (https://dequeuniversity.com/rules/axe/4.7/aria-allowed-attr?application=axeAPI)

 Issue target: ui5-avatar[initials="A3"],.ui5-avatar-root[aria-label="Avatar"][data-sap-focus-ref=""]
      Context: <div class="ui5-avatar-root" data-sap-focus-ref="" tabindex="-1" aria-label="Avatar">
      Fix all of the following:
        aria-label attribute cannot be used on a div with no valid role attribute.

If you look at the Avatar.ts, the role is only be set to button if the Avatar is interactive. The get accessibleNameText always returns something ("Avatar").

Avatar.ts

get _role() {
        return this._interactive ? "button" : undefined;
    }

get accessibleNameText() {
        if (this.accessibleName) {
            return this.accessibleName;
        }

        return Avatar.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
    }

My suggestion is to set the role always to button and set the aria-disabled if the element is not interactive.

Affected Component

Avatar.ts

Expected Behaviour

• do not set the aria-label when no role is set

or

• set the role always to button and the aria-label to the accessible name (if given) and set aria-disabled if the instance is not interactive

Isolated Example

No response

Steps to Reproduce

test

for (let i = 0; i < themes.length; i += 1) {
    it(`Component: AvatarGroup, Theme:${themes[i]}  `, async () => {
      await setTheme(themes[i]);
      const el = await fixture(
        html`
          <ui5-avatar-group type="Group">
            <ui5-avatar initials="A1" interactive=""></ui5-avatar>
            <ui5-avatar initials="A2" interactive=""></ui5-avatar>
            <ui5-avatar initials="A3" interactive=""></ui5-avatar>
            <ui5-avatar initials="A4" interactive=""></ui5-avatar>
            <ui5-avatar initials="A5" interactive=""></ui5-avatar>
          </ui5-avatar-group>
        `
      );
      await elementUpdated(el);
      await expect(el).shadowDom.to.be.accessible();

    });
  }

Log Output, Stack Trace or Screenshots

 Error: Accessibility Violations
      ---
      Rule: aria-allowed-attr
      Impact: serious
      Elements must only use allowed ARIA attributes (https://dequeuniversity.com/rules/axe/4.7/aria-allowed-attr?application=axeAPI)

 Issue target: ui5-avatar[initials="A3"],.ui5-avatar-root[aria-label="Avatar"][data-sap-focus-ref=""]
      Context: <div class="ui5-avatar-root" data-sap-focus-ref="" tabindex="-1" aria-label="Avatar">
      Fix all of the following:
        aria-label attribute cannot be used on a div with no valid role attribute.

Priority

High

UI5 Web Components Version

1.16.0

Browser

Chrome, Firefox

Operating System

MacOs

Additional Context

No response

Organization

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[plamenivanov91]

Hello @SAP/ui5-webcomponents-topic-p,

Could you please look into this issue?