Tab Accessibility

[sahar-saadatmandi-corelab]

Description:
The tabs component has accessibility issues for keyboard-only users. When navigating through multiple tabs using only the Tab key, the tab headers are skipped, and the focus directly moves to the content of the first visible tab. This means users cannot switch between tabs using only the keyboard, making the other tabs and their content completely inaccessible.

Steps to Reproduce:

1. Open a page containing multiple tabs.
2. Use the Tab key to navigate through the components.
3. The tab headers are not focusable, and focus skips directly to the content inside the active tab.
4. Click on a different tab header using the mouse to select it.
5. Try to switch to another tab (or tab header) using the keyboard (e.g., arrow keys, Tab key, or Space/Enter) — the switch doesn't work, and it is not possible to navigate between tabs using just the keyboard.
6. The fields inside other tabs remain inaccessible when using just the keyboard.

Expected Behavior:

1. The Tab key should allow users to focus on all tab headers, enabling seamless navigation across tabs.
2. Keyboard interactions (such as Arrow keys, Tab, Space, or Enter) should allow users to switch between tabs without requiring a mouse.
3. Content inside each tab should become accessible upon navigating to the respective tab (via mouse or keyboard).
4. All interactive elements inside other tabs should remain accessible using only the keyboard when their corresponding tab is selected.

Possible Solution:

• Use <button> instead of <a>:
  Replace <a> elements with <button> for tab headers to resolve accessibility issues. Buttons are inherently accessible and offer better support for keyboard navigation.
• Add Focus Styles:
  Use CSS to clearly highlight headers when focused.

Why is this Important:
The current behavior renders the tabs component inaccessible for keyboard-only users and violates WCAG accessibility guidelines. Ensuring keyboard navigation accessibility is vital for providing an inclusive and user-friendly experience.