add keyboard navigation

[MichaelDoyle]

No description provided.

[gemini-code-assist]

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!

Summary of Changes

This pull request enhances the ngx-json-treeview component by adding keyboard navigation support. This allows users to interact with the treeview using the keyboard, specifically the Enter key, to toggle the expansion of nodes and trigger value click handlers. Additionally, a small change was made to the demo app to include a nested object in the sample array.

Highlights

• Keyboard Navigation: Implemented keyboard navigation for expanding/collapsing nodes and triggering value click handlers using the Enter key.
• Accessibility: Added tabindex attributes to the span elements to make them focusable for keyboard navigation.
• Demo App Update: Updated the demo app's sample data to include a nested object within the array.

Changelog

• projects/demo/src/app/app.component.ts
  • Added a nested object { foo: 'bar' } to the array property in the demo app component to provide a more complex data structure for testing.
• projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html
  • Added tabindex attribute to the expandable span element, setting it to 0 if expandable and -1 otherwise, to enable focus.
  • Added (keydown.enter) event listener to the expandable span element to trigger the toggle(segment) method when Enter key is pressed.
  • Added tabindex attribute to the segment value span element, setting it to 0 if clickable and -1 otherwise, to enable focus.
  • Added (keydown.enter) event listener to the segment value span element to trigger the onValueClickHandler(segment) method when Enter key is pressed.

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 is currently in preview and 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 to provide feedback.

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.

---

A tree of JSON,
Keys and values in the light,
Enter key expands.

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

The pull request introduces keyboard navigation to the ngx-json-treeview component, enhancing accessibility. The changes look good overall, but there are a few areas where improvements can be made to ensure better usability and maintainability.

Summary of Findings

• Accessibility: Focus Management: The tabindex attribute is used to make elements focusable, which is great for keyboard navigation. However, ensure that the focus order is logical and intuitive for users. Consider adding visual cues to indicate which element is currently focused.
• Event Handling: Keydown Events: The keydown.enter event is used to trigger actions. It's important to ensure that these actions are consistent with user expectations and that the component behaves predictably across different browsers and platforms.
• Code Clarity: Variable Naming: Using descriptive variable names improves code readability. Consider renaming clickableValue to something more descriptive, such as isValueClickable, to clearly indicate its purpose.

Merge Readiness

The pull request is a good step towards improving the accessibility of the component. However, I recommend addressing the feedback provided, particularly regarding focus management and variable naming, before merging. I am unable to approve this pull request, and recommend that others review and approve this code before merging.