search

epam / UUI

React-based components and accelerators library built by EPAM Systems.
https://uui.epam.com/
MIT License
181 stars 67 forks source link

[TabButton] Improve accessibility. Create TabList component. #2525

Open vasilii-kovalev opened 1 month ago

vasilii-kovalev commented 1 month ago

Description

The TabButton component offers a partially a11y-compliant experience, only providing role="tab" for the button. tablist and tabpanel role users should assign manually. Keyboard experience should also be implemented by the users.

This ticket is a request to provide a complete set of a11y-compliant components (or a single configurable component) for tabs.

Describe the solution you'd like

Behavior to achieve:

  1. Tabs with Automatic Activation
  2. Tabs with Manual Activation (optional)
AlekseyManetov commented 4 days ago

Pay attention, that current TabButton implementation has margin-bottom: -1px hack, to make possible layout when active tab border overlaps container divider. Let's think how to move this hack into TabList component, but remove it from TabButton itself, since it can be used in different use cases as with divider and without it.