Inside Tearsheet radio button group behavior on using keyboard is different in chrome and Mozilla

Meenakshi34-lab commented 2 months ago

Package

Carbon for IBM Products

Description

I am using tearsheet component inside that radio group keyboard is showing different behavior in different browsers .Chrome it is up/down arrows in between radio button and firefox on tab click only it moves to next radio button

Component(s) impacted

Accesibilty for radio option of radio group inside tearsheet ,

Browser

Chrome, Firefox, Microsoft Edge

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

v2.45.0

Suggested Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Product/offering

Awc project using carbon react and carbon ibm products

CodeSandbox or Stackblitz example

https://stackblitz.com/edit/vitejs-vite-yds8rg?file=src%2FApp.jsx

Steps to reproduce the issue (if applicable)

Please use tearsheet and add radio button group and using keyboard see the behavior

Release date (if applicable)

No response

Code of Conduct

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

ljcarot commented 2 months ago

@amal-k-joy Can you please have Raghu take a look at this keyboard behavior and assess for us?

devadula-nandan commented 2 months ago

Here’s some additional information: https://www.w3.org/WAI/ARIA/apg/patterns/radio/

devadula-nandan commented 2 months ago

Hi @ljcarot @amal-k-joy , As per the discussion with Raghu, the following behavior was inconsistent with Chrome.

https://github.com/user-attachments/assets/10e431dd-6ca0-4c25-b084-af0cf68d3a5d

and Firefox should be following the same behavior as Chrome.

RichKummer commented 2 months ago

Hey @Meenakshi34-lab , are you seeing this happen to the radio button group outside tearsheet?

neambati commented 2 months ago

Hi @RichKummer : We are facing issue inside the tearsheet as per our project.

Meenakshi34-lab commented 2 months ago

Hi @RichKummer We are facing this inside the tearsheet as in chrome we move from one radio button to other using up/down keys. Tab and Tab+shift move it out of radio button .In firefox and edge we can use tab to move between radio button.

neambati commented 2 months ago

@elycheea @RichKummer : Please let us know the current status of this issue.

neambati commented 1 month ago

@makafsal : Could you please update the status on this request

makafsal commented 1 month ago

@neambati @Meenakshi34-lab Please provide the name attribute for <RadioButtonGroup>.

<RadioButtonGroup
  legendText=""
  orientation="vertical"
  invalidText={'You must select at least one notification type.'}
  onChange={(e) => handleOnChange(e)}
  className="radioGrp"
  aria-label="Select at least one option."
  name="my-radio-group" // <-- ADD THIS
>

Please have a look: https://stackblitz.com/edit/vitejs-vite-wdkktu?file=src%2FApp.jsx also, https://react.carbondesignsystem.com/?path=/story/components-radiobutton--vertical

carbon-design-system / ibm-products