Keyboard Navigation & Accessibility

[curran]

As a user, it should be possible to switch between files using the keyboard.

[curran]

Some insights from ChatGPT:

Making the interface accessible involves a few key principles, such as ensuring keyboard navigability, providing visual feedback, and supporting assistive technologies. Here's a breakdown of suggestions for each of the files you've provided:

DirectoryListing.tsx and FileListing.tsx

• Keyboard Navigation: Ensure that all interactive elements can be accessed using the keyboard. This includes being able to expand/collapse directories with arrow keys and hitting enter to select. You could use tabIndex to make elements focusable and handle onKeyDown events for navigation.
• Focus Indicators: When an item is focused, there should be a clear visual indication, such as a border highlight. This can be accomplished through CSS styles for the :focus pseudo-class.
• Aria Attributes: Use ARIA attributes to enhance accessibility. For instance, aria-expanded can indicate whether a directory is open or closed.

Item.tsx

• Interactive Elements: The icons for editing and deleting could be button elements that are accessible by default. You can use role="button" if you're not using button elements.
• Skip to Content: Include a 'skip to content' link at the start of the page, which becomes visible when focused and allows users to skip over the directory listing to the main content.
• Screen Reader Feedback: Announce changes to the state, like a directory opening/closing, using aria-live regions.

Listing.tsx

• Consistent Focus Management: When directories are toggled, ensure that focus is managed predictably, like moving focus to the first item in an opened directory.

index.tsx

• Modal Accessibility: Modals should trap focus within themselves when open and return focus to the initiating element upon closing.
• Accessible Naming: Use aria-label or aria-labelledby to provide names for interactive elements, especially icons that might not have visible text.

styles.scss

• Contrast and Colors: Ensure that there is sufficient contrast between text and background colors. Also, provide a mode for high contrast for users with visual impairments.
• Visual Cues: Use styles to provide feedback on actions, like a change in color when a file is being renamed.

General Tips

• Semantic HTML: Use semantic HTML tags where possible, as they provide built-in accessibility features.
• Testing with Assistive Technologies: Test your interface with screen readers and other assistive technologies to ensure compatibility.
• Skip Navigation: Implement skip navigation links so users can quickly navigate to different sections.

You might also consider using existing libraries or frameworks that come with built-in accessibility features to help ensure that your interface is compliant with standards like WCAG (Web Content Accessibility Guidelines).

Finally, involve users with disabilities in your testing process to get real-world feedback on the accessibility of your interface.

[curran]

Prompt:

Is it possible to leverage react-aria for this? How would that look?

Response from ChatGPT:

Yes, react-aria is a library from Adobe that provides hooks that manage the state and interactions for common accessibility patterns. It can be very helpful in making your interface more accessible. Here's how you can leverage react-aria with the components you've provided:

Using react-aria with DirectoryListing.tsx and FileListing.tsx

For DirectoryListing.tsx and FileListing.tsx, you could use useButton from react-aria to handle button interactions. This will ensure that buttons are accessible and have the correct ARIA attributes.

import { useButton } from 'react-aria';

...

const { buttonProps } = useButton({
  onPress: handleClick,
  elementType: 'div'
}, ref);

...

<div {...buttonProps} className="file-or-directory">
  {name}
</div>

Using react-aria with Item.tsx

Item.tsx can benefit from useTextField for the renaming functionality, which will make sure that the text field is fully accessible, handling focus events and ARIA attributes.

import { useTextField } from 'react-aria';

...

let { inputProps } = useTextField({
  type: 'text',
  onChange: setRenameValue,
  onKeyDown,
  onBlur
}, renameInputRef);

...

{isRenaming ? (
  <input
    {...inputProps}
    ref={renameInputRef}
    value={renameValue}
  />
) : (
  children
)}

Using react-aria with Listing.tsx

For handling the toggle functionality in Listing.tsx, you could use useToggle from react-aria. This hook is great for managing state for toggle-able components, ensuring the correct ARIA attributes are applied.

import { useToggle } from 'react-aria';

...

const { toggleProps } = useToggle({
  isPressed: isOpen,
  onPress: toggleDirectory
});

...

<div {...toggleProps} className="directory-name">
  {name}
</div>

Using react-aria with index.tsx

In index.tsx, you could use useDialog to manage the create file modal, ensuring that focus is managed correctly and the modal is accessible.

import { useDialog } from 'react-aria';

...

let { dialogProps, titleProps } = useDialog({}, ref);

...

<CreateFileModal
  {...dialogProps}
  titleProps={titleProps}
  show={isModalOpen}
  onClose={handleCloseModal}
  onRename={handleRename}
/>

General Implementations with react-aria

• Keyboard Navigation: useKeyboard can manage keyboard interactions across the component.
• Focus Management: useFocus and useFocusRing can handle focus state and styling.
• Overlay: useOverlay, useModal, and useOverlayTrigger can be used to handle overlays like modals.

By using react-aria, you can ensure that the interactions in your UI components meet the accessibility standards and behave as expected for users of assistive technologies. Remember to follow the documentation for each hook to understand the expected structure of the HTML elements and how to spread the provided props correctly.