Issue Summary

The data table defined is unnecessarily for the content.

Steps to Reproduce

1. Open the “Amador” project and select it.
2. Navigate to the “Raise a request” link present in the side navigation and activate it.
3. On the “Help center” page navigate “IT help" link and activate it.
4. Now, navigate to the “Browse” button present in the main content area and activate it.
5. Observe a “Select Affected Business Service” modal dialog gets add on the page.
6. Inspect the code of the “Business Services” content present in the modal dialog and observe that the table is defined unnecessarily.

Screenshot

Actual Results

The content such as “Humboldt", “Mariposa” and “Mendocino” are marked up within data table inappropriately. As a result, screen reader users will get incorrect structure information.

Expected Results

Tables should be marked accurately. Data tables provide content in certain context. When the screen readers are informed about a table, they expect for table headers and data cells. Navigating through each cell enables them to identify and interpret tabular content.
When the table structure is unnecessarily used, screen reader users find it difficult to understand the page content.

Apply the following changes:

• Remove the data table from the source code of the mentioned content.

• Mark-up the mentioned content using definition <div>.

<div class="rlabs-table" role="group" aria-label="Business Services">
(...)
</div> 

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (14-inch, 2021)
macOs Sonoma 14.6.1
Chrome - Version 129.0.6668.60 (Official Build) (arm64)
Firefox- Version 129.0.1(64-bit)
Safari- Version 18.0 (19619.1.26.111.10, 19619)
JAWS- Version 2023
NVDA- Version 2023
Voiceover - Version Latest

Versions Tested

Please confirm all versions that have been tested for this issue, and indicate whether the tested version is affected or not affected, below: