Add `accesibleSearchEnabled` prop for TreeView component

[angelozdev]

Description of Proposed Change

Purpose

Add the accessibleSearchEnabled property to allow users to control when the component focuses automatically while typing.

Change Details

1. New Property: accessibleSearchEnabled

   • Type: boolean
   • Default Value: true
   • Description: Allows enabling or disabling the accessible search functionality. When enabled, the component will automatically focus on nodes that match the key pressed.

2. Modification in handleKeyDown:

   • The accessibleSearchEnabled property is added to the parameter list.
   • Additional logic is included to handle accessible search based on the new property. If accessibleSearchEnabled is true, the function will search and automatically focus on nodes whose names start with the pressed key.

Relevant Code

const handleKeyDown = ({
  accessibleSearchEnabled = true,
  data,
  expandedIds,
  selectedIds,
  disabledIds,
  tabbableId,
  dispatch,
  propagateCollapse,
  propagateSelect,
  multiSelect,
  expandOnKeyboardSelect,
  togglableSelect,
  clickAction,
}: {
  accessibleSearchEnabled?: boolean;
  data: INode[];
  tabbableId: NodeId;
  expandedIds: Set<NodeId>;
  selectedIds: Set<NodeId>;
  disabledIds: Set<NodeId>;
  halfSelectedIds: Set<NodeId>;
  dispatch: React.Dispatch<TreeViewAction>;
  propagateCollapse?: boolean;
  propagateSelect?: boolean;
  multiSelect?: boolean;
  expandOnKeyboardSelect?: boolean;
  togglableSelect?: boolean;
  clickAction: ClickActions;
}) => (event: React.KeyboardEvent) => {
  // Existing logic
  // ...

  if (event.key.length === 1 && accessibleSearchEnabled) {
    let currentId = getNextAccessible(data, id, expandedIds);
    while (currentId !== id) {
      if (currentId == null) {
        currentId = getTreeParent(data).children[0];
        continue;
      }
      if (
        getTreeNode(data, currentId).name[0].toLowerCase() ===
        event.key.toLowerCase()
      ) {
        dispatch({
          type: treeTypes.focus,
          id: currentId,
          lastInteractedWith: id,
        });
        return;
      }
      currentId = getNextAccessible(data, currentId, expandedIds);
    }
  }

  // Existing logic
  // ...
};

Benefits

• Improved Accessibility: Allows users to navigate the component more easily using the keyboard.
• Flexibility: Developers can enable or disable this feature as needed, adapting to various usage scenarios and accessibility requirements.

This change enhances the user experience when interacting with the component, particularly in terms of keyboard accessibility and usability.

[dgreene1]

@mellis481 can you take a look at this?