Bugfix - NUI-6283: [a11y] role="tab" elements do not have aria-controls pointing to their panel, etc. (WCAG 4.1.2)

[kubeska]

Frontend Pull Request Description

This PR improves the accessibility of the tab and tab-panel relationship across the @nova-ui/bits library. The main change is to ensure that tab and panel elements have properly aligned IDs and ARIA attributes. This includes updates to both the implementation and the demos, as well as the addition of tests to verify the correct associations.

Accessibility Improvement:

• Tab and tab-panel elements now use consistent, accessible IDs (tab-{id} for tabs and panel-{id} for panels), and the ARIA attributes aria-controls and aria-labelledby are set accordingly in both TabComponent and TabHeadingComponent. This ensures screen readers and assistive technologies can correctly associate tabs with their panels.

Code:

• The tab ID and panel ID prefixes are defined as constants in tabgroup.constants.ts and used throughout the codebase for consistency.
• Automatic unique ID generation is provided for tabs and headings when an explicit ID is not supplied, ensuring all tabs/panels have valid, unique identifiers.

Documentation:

• The changelog has been updated to reflect the accessibility fix for tab and tab-panel ID alignment.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have updated change log
• I have been following Definition of done
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new lint warnings
• New and existing unit tests pass locally and on CI with my changes
• Any dependent changes have been merged and published in downstream modules

Screenshots (if applicable)

Additional Context (if necessary)

The PR includes the following main changes:

• Added correct ARIA relationships between tabs and panels:

  • role="tab", role="tablist", and role="tabpanel
  • aria-controls on tabs
  • aria-labelledby on panels
  • Consistent tab-* and panel-* ID generation
  • Shared constants for ID prefixes

• Extended Tab, TabHeading, TabGroup, and TabHeadingGroup:

  • Added tabId support
  • Added ariaControls support
  • Added ariaLabel support for tabs without a text label
  • Correct handling of aria-selected, aria-disabled, and tabindex

• Implemented APG keyboard navigation:

  • Arrow keys for moving between tabs
  • Home and End for moving to the first or last enabled tab
  • Enter and Space for activation
  • Roving tabindex
  • Support for both horizontal and vertical orientation

• Improved focus and disabled-tab handling:

  • Disabled tabs are skipped correctly
  • The active tab is selected correctly during initialization and updates
  • Lifecycle cleanup logic was added or corrected

• Improved Switch accessibility:

  • Corrected the public id placement
  • Added accessible naming through projected label content
  • Added ariaLabel support
  • Added a localized fallback accessible name, Switch
  • Added Enter and Space keyboard activation

• Updated demo examples:

  • Corrected ARIA bindings in routed tab examples
  • Removed duplicate IDs
  • Fixed active-tab synchronization when removing the last tab in the list
  • Updated tab and switch documentation

• Expanded test coverage:

  • Unit tests for ARIA attributes, IDs, focus, disabled state, and keyboard navigation
  • E2E tests for tabs, routed tabs, and switches
  • Coverage for cleanup and edge cases

• Updated the changelog, package versions, and related repository formatting settings.

[ludmilaFialova]

The .gitattributes file was updated to enforce consistent LF line endings across the repository.
This prevents Windows-specific CRLF conversions from causing unnecessary diffs and Prettier or CI failures. It ensures that all developers and CI use the same line-ending format.