ovh/ovh-ui-kit

[oui-action-menu] compact mode has accessibility issue

antleblanc opened this issue · 1 comments

antleblanc commented

Description

Using <oui-action-menu compact> component raise an accessibility issue when
using Lighthouse report (for instance).

Adding the aria-label attribute, as mentioned into the documentation does not
provide any result (same with text attribute).

Steps to reproduce

  1. Use oui-action-menu story as an example (https://ovh.github.io/ovh-ui-kit/?path=/story/design-system-components-action-menu-webcomponent--compact).
  2. Pay attention that text attribute is correctly settled (and/or use the arial-label attribute)
  3. See errors (both attributes are ignored).

Expected behavior:

  • text should work.
  • aria-label should work.
  • No accessibility issue must be reported.

Actual behavior:

Following error is reported:

Button do not have an accessible name

button#ouiDropdown4.oui-action-button.ng-scope.ng-isolate-scope.oui-dropdown__trigger

Frequency:

5 (always)

Additional information

Canva link: https://ovh.github.io/ovh-ui-kit/iframe.html?id=design-system-components-action-menu-webcomponent--compact&viewMode=story
Live example: https://upufn.csb.app/
CodeSandbox: https://codesandbox.io/s/oui-action-menu-aria-label-upufn?file=/index.html

AxelPeter commented

Hello,

A patch release has been made and this issue is now fixed in the package @ovh-ux/ui-kit@4.2.4