Tips for boosting the tabindex in a React search result list with ul-li elements

Question

Tips for boosting the tabindex in a React search result list with ul-li elements

Implementing search results using ul li:

<ul className="search-result">
  <li tabindex="1">title here...</li>
  <li tabindex="2">title here...</li>
  <li tabindex="3">title here...</li>
.
.
.
</ul>

Styling for each item:

.search-result{
 li:active, li:focuse {
  font-weight: bold;
  background: #f0f0f0;
 }
}

Now, I'm looking to enhance user experience by allowing navigation between result items using keyboard arrow keys rather than the tab button. How can I access the current active tabindex in the document with JavaScript and increment or decrement it accordingly?

javascript html css accessibility

Answer 1

Answer №1

Would you like to use the tab key to navigate through each <li> (search result) and use the up/down arrow keys to move around the list?

Cautiously consider using positive values for tabindex. It's generally best to stick with the default browser focus order, which is based on DOM order. In this scenario, if you want users to tab through each <li> in sequence, there's no need to assign a positive value to tabindex, as the elements are already arranged in the desired tabbing order. Simply set them all to 0.

<ul className="search-result">
  <li tabindex="0">title here...</li>
  <li tabindex="0">title here...</li>
  <li tabindex="0">title here...</li>
.
.
.
</ul>

In general, only interactive elements should have tabindex="0". Since an <li> is not typically interactive, it could confuse users if they tabbed to it without being able to interact. Ask yourself: what can the user do once they reach the <li>? If there's no interaction possible, it shouldn't be a tab stop.

Usually, <li> elements contain interactive content like links or buttons, which are already tab stops by default and don't require a tabindex.

Regarding navigation with the up/down arrow keys, these keys should ideally only move focus between interactive elements. I usually implement an onkeydown event handler on the <ul> element to manage arrow key functionality, adjusting tabindex as needed for each item in the list. However, this approach is suitable when the entire list functions as one tab stop and users must navigate between items using the arrow keys. If your requirements include both behaviors, further clarification may be necessary.

If the list is treated as one tab stop, all <li> elements except the focused one will have tabindex="-1". The focused element will retain tabindex="0", enabling users to tab to the list as a whole and automatically focus on the previously selected item. This setup facilitates seamless up/down traversal of the list.

To handle up/down key presses, simply update the tabindex attribute from 0 to -1 for the currently targeted list item, change the attribute from -1 to 0 for the next item, and utilize focus() to switch focus to the newly selected element.

Answer 2

Would you like to use the tab key to navigate through each <li> (search result) and use the up/down arrow keys to move around the list?

Cautiously consider using positive values for tabindex. It's generally best to stick with the default browser focus order, which is based on DOM order. In this scenario, if you want users to tab through each <li> in sequence, there's no need to assign a positive value to tabindex, as the elements are already arranged in the desired tabbing order. Simply set them all to 0.

<ul className="search-result">
  <li tabindex="0">title here...</li>
  <li tabindex="0">title here...</li>
  <li tabindex="0">title here...</li>
.
.
.
</ul>

In general, only interactive elements should have tabindex="0". Since an <li> is not typically interactive, it could confuse users if they tabbed to it without being able to interact. Ask yourself: what can the user do once they reach the <li>? If there's no interaction possible, it shouldn't be a tab stop.

Usually, <li> elements contain interactive content like links or buttons, which are already tab stops by default and don't require a tabindex.

Regarding navigation with the up/down arrow keys, these keys should ideally only move focus between interactive elements. I usually implement an onkeydown event handler on the <ul> element to manage arrow key functionality, adjusting tabindex as needed for each item in the list. However, this approach is suitable when the entire list functions as one tab stop and users must navigate between items using the arrow keys. If your requirements include both behaviors, further clarification may be necessary.

If the list is treated as one tab stop, all <li> elements except the focused one will have tabindex="-1". The focused element will retain tabindex="0", enabling users to tab to the list as a whole and automatically focus on the previously selected item. This setup facilitates seamless up/down traversal of the list.

To handle up/down key presses, simply update the tabindex attribute from 0 to -1 for the currently targeted list item, change the attribute from -1 to 0 for the next item, and utilize focus() to switch focus to the newly selected element.

Answer 3

Answer №2

To keep track of the current tab index, store it in the state and make sure to update it within the keydown eventListener.

import "./styles.css";
import { useState, useEffect } from "react";
import users from "./data";

export default function App() {
  const [searchValue, setSearchValue] = useState("");
  const [currentTab, setCurrentTab] = useState(0);
  const searchResults = users.filter(
    (user) => searchValue.trim() && user.includes(searchValue.trim())
  );
  useEffect(() => {
    const handleKeyDown = (e) => {
      const keyCode = e.keyCode;
      if (keyCode == 38 && searchResults.length - 1 > currentTab)
        setCurrentTab(currentTab + 1);
      if (keyCode == 40 && currentTab >= 1) setCurrentTab(currentTab - 1);
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [searchResults, currentTab]);
  return (
    <div>
      <input
        type="text"
        value={searchValue}
        onChange={(e) => {
          setSearchValue(e.target.value);
          setCurrentTab(0);
        }}
      />
      <ul className="search-result">
        {searchResults.map((result, i) => (
          <li className={currentTab === i ? "active" : ""}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

I created a sandbox, feel free to explore!

Answer 4

To keep track of the current tab index, store it in the state and make sure to update it within the keydown eventListener.

import "./styles.css";
import { useState, useEffect } from "react";
import users from "./data";

export default function App() {
  const [searchValue, setSearchValue] = useState("");
  const [currentTab, setCurrentTab] = useState(0);
  const searchResults = users.filter(
    (user) => searchValue.trim() && user.includes(searchValue.trim())
  );
  useEffect(() => {
    const handleKeyDown = (e) => {
      const keyCode = e.keyCode;
      if (keyCode == 38 && searchResults.length - 1 > currentTab)
        setCurrentTab(currentTab + 1);
      if (keyCode == 40 && currentTab >= 1) setCurrentTab(currentTab - 1);
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [searchResults, currentTab]);
  return (
    <div>
      <input
        type="text"
        value={searchValue}
        onChange={(e) => {
          setSearchValue(e.target.value);
          setCurrentTab(0);
        }}
      />
      <ul className="search-result">
        {searchResults.map((result, i) => (
          <li className={currentTab === i ? "active" : ""}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

I created a sandbox, feel free to explore!

Tips for boosting the tabindex in a React search result list with ul-li elements

Answer №1

Answer №2

Similar questions

transferring data to Amazon Web Services using Angular framework

Utilizing VueJS and Lodash: The technique for extracting an array of objects exclusively featuring a specific key string

Deleting occurrences of a specific text from a JSON document and subsequently analyzing its contents

Creating a JavaScript and C# popup for deleting records in asp.net

Utilizing FullCalendar for showcasing comprehensive details

Converting Three.js objects into arrays

Error: The argument passed to int() must be a string, bytes-like object, or number, not 'NoneType' (Issue when sending HTML input to Python)

Easily resolving conflicts by removing `package-lock.json`

Difficulty encountered while setting up jQuery slider

What could be the reason for my React/HTML select element occasionally failing to display the default selected value?

Which design pattern would be best suited for monitoring the completion of multiple ajax requests?

Inject a heavy dose of Vue into your project

including a collection of values into a JSON data structure

Is there a way to showcase a Bootstrap popover using HTML content sourced from a GridView?

Combine several elements in a single jQuery scrollreveal function

The form will be submitted even if the validation conditions are not met, and the form

Click on a plane within a three.js environment to determine the X Y position within it

Is it necessary to encode the content before transmitting HTML in JSON from the server to the client?

Database connection error: Authentication protocol requested by server not supported

AngularJS Perspectives: Unveiling the Secrets of Successful Implementation