[a11y]: Datagrid, radio select: selection of radio buttons causes focus jump

[elycheea]

Package

@carbon/ibm-products

Browser

Firefox

Operating System

No response

Package version

v2.44.0-rc.1

React version

No response

Automated testing tool and ruleset

manual

Assistive technology

JAWS

Description

Observation on row selection radio buttons selection:

• Selecting a radio button within the table row jumps focus to the top and announces: "storybook-preview-frame frame"
• Screen reader doesn’t announce the radio button selection status immediately

Note Screen reader users experience difficulty navigating the table and confirming their selections.

Recommended fix Ensure the selection status of the radio button elements is conveyed instantly, also avoid the focus jump caused by selection.

User impact When the state of an element is not conveyed appropriately, it prevents screen reader users to interact smoothly with the page element.

WCAG 2.1 Violation

4.1.2. Name Role Value

Reproduction/example

https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-datagrid--radio-select&globals=viewport:basic

Steps to reproduce

To reproduce this defect:

1. Use a screen reader on the row selection story.
2. Try navigating through radio buttons.
3. Try selecting a radio button.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[devadula-nandan]

I have checked the issue along with @amal-k-joy and found that it is caused by the DataGrid re-rendering, which results in the focus being reset to the body.

the ideal solution would be to avoid re-renders.

I haven't found a solid solution yet. I tried using memo and callback. but still can't avoid re-rendering.

the last resort/workaround I see is adding below code here but need to test it. on screen readers as it shifts focus to body and returns to checkbox

const test = document.activeElement?.id;
    setTimeout(() => {
      document.getElementById(test)?.focus();
    }, 0);

WIP