Forem: Srijan Sharma

Building a Keyboard Accessible Custom Menu using Roving Tabindex

Srijan Sharma — Wed, 15 Dec 2021 00:10:10 +0000

Welcome to From Scratch, where we build solutions to commonly known problems, from scratch.

In this iteration, let's build a keyboard accessible menu component.

The Problems

Most front-end projects do end up needing a custom tailor-made solution for something like a drop-down or a menu. These solutions may end up looking really fancy and can lead to a unique touch for your app that users appreciate and recognize.

But, they are really not accessible by default. Try to use them with a keyboard or a screen reader and they fall apart, and can lead to your app being rendered completely unusable (forgive the pun 😉).

One of the main problems keyboard users face is that most custom menus do not handle focus very well/at all. Something like the behavior that can be seen below.

Notice how the focus just jumps when tabbing between our custom menu components. How do we select something inside the menu? This is really bad. What's the point of having a custom-made solution that is literally unusable?

The Functionality we want

Now, let's look at how we want our custom menu to behave with keyboard inputs.

Tab / Shift + Tab should allow us to jump between the whole menus, without the focus going inside a menu.
↑ and ↓ should allow us to navigate inside a menu.
Space should allow us to select/ perform an intended action that the focus is currently on (So, basically a click).
If we jump from a menu to another and then jump back, our initially selected element should be in focus already.

So, with our requirements compiled, let's see how we would go about making our component accessible.

The Solution

Before we look at our solution, let's first clear our fundamentals. By, default only interactive elements such as <button>, <a>, etc are focusable. But, how do we make any element focusable?

The `tabindex` attribute

Well, this is how. Setting the tabindex attribute on an element denotes that it can be focused when tabbing using a keyboard. It takes an integer, which decides the behavior

0 means that the element will be focusable in the order of the source document.
A positive number denotes that the element will be focusable and the order is dependent on the this value itself. So, elements with a tabindex="2" will be focused first before elements with a tabindex="1" and so on.
A negative number denotes that the element will not be focusable using the keyboard.

The strategy

First, we have to make sure that the top level element in our custom menu(let's say a div) has a tabindex="0" on it and the children have a tabindex="-1" on them.

<div class="menu" tabindex="0">
  <a href="https://google.com" target="_blank" tabindex="-1">Link to Google</a>
  <a href="#" tabindex="-1">Link</a>
  <a href="#" tabindex="-1">Link</a>
  <a href="#" tabindex="-1">Link</a>
  <a href="#" tabindex="-1">Link</a>
</div>
<div class="menu" tabindex="0"> 
  <a href="#" tabindex="-1">Link</a>
  <a href="#" tabindex="-1">Link</a>
  <a href="#" tabindex="-1">Link</a>
  <a href="#" tabindex="-1">Link</a>
  <a href="#" tabindex="-1">Link</a>
</div>

As soon the top level element is focused, We set tabindex="0" on its first child(by default) and programmatically focus it using element.focus().

Then, we can setup an event listener for the keydown event and handle ↑, ↓ and Space keys in our event handler.

When ↑ is pressed, we set tabindex="-1" on the currently focused element(say element N), and set tabindex="0" on the element before it(say element N-1). Now, we programmtically focus the N-1 element, which now becomes our focused element.

Now, we can do the same thing for ↓, just in the opposite direction. So, going from element N to element N+1.

Making it circular

So, we can now move focus up and down using the arrow keys, but, what happens if we hit the ↑ when we are on the first element and ↓ when we are on the last element.

To handle this edge case, we first check if the currently selected element is either the first element or the last element. If it is, we can just invert the focus when the key is pressed. So going from last element to first and first to last.

Putting it all together

JavaScript

const menuList = document.querySelectorAll(".menu");

menuList.forEach((menu) => {
  const children = Array.from(menu.children);
  let current = 0;
  const handleKeyDown = (e) => {
    if (!(["ArrowUp", "ArrowDown", "Space"].includes(e.code))) return;
    if(e.code === "Space") {
      children[current].click();
      return;
    }
    const selected = children[current];
    selected.setAttribute("tabindex", -1);
    let next;
    if (e.code === "ArrowDown") {
      next = current + 1;
      if (current == children.length - 1) {
        next = 0;
      }
    } else if ((e.code = "ArrowUp")) {
      next = current - 1;
      if (current == 0) {
        next = children.length - 1;
      }
    }
    children[next].setAttribute("tabindex", 0);
    children[next].focus();
    current = next;
  };

  menu.addEventListener("focus", (e) => {
    if (children.length > 0) {
      menu.setAttribute("tabindex", -1);
      children[current].setAttribute("tabindex", 0);
      children[current].focus();
    }

    menu.addEventListener("keydown", handleKeyDown);
  });

  menu.addEventListener("blur", (e) => {
    menu.removeEventListener("keydown", handleKeyDown);
  });
});

Result

See the Pen
Roving focus in a custom menu by Srijan Sharma (@srijans38)
on CodePen.

Accessing the Google Access Token in NextAuth.js

Srijan Sharma — Sun, 07 Feb 2021 20:45:27 +0000

NextAuth is an amazingly simple library for authentication in your Next.js application.
You just npm install next-auth, make a [...nextauth].js API route, specify your providers (Google, Spotify, etc.)
and you are good to go.

The Problem

This is all well and good for just authentication of users. But, what if we want to do more.
For an example, I was looking for a solution to authenticate with Google and get all the YouTube subsciptions that the
authenticated user has.

For this to happen, we would need the access token for the authenticated account. Let's look at how we would go
about doing this.

Basic Setup

You can find the accompanying repo here

First, we need a Next.js project that we can quickly bootstrap with npx create-next-app or yarn create next-app.

Then, add NextAuth with yarn add next-auth or npm install next-auth

Next, create a new API route for NextAuth at pages/api/auth/[...nextauth].js with the contents:

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      authorizationUrl:
        'https://accounts.google.com/o/oauth2/v2/auth?prompt=consent&access_type=offline&response_type=code',
      scope:
        'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/youtube.readonly',
    }),
  ],
  secret: process.env.SECRET,
});

We don't yet have a Client ID and Client Secret for Google OAuth 2, head to Google API Console to generate these.
Make sure you add http://localhost:3000/api/auth/callback/google as an authorized callback URL.

Once, generated add them to .env.local as environment variables, which Next.js should pickup automatically.

And, we also need a SECRET string (just generate a random string) as an env var that NextAuth recommends having.

Also, notice the scope parameter, which tells what kinds of data that we are requesting access for.

Let's get our pages/index.js setup. Replace all the boilerplate code with the contents below.

import { signIn, signOut, useSession } from 'next-auth/client';
...
export default function Home() {

  const [session, loadingSession] = useSession();

  return (
    <div>
      ...
      {!session && (
        <>
          <button onClick={() => signIn()}>Sign In</button>
        </>
      )}

      {session && (
        <>
          <button onClick={() => signOut()}>Sign Out</button>
          <p>
            <pre>{JSON.stringify(session, null, 2)}</pre>
          </p>
        </>
      )}
      ...
    </div>
}
...

If all goes well, You should now be able to login with Google.

The Solution

Among the various options provided in the NextAuth config object, there's one option called
callbacks. As mentioned in the Docs, Callbacks are asynchronous functions you can use to control what happens when an action is performed.
These are : Sign in, Redirect, Session and JWT. The JWT callback is what we are interested in.
It is an async function that receives token, user, account, profile and isNewUser as inputs.

The account object has the access token and refresh token and is only passed in on Sign In.

The token object is what is returned by default. Thus, by adding to this token object, we can forward whatever we need as part of the JWT. You can console.log for all the input objects to get what you need. In our case,we just need the access token.

The JWT callback inside the NextAuth options can be implemented as :

export default NextAuth({
  ...
  callbacks: {
      async jwt(token, user, account, profile, isNewUser) {
        if (account?.accessToken) {
          token.accessToken = account.accessToken;
        }
        return token;
      },
    },
  ...
});

Now, we are all set to use the access token for authenticating our requests to our desired Google API( YouTube Data API in this case) for private data.

We can do this in an API route pages/api/getYTData.js like:

import { getToken } from 'next-auth/jwt';

const secret = process.env.SECRET;
let accessToken;

export default async (req, res) => {
  const token = await getToken({ req, secret });

  accessToken = token.accessToken;

  const data = await getYTData();

  res.status(200).json(data);
};

Here, getToken function provided by NextAuth is used for decrypting the JWT. The getYTData function can be implemented by following the YouTube Data API Docs

This API route can now be used on the front-end with a fetch for /api/getYTData inside a useEffect or however you like to do data fetching. Just make to sure include credentials while fetching (with {credentials: 'include'} for fetch and {withCredentials: true} for axios).

The final result could something like this. Here, the list of YouTube subsciptions of the authorized user is fetched.

That's all for this one. You can find the repo for this post here and a working ( non-working because Google OAuth is in test mode for this) demo here.

Forem: Srijan Sharma

Building a Keyboard Accessible Custom Menu using Roving Tabindex

The Problems

The Functionality we want

The Solution

The tabindex attribute

The strategy

Making it circular

Putting it all together

JavaScript

Result

Accessing the Google Access Token in NextAuth.js

The Problem

Basic Setup

The Solution

The `tabindex` attribute