Incorrect setting of aria-readonly attributes in RatingGroup component when readOnly parameter is true

[Friedrich Siever]

Description

Issue Title:
Incorrect setting of aria-readonly attributes in RatingGroup component when readOnly parameter is true

Description:
Hello,

I have noticed that the RatingGroup component in ArcUI, when used in ReadOnly mode with the readOnly parameter set to true, sets the ARIA attribute aria-readonly on the <span> elements. This contradicts the ARIA specifications, as aria-readonly should not be applied to non-interactive elements such as <span>. At least google and w3c validator downgrade the accessibility score for this.

Current Behavior:

• The RatingGroup component sets aria-readonly on the <span> elements in ReadOnly mode, leading to validation errors.

Expected Behavior:

• In ReadOnly mode, aria-readonly should not be set on the <span> elements.

Additional Information:

• ArcUI Version: [ "@ark-ui/react": "^2.0.2",]

Thank you!

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/devbox/condescending-bush-86l4rq?file=%2Fsrc%2FApp.tsx

Steps to Reproduce

1. Use the RatingGroup component with the readOnly parameter set to true.
2. Inspect the generated <span> elements and their ARIA attributes.

Ark UI Version

2.0.2

Framework

• React
• Solid
• Vue

Browser

No response

Additional Information

No response

[Christian Schröter]

@Fritze1602

Thanks for taking your time to report this issue. I could not find any hint that aria-readonly is not allowed on span elements. https://www.w3.org/TR/2017/REC-wai-aria-1.1-20171214/#aria-readonly

However I could see that our Storybook Accessibility Add-On also throws a critical warning.

I'm not sure how to solve that one since it is an interactive element by default.

Maybe @segunadebayo can help

[Christian Schröter]

@Fritze1602

This will be fixed with chakra-ui/zag@def93df