Accessbility and testing features

[MichaelDoyle]

Adds appropriate ARIA labels (e.g. role) and changes clickable elements to use buttons

[gemini-code-assist]

Summary of Changes

Hello @MichaelDoyle, 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 accessibility and semantic correctness of the ngx-json-treeview component. By adopting appropriate ARIA roles and attributes, and by converting interactive elements to native buttons, the component becomes more usable and navigable for users relying on assistive technologies, while maintaining its visual integrity.

Highlights

• Enhanced Accessibility Semantics: Implemented WAI-ARIA roles and attributes (e.g., role="tree", role="treeitem", aria-expanded, aria-level) to improve navigation and understanding for assistive technologies within the JSON treeview.
• Improved Interactive Elements: Converted previously interactive span elements into semantically correct button elements for toggling tree nodes and handling value clicks, enhancing keyboard navigation and accessibility.
• Styling for New Buttons: Added CSS rules to ngx-json-treeview.component.scss to reset default browser styles for the newly introduced button elements, ensuring visual consistency.

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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

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 issue 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 significantly improves the accessibility of the JSON treeview component by using semantic HTML (<button>) for interactive elements and adding appropriate ARIA attributes. These are excellent changes that follow best practices.

I've identified a couple of areas for further improvement:

1. A high-severity issue with duplicate ID generation which can impact assistive technologies.
2. A medium-severity suggestion to enhance keyboard navigation by providing explicit focus styles.

Please see the detailed comments for more information and suggested solutions.

[MichaelDoyle]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces significant accessibility improvements by replacing non-semantic clickable elements with <button>s and adding the necessary ARIA attributes to correctly represent a tree view. The changes are well-executed and greatly enhance the component's usability for users of assistive technologies. My review includes one suggestion to make the unique ID generation for components compatible with Server-Side Rendering (SSR).

[MichaelDoyle]

/gemini review

[gemini-code-assist]

Code Review

This pull request significantly improves the accessibility of the ngx-json-treeview component by introducing proper ARIA roles and attributes for a tree view, and by replacing clickable <span> elements with semantic <button> elements. The addition of a unique ID generator is a great way to support aria-labelledby and also considers server-side rendering needs. The changes are well-implemented. I have one suggestion to improve the robustness of the new ID generator. Overall, this is an excellent contribution to make the component more accessible.

[MichaelDoyle]

/gemini review

[gemini-code-assist]

Code Review

This pull request significantly improves the accessibility of the JSON treeview component by introducing proper ARIA roles and attributes, and by replacing clickable <span> elements with <button> elements. The changes are well-implemented, including the addition of a unique ID generator that thoughtfully considers server-side rendering. The new styles for buttons, especially the focus-visible state, are also a great addition for keyboard navigation. I have one minor suggestion to improve code maintainability by reducing duplication in the template. Additionally, while the PR title mentions 'testing features', no new tests were added. It would be highly beneficial to add tests to verify these important accessibility improvements and prevent future regressions.

[MichaelDoyle]

cc @ohmnoms - I think this should solve 2 problems in one go (accessibility and testability). Let me know if this helps. You'd be able to use role locators in Playwright with this change.