Improve more actions button accessibility in the context menu component

[gtsiolis]

Problem to solve

The more actions button in the context menu component currently comes with poor accessibility.

Generally, a div-based button can become quite accessible, however, you'd still need to make the element focusable and define event handlers when a button-based button automatically takes care of this. See relevant documentation[1][2][3][...].

For example, in this case where we're using a div-based button, we're missing the basic role="button" attribute, which could improve the existing situation. ➿

This component is also used 11 times across the codebase, most commonly within the Items List component. 🔍

[Kanika637]

Hey @gtsiolis , I want to work on this issue, Could you guide a little bit on this.

[gtsiolis]

Hi @Kanika637! Going through relevant documentation around accessibility standards and best practices that are linked in the issue description could be helpful to understand what we can do to improve the situation.

Possibly, we could start with simply adding the role="button" on the relevant div element. You can also find links to the relevant component in the issue description.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.