refactor(core/radio): add accessibility improvements and host click handler

[alexkaduk]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: 87ea5f3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@siemens/ix	Minor
@siemens/ix-angular	Minor
@siemens/ix-react	Minor
@siemens/ix-vue	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[gemini-code-assist]

Summary of Changes

Hello @alexkaduk, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the ix-radio component by focusing on accessibility and user interaction. It introduces an aria-label for better screen reader compatibility and implements a host-level click handler, making the entire component area interactive. These functional improvements are thoroughly validated with new end-to-end tests, ensuring robust and accessible behavior across various use cases, including disabled states and radio group management.

Highlights

• Accessibility Improvement: The ix-radio component now includes an aria-label attribute on its host element, which is derived from the component's label prop. This enhances accessibility by providing a clear, programmatic name for screen readers and other assistive technologies.
• Host Click Handler: A click handler has been added to the ix-radio component's host element. This allows users to click anywhere on the radio component (not just the internal input or label) to toggle its checked state, improving the overall user experience and click target area.
• Disabled State Handling: The new host click handler correctly respects the disabled state of the radio button, preventing interaction when the component is disabled.
• New Playwright Tests: Comprehensive Playwright tests have been introduced to validate the new accessibility features and the host click handling behavior, covering scenarios like disabled states, interactions within radio groups, and ensuring radio buttons do not uncheck when clicked again.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request improves the accessibility and usability of the ix-radio component by adding an aria-label and an onClick handler to the host element. This makes the entire component clickable and provides a better experience for screen reader users. The accompanying tests are well-written and cover the new functionality effectively. I've made one suggestion to improve the new click handler to avoid redundant event processing, which enhances the component's robustness.

[alexkaduk]

/gemini review

[gemini-code-assist]

Code Review

The pull request introduces accessibility improvements by adding aria-label to both ix-checkbox and ix-radio components. It also refactors the import order in checkbox.ct.ts and adds comprehensive Playwright tests for accessibility and click handling for both components. The changes enhance the usability and test coverage of these UI elements.

[alexkaduk]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces accessibility improvements for the checkbox, radio, and toggle components, and adds a host click handler to the radio component. The changes are accompanied by good test coverage. My review focuses on ensuring these accessibility enhancements are correctly and consistently implemented. I've identified a minor issue in the toggle component where it's missing a role attribute on its host element, which is inconsistent with the other updated components.

[alexkaduk]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces accessibility improvements to the checkbox, radio, and toggle components by adding or adjusting ARIA attributes. It also adds a click handler to the radio component's host element to improve its usability. The changes are accompanied by new tests to verify the new functionality. My review identifies a potential runtime error in the new onClick handler for the radio component and suggests a fix to make it more robust.

[alexkaduk]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces accessibility improvements for the checkbox, radio, and toggle components, primarily by ensuring ARIA attributes are correctly applied to the host elements. It also adds a host click handler to the radio component to improve its usability. The changes are accompanied by a good set of new tests. I've found one issue with the implementation of the new click handler in the radio component where event.target is used incorrectly for an event bubbling from the Shadow DOM.

[gemini-code-assist]

Code Review

This pull request enhances accessibility for the checkbox, radio, and toggle components by adding appropriate ARIA attributes and ensuring they are interactive via their accessible roles. For the radio component, a host click handler is added to improve usability, and for the toggle component, the accessibility role is moved to the host. The changes are well-supported by new component tests that verify the new accessibility features and click behaviors.

I have one suggestion for the toggle component to add a host-level click handler for consistency and to improve its usability.

Also, the PR title mentions radio, but the changes also beneficially impact checkbox and toggle components. Consider updating the title to reflect the broader scope, for example: feat(core): improve accessibility for checkbox, radio, and toggle.

[alexkaduk]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces several accessibility improvements for the checkbox, radio, and toggle components, primarily by adding or adjusting ARIA attributes and adding a host click handler for the radio button. The changes are well-tested. I've found a couple of issues related to accessibility and event handling that I've detailed in my comments. One is a bug in the new onClick handler for the radio component due to Shadow DOM event retargeting. The other is an incomplete accessibility implementation for the toggle component, which is now missing keyboard support after being assigned role="switch".

[alexkaduk]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces valuable accessibility improvements to the checkbox, radio, and toggle components, and adds a host click handler to the radio component. The changes, especially moving ARIA roles to the host element and hiding implementation details from assistive technologies, are well-executed. I've left one specific comment on the new onClick handler in radio.tsx to make it more robust. The new tests are comprehensive and ensure the new functionality is working as expected. Great work on improving the accessibility and usability of these components.

[alexkaduk]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces accessibility improvements for the checkbox, radio, and toggle components, primarily by adding aria-label attributes and a host click handler for the radio button. These are positive changes. My review focuses on completing the accessibility pattern for the radio and toggle components. To make them fully keyboard-accessible and align with the role being on the Host element, they should be made focusable and handle keyboard events. I've provided detailed suggestions to add tabindex and onKeyDown handlers to achieve this. The new tests are well-written and cover the intended changes.

[alexkaduk]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces several accessibility improvements for the checkbox, radio, and toggle components, primarily by making the host element the main interactive element with appropriate ARIA roles and attributes. The changes for checkbox and radio look solid and are well-tested. However, the implementation for the toggle component is incomplete and could lead to accessibility issues. I've left a detailed comment with suggestions to align it with the other components and ensure it's fully accessible.

[danielleroux]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces significant accessibility improvements to the radio, checkbox, and toggle components, and also fixes a behavioral bug in the radio component. By moving ARIA attributes and event handlers to the Host element, the components are now more accessible and behave more like native elements for assistive technologies. The radio component was also corrected to prevent it from being toggled off when clicked, which is the correct behavior for radio buttons. The changes are well-supported by new tests that verify the accessibility features and correct event handling. I've found one minor issue with a leftover debug statement that should be removed.

[danielleroux]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces significant accessibility improvements to the radio, checkbox, and toggle components by making the host element focusable and interactive, and adding appropriate ARIA attributes. It also implements keyboard navigation for radio groups according to WAI-ARIA practices. The changes are well-tested. I have a few suggestions to improve the implementation details, mainly around simplifying logic in the radio group and correcting behavior in the radio component's focus handler.

[danielleroux]

/gemini review

[gemini-code-assist]

Code Review

This pull request significantly enhances accessibility for the radio button, radio group, checkbox, and toggle components by adopting a custom control pattern. The changes correctly move ARIA roles and attributes to the host elements, making them focusable and implementing proper keyboard navigation, especially for the radio group. The implementation aligns well with accessibility best practices. I've included a few suggestions to further refine the code.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud