Accessibility (A11y) Improvements for Tabulator Table

[Asvin31]

Description:
This issue addresses two accessibility (A11y) concerns with the Tabulator table component:

1. Duplicate labels: The table currently contains duplicate labels for checkboxes(using rowSelection formatter), which can confuse screen reader users and hinder accessibility.
2. NVDA Issues:
   a. Each column header receives additional screen reader focus and is read as "blank", which can cause confusion and disrupt the user experience.
   b. The screen reader fails to properly announce the Rating values in the table(using star formatter), instead reading them as "column number Rating" without conveying the actual rating values (0, 1, 2, 3, 4, or 5).

Explanation:

Duplicate labels:

1. The presence of duplicate labels for checkboxes violates accessibility best practices as it can lead to confusion for screen reader users. This issue needs to be addressed by ensuring that each checkbox in the table has a unique and descriptive label, improving clarity and usability for all users.
2. NVDA Issues:
   a. Additional screen reader focus on column headers: The behaviour of receiving additional screen reader focus and being read as "blank" for column headers disrupts the user experience and may cause confusion. While one focus is expected for reading and another for sorting, the sort function should not read as "blank." This issue needs to be investigated and resolved to ensure a seamless and understandable experience for screen reader users.
   b. Missing Rating values announcement: The failure of the screen reader to properly announce the Rating values in the table deprives users of important information. This issue needs to be addressed to ensure that the Rating values are correctly announced, providing users with a complete understanding of the content presented in the table.

• Which version of Tabulator are you using?
• 6.2

Working Example
Working example

To Reproduce
A step by step guide to recreate the issue in your JS Fiddle or Codepen:

1. Go to the above jsFiddle link
2. Use a screen reader (e.g., NVDA) to navigate through the checkboxes -Note that the screen reader announces duplicate labels for the checkboxes.
3. Use a screen reader (e.g., NVDA) to navigate through the table headers - Note that each column header receives additional screen reader focus and is read as "blank".
4. Use a screen reader (e.g., NVDA) to navigate through the Rating values - Note that the screen reader fails to properly announce the Rating values, instead reading them as "column number Rating" without conveying the actual rating values (0, 1, 2, 3, 4, or 5).

Expected behavior

1. The checkboxes in the table should have unique and descriptive labels to ensure clarity and usability for screen reader users.
2. Each column header should receive focus and be read accurately, sort function should not be read as "blank".
3. The screen reader should properly announce the Rating values in the table, providing users with a complete understanding of the content presented.

Desktop (please complete the following information):

• OS: Windows
• Browser [chrome, safari]
• Version [latest]