Closed Meenakshi34-lab closed 1 month ago
@amal-k-joy Can you please have Raghu take a look at this keyboard behavior and assess for us?
Here’s some additional information: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
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.
Hey @Meenakshi34-lab , are you seeing this happen to the radio button group outside tearsheet
?
Hi @RichKummer : We are facing issue inside the tearsheet as per our project.
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.
@elycheea @RichKummer : Please let us know the current status of this issue.
@makafsal : Could you please update the status on this request
@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
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