How can I set the tabindex of an HTML element so that it corresponds to the next element in the tab order?

OscarR
November 17, 2023
118 views
0 votes
2 Answers

In the following code you can see a simplified working example of a table where each row has an options button which triggers a menu with more buttons. However, when you try to tab through the focusable elements you will see that despite opening the menu, you will still have to tab through all the rows before you get into the menu.

My desired result is that you if you for example are focusing the "options" button in row 1, and then proceed to open it, the next tab press should bring you into the first button of the menu. Then as you tab through all the buttons of the menu, you should then be brought back to the "options" button in row 2.

How do I achieve this?

(Also, I cannot remove the overflow: hidden from the table which is why I am using an absolutely positioned menu outside of the table element in the first place)

const menu = document.getElementById("menu");
const table = document.getElementById("table");
const option_buttons = Array.from(table.querySelectorAll("button"));

table.addEventListener("click", (e) => {
  if (option_buttons.includes(e.target)) {
    e.stopPropagation();

    menu.style.top = e.target.getBoundingClientRect().top + "px";
    menu.style.display = "flex";

    document.documentElement.addEventListener("click", (e) => {
      if (e.target !== menu && !menu.contains(e.target)) {
        menu.style.display = "none";
      }
    });
  }
});

.table {
  overflow: hidden;
}

.row {
  display: flex;
  gap: 2rem;
  padding: 0.5rem 0;
  border-bottom: 0.0625rem solid #ccc;
}

.menu {
  display: none;
  position: absolute;
  left: 11rem;
  padding: 0.5rem;
  background: #ccc;
  flex-direction: column;
  gap: 0.5rem;
}

.menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: -0.75rem;
  width: 0;
  height: 0;
  border-top: 0.75rem solid transparent;
  border-bottom: 0.75rem solid transparent;
  border-right: 0.75rem solid #ccc;
}

button:focus {
  background: skyblue;
}

<div class="table" id="table">
  <div class="row">
    <span>Item 1</span>
    <button class="btn_option" type="button">Options</button>
  </div>
  <div class="row">
    <span>Item 2</span>
    <button class="btn_option" type="button">Options</button>
  </div>
  <div class="row">
    <span>Item 3</span>
    <button class="btn_option" type="button">Options</button>
  </div>
  <div class="row">
    <span>Item 4</span>
    <button class="btn_option" type="button">Options</button>
  </div>
  <div class="row">
    <span>Item 5</span>
    <button class="btn_option" type="button">Options</button>
  </div>
</div>

<div class="menu" id="menu">
  <button type="button">View</button>
  <button type="button">Edit</button>
  <button type="button">Delete</button>
</div>

Tags: html javascript

Answers

Chosen as BEST ANSWER

NOTE: This solution is the closest I have gotten to achieve everything I have outlined instead of just a simple focus() into the menu. It is NOT complete yet but seeing as it is my own post, I hope its okay that I share what I have so far here can help others if they wish to try and solve this.

I am using invisible buttons as "focus managers" which when focused triggers JS which will determine where the focus should go next. Apart from the fact that I have yet to find a way to get the next naturally focusable element, I think this achieve everything I outlined.

The only concerns I have is that using invisible buttons might not be SEO or Accessibility friendly (would appriciate if someone could chime in on that).

const menu = document.getElementById("menu");
const menu_option_buttons = Array.from(menu.querySelectorAll(".btn_option"));
const menu_focus_managers = Array.from(menu.querySelectorAll(".focus_manager"));
const menu_first_option_button = menu_option_buttons[0];
const menu_last_option_button = menu_option_buttons[menu_option_buttons.length - 1];
const menu_prev_focus_manager = menu_focus_managers[0];
const menu_next_focus_manager = menu_focus_managers[menu_focus_managers.length - 1];

const table = document.getElementById("table");
const table_option_buttons = Array.from(table.querySelectorAll(".btn_option"));
const table_focus_managers = Array.from(table.querySelectorAll(".focus_manager"));

table.addEventListener("click", (e) => {
  if (table_option_buttons.includes(e.target)) {
    e.stopPropagation();

    menu.style.top = e.target.getBoundingClientRect().top + "px";
    menu.style.display = "flex";
    menu.is_open = true;

    document.documentElement.addEventListener("click", (e) => {
      if (e.target !== menu && !menu.contains(e.target)) {
        menu.style.display = "none";
        menu.is_open = false;
      }
    });
  }
});

table.addEventListener("focusin", (e) => {
  if (table_focus_managers.includes(e.target)) {
    if (menu.is_open) {
      menu_first_option_button.focus();
    } else {
      console.log("focus next natural element in tab index")
    }
  }
});

menu.addEventListener("focusin", (e) => {
   if (e.target === menu_prev_focus_manager) {
     console.log("focus current rows option button")
  }
   if (e.target === menu_next_focus_manager) {
     console.log("focus next natural element in tab index relative to current rows option button")
  }
});

.table {
  overflow: hidden;
}
.table .row {
  display: flex;
  gap: 2rem;
  padding: 0.5rem 0;
  border-bottom: 0.0625rem solid #ccc;
}
.table .focus_manager {
  display: none;
  opacity: 0;
}
.table .row:focus-within .focus_manager {
  display: block;
}


.menu {
  display: none;
  position: absolute;
  left: 11rem;
  padding: 0.5rem;
  background: #ccc;
  flex-direction: column;
  gap: 0.5rem;
}
.menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: -0.75rem;
  width: 0;
  height: 0;
  border-top: 0.75rem solid transparent;
  border-bottom: 0.75rem solid transparent;
  border-right: 0.75rem solid #ccc;
}
.menu .focus_manager {
  opacity: 0;
}


button:focus {
  background: skyblue;
}

<div class="table" id="table">
  <div class="row">
    <span>Item 1</span>
    <button class="btn_option" type="button">Options</button>
    <button class="focus_manager" type="button"></button>
  </div>
  <div class="row">
    <span>Item 2</span>
    <button class="btn_option" type="button">Options</button>
    <button class="focus_manager" type="button"></button>
  </div>
  <div class="row">
    <span>Item 3</span>
    <button class="btn_option" type="button">Options</button>
    <button class="focus_manager" type="button"></button>
  </div>
  <div class="row">
    <span>Item 4</span>
    <button class="btn_option" type="button">Options</button>
    <button class="focus_manager" type="button"></button>
  </div>
  <div class="row">
    <span>Item 5</span>
    <button class="btn_option" type="button">Options</button>
    <button class="focus_manager" type="button"></button>
  </div>
</div>

<div class="menu" id="menu">
  <button type="button" class="focus_manager"></button>
  <button type="button" class="btn_option">View</button>
  <button type="button" class="btn_option">Edit</button>
  <button type="button" class="btn_option">Delete</button>
  <button type="button" class="focus_manager"></button>
</div>

<br><br><br>

<button type="button">Other Focuable Content</button>

(Edit)

I made some code changes like as below. So, when the "Options" button is clicked, it sets the focus on the first button inside the menu. This way, when you press the Tab key, the focus will move through the menu buttons, and when you reach the last menu button, the next Tab press will bring you back to the "Options" button in the next row.

<script>
    const menu = document.getElementById("menu");
    const table = document.getElementById("table");
    const option_buttons = Array.from(table.querySelectorAll(".btn_option"));

    table.addEventListener("click", (e) => {
      if (option_buttons.includes(e.target)) {
        e.stopPropagation();

        menu.style.top = e.target.getBoundingClientRect().top + "px";
        menu.style.display = "flex";

        // Focus the first button in the menu
        const menuButtons = menu.querySelectorAll("button");
        if (menuButtons.length > 0) {
          menuButtons[0].focus();
        }

        document.documentElement.addEventListener("click", (e) => {
          if (e.target !== menu && !menu.contains(e.target)) {
            menu.style.display = "none";
          }
        });
      }
    });
</script>

Please signup or login to give your own answer.

Click here to cancel reply.