useTabIndex provider and hook

[bashleigh]

Create a provider and hook to return a referenced sequential number to be used within aria label tab index.

Use the useRef method to create a reference to be updated within a function returned from the useTabIndex hook.

Something like so

export const useTabIndex = () => {
  const tabIndexRef = useRef(0)

  const tabIndex = () => {
    tabIndexValue = tabIndexRef.value
    tabIndexRef.value++

    return tabIndexValue
  }

  return { tabIndex }
}

This would then be usable within a component like so

import { useTabIndex } from '@reapit/elements'

export const MyLinkComponent = () => {
  const { tabIndex } = useTabIndex()

  return (<a tabindex={tabIndex()}>my link</a>)
}

A provider wrapper would be preferably not desired but if it can't be done without one then use one

Above approach will not work for the entire project. It'll have to be done using local storage

import { useState, useEffect } from 'react';

function useUniqueNumber() {
  const [number, setNumber] = useState(() => {
    // Get the current number from localStorage
    const currentNumber = Number(localStorage.getItem('uniqueNumber') || 0);
    // Increment the number
    const newNumber = currentNumber + 1;
    // Store the new number in localStorage
    localStorage.setItem('uniqueNumber', newNumber.toString());
    // Return the new number
    return newNumber;
  });

  useEffect(() => {
    // Update the number in localStorage when the number state changes
    localStorage.setItem('uniqueNumber', number.toString());
  }, [number]);

  return number;
}

[willmcvay]

@bashleigh Don't think this is going to work - AXE standards do not permit a tab index greater than 0 - see https://dequeuniversity.com/rules/axe/4.8/tabindex?application=axeAPI

Any thoughts or should we close?

[adrian-reapit]

I would avoid numbered tab index. It shouldn't be necessary in our type of sites

[kurtdoherty]

I agree. Similar to the AXE standards, MDN docs suggest tabindex="0" and tabindex="-1" are the only values that should be used.