search

oruga-ui / oruga

🐛 Oruga is a lightweight library of UI components without any CSS framework dependency
https://oruga-ui.com
MIT License
1.12k stars 171 forks source link

Tab Component: Improve Accessibility #446

Closed mlmoravek closed 7 months ago

mlmoravek commented 1 year ago

Description

Currently the tabs of the Tab Component can't reached by keyboard tabs by default.

This can be solved by adding tabindex="0" to the TabsItem Component.
Furthermore, the TabItem could also additionally get role="button" to get the HTML element appear as a button to screen readers.

Why Oruga need this feature

Improve Accessibility

jtommy commented 1 year ago

@mlmoravek would you like to work on it?

mlmoravek commented 1 year ago

@jtommy I just had time to look at your implementation. You misunderstood the issue. You added the tabindex="0" to the div in the "nav-content" section element. But it should be on the "nav-item" div element to change the active tab by keyboard.

astagi commented 1 year ago

Thanks for your review @mlmoravek will work to improve a11y following your suggestions