Writing semantic HTML is arguably the most important thing a developer can do to improve the accessibility of a website. User-friendly forms can often be tricky to design, especially if asking for a lot of information, so we need to make sure that the implementation is not creating more friction for our users.

## The basics

First, we need to pair our input with a label. We can either wrap the label around the input, or use the `for` and `id` attributes.

Option 1 (label wrapped around input):

```html
<label>
  First name:
  <input type="text">
</label>
```

Option 2 (the `for` attribute of the label matches the `id` of the form control):

<div class="codeTabs" filenames="HTML,React" label="Pairing an input with a label">

<div class="codeTab">

```html filename="HTML"
<label for="firstname">First name:</label>
<input type="text" id="firstname">
```

</div>

<div class="codeTab">

```html filename="React"
<label htmlFor="firstname">First name:</label>
<input type="text" id="firstname" />
```

</div>

</div>

Associating inputs with labels is important for screen reader users (so they know what information to enter), but also for sighted users; remember that labels should always be visible, even if the input has a value. So don't use placeholders as labels!

## The type attribute

In the example above, the input is for the user's first name, so we set the `type` as `text`. The `type` attribute lets the browser know what input to render and how the user can interact with it. Just because the value of an input is a string, it doesn't necessarily mean that the `type` should be `text`: it could also be `email`, `password`, `url`, or even `color`. The same thing applies to numbers: if we needed users to enter a phone number, we'd use `tel` instead of `number`. You can read more about input types in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types).

<div class="codeTabs" filenames="email,number,password,url, tel" label="Input types examples">

<div class="codeTab">

```html filename="email"
<label>
  Email address:
  <input type="email" />
</label>
```

</div>

<div class="codeTab">

```html filename="number"
<label>
  Quantity
  <input type="number" />
</label>
```

</div>

<div class="codeTab">

```html filename="password"
<label>
  Password
  <input type="password" />
</label>
```

</div>

<div class="codeTab">

```html filename="url"
<label>
  Website URL
  <input type="url" />
</label>
```

</div>

<div class="codeTab">

```html filename="tel"
<label>
  Phone number
  <input type="tel" />
</label>
```

</div>

</div>

## The required attribute

The `required` attribute marks the input as invalid when empty and prevents it from being submitted to the server.

```html
<label>
  Phone number (required)
  <input type="tel" required />
</label>
```

Note that even if you are handling your form validation with JavaScript, you should still use the `required` attribute where relevant, as it will allow screen readers to announce the input as required. You can then style your inputs using the `:valid` and `:invalid` CSS pseudo-classes.

Your form validation logic should also add the `aria-invalid` attribute to invalid inputs so they can be properly flagged by screen readers and other user agents.

## The inputmode attribute

If we set the `type` of an input, user agents might adapt the keyboard to the expected format; for example, the iOS keyboard for `email` inputs will typically include the "@" character. But that's not true for all input types; iOS just renders a regular keyboard for `number` inputs. In this case, we can use the `inputmode` attribute. We can set it to `numeric` to show the numeric keyboard with the digits 0-9, or we can set it to `decimal` to allow fractional numbers.
[Here's a good resource with screenshots of the different keyboards](https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/)

```html
<label>
  Phone number
  <input type="tel" inputmode="tel">
</label>
```

Note that unlike `type`, `inputmode` won't affect validation.

You can read more about the `inputmode` attribute in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).

## The autocomplete attribute

The last thing we can do to help our users fill our forms more quickly is adding autocomplete support. The `autocomplete` attribute allows user agents to idenfity the format of the expected value for an input, and pre-fill the values accordingly. This makes forms more efficient for all users, especially users that are attention deficit, have cognitive impairments, reduced mobility, low vision, or blind users.

`autocomplete` allows us to get a lot more specific than by just using `type`: a name field might have an autocomplete value of `name`, `given-name`, `additional-name`, `family-name`, or even `nickname`. But all of these would use a regular `text` input type.

A `password` field can also have multiple `autocomplete` values: `new-password` will let user agents and password managers know to generate a new password for your website, while `current-password` will fill the field with an existing password.

Ever wondered how your phone can pre-fill a one-time-code that was texted to you? This requires just one line of HTML: `autocomplete="one-time-code"`!

<div class="codeTabs" filenames="new-password,one-time-code" label="Input types examples">

<div class="codeTab">

```html filename="new-password"
<label>
  Password:
  <input
    type="password"
    autocomplete="new-password"
  />
</label>
```

</div>

<div class="codeTab">

```html filename="one-time-code"
<label>
  Authentication token:
  <input
    type="number"
    inputmode="numeric"
    autocomplete="one-time-code"
  />
</label>
```

</div>

</div>

The `autocomplete` attribute doesn't affect validation. You can read more about `autocomplete` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).

⚠️ A quick note about internationalisation: the concept of "first name" and "last name" is not international. So if you can, avoid breaking the name down into components, and just use `name` (or `username`).

## Additional attributes

Depending on the `type` of an input, there might be some additional attributes that we need to set. For example:
- `file` inputs have an `accept` attribute that lets us set the formats the input should accept (.png, .jpeg, .doc, .pdf, etc)
- `number` inputs can have a `min` and a `max` value
- `tel` inputs can have a `minlength` and a `maxlength`

<div class="codeTabs" filenames="image,number, tel" label="Additional attributes examples">

<div class="codeTab">

```html filename="image"
<label>
  Profile picture
  <input
    type="file"
    accept="image/png, image/jpeg"
  />
</label>
```

</div>

<div class="codeTab">

```html filename="number"
<label>
  Quantity
  <input
    type="number"
    inputmode="numeric"
    min="1"
    max="10"
  />
</label>
```

</div>

<div class="codeTab">

```html filename="tel"
<label>
  Phone number
  <input
    type="tel"
    inputmode="tel"
    minlength="8"
    maxlength="10"
  />
</label>
```

</div>

</div>

Some inputs will also accept the `pattern` attribute, which allows us to further restrict entered values so they also have to conform to a specific pattern, using a regular expression (RegEx).

```html
<label>
  Phone number (in the form XXX-XXX-XXXX):
  <input
    type="tel"
    inputmode="tel"
    pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  />
</label>
```

Accessible form inputs in HTML

Native HTML checkboxes look different accross browsers and don't allow for much customisation, which can be frustrating. In this article we'll look at how we can use pseudo elements to style checkboxes—I'll use a React example in order to add validation but this trick works in pure HTML and CSS so there is no JavaScript needed!

Before we dive in, I want to touch on the `accent-color` property. It allows us to set the accent colour for form controls, including radio buttons and checkboxes. In most situations, this property is enough (I would also recommending setting the checkbox size to a relative value so it scales with the font size). The rest of this tutorial will focus on a more complex solution, which is only required if you want to use a custom checkbox shape, including images.

```tsx filename="styles.css"
input[type="checkbox"] {
  accent-color: var(--primary);
  width: 1.2em;
  height: 1.2em;
}
```

## Markup

Before we add interaction to the elements, let's look at the skeleton of our form.

```tsx filename="Form.jsx"
const Form = () => {
  return (
    <form>
      <fieldset
        //  Let screen readers know when field is invalid
        aria-invalid="false"
        // And where to look for the error
        aria-describedby="hobbies-error"
      >
        <legend>Hobbies</legend>
        <label>
          Sleeping
          <input
            type="checkbox"
            name="hobbies"
            value="Sleeping"
          />
          <span className="checkmark" />
        </label>
        <label>
          Coding
          <input
            type="checkbox"
            name="hobbies"
            value="Coding"
          />
          <span className="checkmark" />
        </label>
        {/* This is where our error is going to go. We add role="alert" to the element so screen readers can announce it. */}
        <p className="error" id="hobbies-error" role="alert" aria-atomic="true">
        </p>
      </fieldset>
      <input type="submit" value="Submit" />
    </form>
  );
};
```

## Styles

Now we can hide the default checkbox and add our fake checkbox. Since the fake one is a sibling of the `input`, we can use the `~` selector to style the checkbox based on the input state.

```scss filename="checkbox.scss"
label {
  // We need position: relative on the label
  // to be able to position the checkbox
  position: relative;
  display: block;
  font-size: 1.6rem;
  // Since our checkbox width is 1.2em,
  // the line-height and the left padding
  // need to be at least 1.2em
  // We'll go for more to give it some breathing space
  line-height: 1.6;
  padding: 0 0 0 2em;
  // Since our input is inside the label, users
  // can click on the whole label to tick the checkbox
  // this is great for accessibility!
  cursor: pointer;
  user-select: none;

  // Spacing between the checkboxes
  & + label {
    margin-top: 8px;
  }

  // Hide the default input
  input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    cursor: pointer;

    // When the input is checked, update the 
    // background and colour of the fake checkbox
    &:checked ~ .checkmark {
      background-color: $text;

      &:after {
        opacity: 1;
        border-color: $white;
      }
    }

    // Change the checkmark opacity on focus
    &:focus-visible ~ .checkmark::after {
      opacity: 0.5;
    }
  }

  // Change the checkmark opacity when hovering
  // over the whole label
  &:hover input ~ .checkmark::after {
    opacity: 0.5;
  }
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.2em;
  width: 1.2em;
  border: 0.15em solid rgba(94, 82, 82, 0.7);
  border-radius: 4px;

  &:after {
    content: "";
    position: absolute;
    display: block;
    opacity: 0;
    // We use relative values to support Zoom
    left: 0.35em;
    top: 0.05em;
    width: 0.3em;
    height: 0.7em;
    border-color: $text;
    border-style: solid;
    // We create the checkmark using two invisible borders
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
  }
}
```

## Interaction

Let's say we have an array of four hobbies:

```tsx filename="hobbies.ts"
const hobbies = ["Hiking", "Reading", "Sleeping", "Coding"];
```

We can use `map()` to render our checkboxes:

<div class="codeTabs" filenames="Form.tsx,Checkbox.tsx" label="Form and Checkbox components code">

 <div class="codeTab">

```tsx filename="Form.tsx"
export default function Form() {
   // We create an array of boolean values
   // the same length as the hobbies array
   // [false, false, false, false]
   const [checkboxState, setCheckboxState] = useState(
    new Array(hobbies.length).fill(false)
  );
  const getSelectedHobbies = (selectedState: boolean[] = checkboxState) => {
    return hobbies.filter((hobby, hobbyIndex) => selectedState[hobbyIndex]);
  };

  let selectedHobbies = getSelectedHobbies();

  const onFieldChange = async (checkboxIndex: number) => {
    const updatedCheckedState = checkboxState.map((checked, index) =>
      index === checkboxIndex ? !checked : checked
    );

    setCheckboxState(updatedCheckedState);
  };

  return (
    <form>
      <fieldset
        aria-invalid="false"
        aria-describedby="hobbies-error"
      >
        <legend>Hobbies</legend>
        {hobbies.map((hobby, hobbyIndex) => (
          <Checkbox
            key={hobby}
            value={hobby}
            onChange={() => onFieldChange(hobbyIndex)}
          />
        ))}
        <p className="error" id="hobbies-error" role="alert" aria-atomic="true">
          {checkboxError}
        </p>
      </fieldset>
    </form>
  );
}
```

  </div>

   <div class="codeTab">

```tsx filename="Checkbox.tsx"
import type { ChangeEventHandler } from "react";

type CheckboxProps = {
  onChange: ChangeEventHandler<HTMLInputElement>;
  value: string;
};

const Checkbox = ({ onChange, value }: CheckboxProps) => {
  return (
    <>
      <label>
        {value}
        <input
          type="checkbox"
          name="hobbies"
          value={value}
          onChange={onChange}
        />
        <span className="checkmark" />
      </label>
    </>
  );
};

export default Checkbox;
```

  </div>

  </div>

Before we add a submit function to our `form`, let's make the field required and add some validation. We're going to use `yup`, so let's run `npm install yup` and create a `FormValidationSchema` file.

```tsx filename="FormValidationSchema.tsx"
import { array, object, string } from "yup";

export const formSchema = object({
  hobbies: array()
    .of(
      string().oneOf(
        ["Hiking", "Reading", "Sleeping", "Coding"],
        "Please select one of the available options."
      )
    )
    .min(1, "Please select at least one hobby.")
    .required("Please select at least one hobby.")
});
```

We can import our schema in `Form.tsx` and check if our fields are valid before submitting the form:

```tsx filename="Form.tsx"
export default function Form() {
  const [checkboxState, setCheckboxState] = useState(
    new Array(hobbies.length).fill(false)
  );
  const [checkboxError, setCheckboxError] = useState<string>("");
  const getSelectedHobbies = (selectedState: boolean[] = checkboxState) => {
    return hobbies.filter((hobby, hobbyIndex) => selectedState[hobbyIndex]);
  };

  let selectedHobbies = getSelectedHobbies();

  const submitForm = async (e: FormEvent) => {
    e.preventDefault();

    const isFormValid = await formSchema.isValid(
      { hobbies: selectedHobbies },
      {
        abortEarly: false
      }
    );

    if (isFormValid) {
      alert("Success!");
    } else {
      // If the form is invalid, check which fields are incorrect
      // In our case, it can only be the "hobbies" field
      formSchema
        .validate({ hobbies: selectedHobbies }, { abortEarly: false })
        .catch((err) => {
          const errors = err.inner.reduce(
            (acc: any, error: { path: any; message: any }) => {
              return {
                ...acc,
                [error.path]: error.message
              };
            },
            {}
          );

          if (errors.hobbies) {
            setCheckboxError(errors.hobbies);
          }
        });
    }
  };

  return (
    <form onSubmit={submitForm} noValidate>
      {* ... */}
    </form>
  );
}
```

We can improve the validation UX even more and remove the error as soon as the user selects an option by updating the `onFieldChange()` function:

```tsx filename="Form.tsx"
const onFieldChange = async (checkboxIndex: number) => {
  const updatedCheckedState = checkboxState.map((checked, index) =>
    index === checkboxIndex ? !checked : checked
  );

  setCheckboxState(updatedCheckedState);

  // Check if the form is valid now that the values have changed
  const isFormValid = await formSchema.isValid(
    { hobbies: getSelectedHobbies(updatedCheckedState) },
    {
      abortEarly: false, // Prevent aborting validation after first error
    }
  );

  // Remove checkbox error if needed
  if (checkboxError && isFormValid) {
    setCheckboxError("");
  }
};
```


```meta:tsx index.tsx hidden
import { render } from "react-dom";

import Form from "./Form";

const rootElement = document.getElementById("root");
render(<Form />, rootElement);
```

```meta:tsx Form.tsx active
import { useState } from "react";
import Checkbox from "./components/Checkbox";
import { formSchema } from "./validation/FormValidationSchema";

import type { FormEvent } from "react";

import "./styles/styles.scss";

const hobbies = ["Hiking", "Reading", "Sleeping", "Coding"];

export default function Form() {
  const [checkboxState, setCheckboxState] = useState(
    new Array(hobbies.length).fill(false)
  );
  const [checkboxError, setCheckboxError] = useState<string>("");

  const getSelectedHobbies = (selectedState: boolean[] = checkboxState) => {
    return hobbies.filter((hobby, hobbyIndex) => selectedState[hobbyIndex]);
  };

  let selectedHobbies = getSelectedHobbies();

  const onFieldChange = async (checkboxIndex: number) => {
    const updatedCheckedState = checkboxState.map((checked, index) =>
      index === checkboxIndex ? !checked : checked
    );

    setCheckboxState(updatedCheckedState);

    // Check if the form is valid now that the values have changed
    const isFormValid = await formSchema.isValid(
      { hobbies: getSelectedHobbies(updatedCheckedState) },
      {
        abortEarly: false // Prevent aborting validation after first error
      }
    );

    // Remove checkbox error if needed
    if (checkboxError && isFormValid) {
      setCheckboxError("");
    }
  };

  const submitForm = async (e: FormEvent) => {
    e.preventDefault();

    const isFormValid = await formSchema.isValid(
      { hobbies: selectedHobbies },
      {
        abortEarly: false
      }
    );

    if (isFormValid) {
      alert("Success!");
    } else {
      // If the form is invalid, check which fields are incorrect
      // In our case, it can only be the "hobbies" field
      formSchema
        .validate({ hobbies: selectedHobbies }, { abortEarly: false })
        .catch((err) => {
          const errors = err.inner.reduce(
            (acc: any, error: { path: any; message: any }) => {
              return {
                ...acc,
                [error.path]: error.message
              };
            },
            {}
          );

          if (errors.hobbies) {
            setCheckboxError(errors.hobbies);
          }
        });
    }
  };
  return (
    <form onSubmit={submitForm} noValidate>
      <fieldset
        // Let screen readers know when field is invalid
        aria-invalid={checkboxError ? "true" : "false"}
        // And where to look for the error
        aria-describedby="hobbies-error"
      >
        <legend>Hobbies</legend>
        {hobbies.map((hobby, hobbyIndex) => (
          <Checkbox
            key={hobby}
            value={hobby}
            onChange={() => onFieldChange(hobbyIndex)}
          />
        ))}
        {/* We set role="alert" on the error message */}
        <p className="error" id="hobbies-error" role="alert" aria-atomic="true">
          {checkboxError}
        </p>
      </fieldset>
      <input type="submit" value="Submit" />
      <output name="result" htmlFor="hobbies">
        <pre>
          <code>
            {JSON.stringify({ selectedHobbies, error: checkboxError })}
          </code>
        </pre>
      </output>
    </form>
  );
}
```

```meta:tsx validation/FormValidationSchema.tsx
import { array, object, string } from "yup";

export const formSchema = object({
  hobbies: array()
    .of(
      string().oneOf(
        ["Hiking", "Reading", "Sleeping", "Coding"],
        "Please select one of the available options."
      )
    )
    .min(1, "Please select at least one hobby.")
    .required("Please select at least one hobby.")
});
```

```meta:tsx components/Checkbox.tsx
import type { ChangeEventHandler } from "react";

type CheckboxProps = {
  onChange: ChangeEventHandler<HTMLInputElement>;
  value: string;
};

const Checkbox = ({ onChange, value }: CheckboxProps) => {
  return (
    <>
      <label>
        {value}
        <input
          type="checkbox"
          name="hobbies"
          value={value}
          onChange={onChange}
        />
        <span className="checkmark" />
      </label>
    </>
  );
};

export default Checkbox;
```

```meta:scss styles/styles.scss hidden
@import "additional-styles";
@import "checkbox";
```

```meta:scss styles/variables.scss hidden
$nav-gap: 8px;
$white: #fff;
$text: #5e5252;
$text-hover: #403434;
```

```meta:scss styles/additional-styles.scss hidden
/* These styles are for presentation purposes only,
they're not required for the component to work */

@import "variables";
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500&display=swap");

html {
  font-size: 62.5%;
}

html,
body {
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background-color: $white;
  color: $text;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 1.6rem;
}

#root {
  padding: 10vmin;
}

fieldset {
  appearance: none;
  margin: 24px 0 0 0;
  border: 2px solid $text;
  padding: 16px;
}

legend {
  font-weight: 600;
  font-size: 1.6rem;
}

label {
  color: $text;
  font-weight: 500;
}

input[type="submit"] {
  background-color: $text;
  border: none;
  color: $white;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: 12px;
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;

  &:hover, 
  &:focus-visible {
    background-color: $text-hover;
  }
}

pre {
  background-color: $text-hover;
  border-radius: 4px;
  margin-top: 24px;
  padding: 6px 12px;

  code {
    color: $white;
    font-family: "Inconsolata", monospace;
    white-space: normal;
  }
}
```

```meta:scss styles/checkbox.scss
@import "variables";

label {
  /* We need position: relative on the label
  to be able to position the checkbox */
  position: relative;
  display: block;
  font-size: 1.6rem;
  /* Since our checkbox width is 1.2em,
  the line-height and the left padding
  need to be at least 1.2em
  We'll go for more to give it some breathing space */
  line-height: 1.6;
  padding: 0 0 0 2em;
  /* Since our input is inside the label, users
  can click on the whole label to tick the checkbox
  this is great for accessibility! */
  cursor: pointer;
  user-select: none;

  /* Spacing between the checkboxes */
  & + label {
    margin-top: 8px;
  }

  /* Hide the default input */
  input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    cursor: pointer;

    /* When the input is checked, update the 
    background and colour of the fake checkbox */
    &:checked ~ .checkmark {
      background-color: $text;

      &:after {
        opacity: 1;
        border-color: $white;
      }
    }

    /* Change the checkmark opacity on focus */
    &:focus-visible ~ .checkmark::after {
      opacity: 0.5;
    }
  }

  /* Change the checkmark opacity when hovering
  over the whole label */
  &:hover input ~ .checkmark::after {
    opacity: 0.5;
  }
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.2em;
  width: 1.2em;
  border: 0.15em solid rgba(94, 82, 82, 0.7);
  border-radius: 4px;

  &:after {
    content: "";
    position: absolute;
    display: block;
    opacity: 0;
    /* We use relative values to support Zoom */
    left: 0.35em;
    top: 0.05em;
    width: 0.3em;
    height: 0.7em;
    border-color: $text;
    border-style: solid;
    /* We create the checkmark using two invisible borders */
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
  }
}
```

Add custom CSS to checkboxes without sacrificing functionality.

Accessible custom checkboxes

Maps in SASS/SCSS allow us to store pairs of keys and values, and make it easy to look up a value by its corresponding key. We can use a SASS map to generate variables for our projects.

## Creating the SCSS map

First, let's create our map. We have a list of 5 font weights, each with a name and a value.

```scss filename="_typography.scss"
$font-weights: (
  "regular": 400,
  "medium": 500,
  "semibold": 600,
  "bold": 700,
  "extrabold": 800,
);
```

## Generating the variables

Now, we just need to generate our variables. We want each variable to follow the same naming convention, so we can make it really simple:

```scss filename="_typography.scss"
:root {
  @each $weight, $value in $font-weights {
    --font-weight-#{$weight}: #{$value};
  }
}
```

The code above will compile to this:
```css filename="_typography.css"
:root {
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
   }
```

## Usage

To use my variables, I can simply write `font-weight: var(--font-weight-semibold)` (or another weight from my map).

```css
p {
  font-weight: var(--font-weight-regular);
}
```

This snippet has been useful when generating typography styles, as well as colour palettes. It adds a few lines of code but I think it makes it more readable, and it guarantees that your variable names are all consistent. Ultimately, this is really a matter of personal preference.
For our font weight variables, here's the difference between our code and plain old CSS:

<div class="codeTabs" filenames="_typography.scss,_typography.css" label="Setting CSS variables with and without the mixin">

 <div class="codeTab">

```scss filename="_typography.css"
:root {
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
   }
```

  </div>

   <div class="codeTab">

```css filename="_typography.scss"
$font-weights: (
  "regular": 400,
  "medium": 500,
  "semibold": 600,
  "bold": 700,
  "extrabold": 800,
);

@each $weight, $value in $font-weights {
  --font-weight-#{$weight}: #{$value};
}
```

  </div>

  </div>

To see an example with nested maps, have a look a the colour palette demo below.

```meta:jsx index.tsx hidden
import { render } from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
render(<App />, rootElement);
```

```meta:tsx App.tsx active
import "./styles/styles.scss";

export default function App() {
  return (
    <main>
      <ul className="button-group">
        <li>
          <button className="button-primary">Primary</button>
        </li>
        <li>
          <button className="button-secondary">Secondary</button>
        </li>
      </ul>
    </main>
  );
}
```

```meta:scss styles/additional-styles.scss hidden
/* These styles are for presentation purposes only,
they're not required for the component to work */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&display=swap");

html,
body {
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
}

html {
  background: #E0EAFC;  /* fallback */
  background: -webkit-linear-gradient(to right, #CFDEF3, #E0EAFC);
  background: linear-gradient(to right, #CFDEF3, #E0EAFC);
}

#root {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: white;
  border-radius: 8px;
  padding: 8px;
}

ul, li {
  list-style-type: none;
}

button {
  border-radius: 4px;
  border: none;
  color: white;
  cursor: pointer;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 1em;
  padding: 6px 12px;

  @media (prefers-reduced-motion: no-preference) {
    transition: all 0.1s ease-in;
  }
}
```

```meta:scss styles/theme.scss
/* Let's create our map */
$brand-colors: (
  "primary": (
    10: #fbeff7,
    20: #f8e6f2,
    30: #f4d9eb,
    40: #ecc8e0,
    50: #e2b1d2,
    60: #d793c0,
    70: #c64f9c,
    80: #c14394,
    90: #bd368a,
    100: #360f29,
  ),
  "secondary": (
    10: #f4f2fe,
    20: #ece9fc,
    30: #e3dffa,
    40: #d6d0f6,
    50: #c1b9ef,
    60: #a69ce6,
    70: #685bc8,
    80: #5f54ba,
    90: #524ba9,
    100: #1d1648,
  ),
);
```

```meta:scss styles/demo.scss
/* Import the map */
@import "theme.scss";

:root {
  @each $shade, $values in $brand-colors {
    @each $name, $hex in $values {
      /* Generate variable for each value
      ex: --brand-primary-10: #fbeff7; */
      --brand-#{$shade}-#{$name}: #{$hex};
    }
  }
}

/* We also want to generate our button styles */
@each $variant, $values in $brand-colors {
  .button-#{$variant} {
    /* The colours in our palette are designed
    for white foregroup text from step 70
    so we should use --brand-primary-70 */
    background-color: var(--brand-#{$variant}-70);

    &:hover {
      /* On hover, use a darker value */
      background-color: var(--brand-#{$variant}-90);
    }
  }
}
```

```meta:scss styles/styles.scss hidden
@import "demo.scss";
@import "additional-styles.scss";
```


A simple way to make your code more consistent and easily scalable.

Clean CSS variables using SASS maps

Tabs are used to display a set of sections of content one at a time. Each panel of content ("tab panel") has an associated button, that when activated, displays the panel. The [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel) include guidance on creating accessible tab components. We'll need to use the appropriate tags and WAI-ARIA roles, as well as giving users the ability to navigate between tabs with their keyboard arrows, the `Home` key, and the `End` key.

## Adding refs to the buttons

In order to move focus between the buttons, we need to add refs.

```tsx filename="Tabs.tsx"
  const tabsRefs = useRef<Array<HTMLButtonElement | null>>([]);

  return (
    <ul role="tablist">
      {tabs.map((tab, tabIndex) => (
        <li key={`${tab.label}-tab`}>
          <button
            ref={(el: HTMLButtonElement) => (tabsRefs.current[tabIndex] = el)}
          >
            {tab.label}
          </button>
        </li>
      ))}
    </ul>
  );
```

## Updating the active tab

When updating the active tab, we use the refs to move focus to the corresponding button. We'll also need to change some of the buttons props depending on their current state so we'll store the active tab index with `useState`.

```tsx filename="Tabs.tsx"
  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);

  const activateTab = (newTabIndex: number) => {
    /* Focus new tab button */
    tabsRefs?.current[newTabIndex]?.focus();
    /* Set new tab as active */
    setActiveTabIndex(newTabIndex);
  };
```

## Handle key press

First, we add an `onKeyDown` event listener to our buttons.

```tsx filename="Tabs.tsx"
  <button
    onKeyDown={(event: KeyboardEvent<HTMLButtonElement>) => onKeyPressed(event, tabIndex) }
  >
      {tab.label}
  </button>
```

\
Here's our `onKeyPress` function. If the tab list has its `aria-orientation` set to vertical, replace `ArrowRight` and `ArrowLeft` with `ArrowDown` and `ArrowUp`:

```tsx filename="Tabs.tsx"
  const onKeyPressed = (
    event: KeyboardEvent<HTMLButtonElement>,
    tabIndex: number
  ) => {
    const shouldGoToNextTab = event.key === "ArrowRight";
    const shouldGoToPreviousTab = event.key === "ArrowLeft";
    const shouldGoToFirstTab = event.key === "Home";
    const shouldGoToLastTab = event.key === "End";

    const prevTab = tabIndex - 1;
    const nextTab = tabIndex + 1;
    const lastTab = totalTabs - 1;

    if (shouldGoToNextTab) {
      /* If the current active tab is the last, go the the first tab */
      if (tabIndex >= totalTabs - 1) {
        activateTab(0);
      } else {
        activateTab(nextTab);
      }
    } else if (shouldGoToPreviousTab) {
      /* If the current active tab is the first, go the the last tab */
      if (tabIndex <= 0) {
        activateTab(lastTab);
      } else {
        activateTab(prevTab);
      }
    } else if (shouldGoToFirstTab) {
      activateTab(0);
    } else if (shouldGoToLastTab) {
      activateTab(lastTab);
    } else {
      return null;
    }
  };
```

## Tags and WAI-ARIA Roles

| Tag      | Element | Description |
| ----------- | ----------- | ----------- |
| `role="tablist"`      | Parent       | Indicates a list of tab elements, which are references to tabpanel elements |
| `aria-label`   | Parent        | Tabs label       |
| `role="tab"`      | Button       | Indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel |
| `aria-selected`   | Button        | Set as `"true"` or `"false"` to indicate the current active tab |
| `aria-controls`   | Button        | Set to the corresponding panel `id` to indicate the relationship between the two |
| `id`   | Button        | Set a unique ID for each button and panel |
| `tabIndex`   | Button        | Set as `0` or `-1` depending on the active tab |
| `tabIndex`   | Panel        | Set as `0` or `-1` depending on the active tab |
| `role="tabpanel"`   | Panel        | Indicates an element that contains the content associated with a tab |
| `id`   | Panel        | Set a unique ID for each button and panel |
| `aria-labelledby`   | Panel        | Set to the corresponding button `id` to indicate the relationship between the two |

## WAI-ARIA Guidelines

- [x] When focus moves into the tab list, pressing the `Tab` key places focus on the active tab element.
- [x] When the tab list contains the focus, pressing the `Tab` key moves focus to the next element in the tab sequence, which is the tabpanel element.
- [x] Pressing the right arrow while a link is focused moves focus to the next tab. If focus is on the last tab, moves focus to the first tab. The newly focused tab is active.
- [x] Pressing the left arrow while a link is focused moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. The newly focused tab is active.
- [x] Pressing the `Home` key when a tab has focus moves focus to the first tab.
- [x] Pressing the `End` key when a tab has focus moves focus to the last tab.

[View design pattern](https://www.w3.org/TR/wai-aria-practices/#tabpanel)

```meta:jsx index.tsx hidden
import { render } from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
render(<App />, rootElement);
```

```meta:tsx App.tsx active
import { useRef, useState, KeyboardEvent } from "react";
import { tabs } from "./constants";

import "./styles/styles.scss";

export default function App() {
  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
  const tabsRefs = useRef<Array<HTMLButtonElement | null>>([]);

  const totalTabs = tabs.length;

  const activateTab = (newTabIndex: number) => {
    /* Focus new tab button */
    tabsRefs?.current[newTabIndex]?.focus();
    /* Set new tab as active */
    setActiveTabIndex(newTabIndex);
  };

  const onKeyPressed = (
    event: KeyboardEvent<HTMLButtonElement>,
    tabIndex: number
  ) => {
    const shouldGoToNextTab = event.key === "ArrowRight";
    const shouldGoToPreviousTab = event.key === "ArrowLeft";
    const shouldGoToFirstTab = event.key === "Home";
    const shouldGoToLastTab = event.key === "End";

    const prevTab = tabIndex - 1;
    const nextTab = tabIndex + 1;
    const lastTab = totalTabs - 1;

    if (shouldGoToNextTab) {
      if (tabIndex >= totalTabs - 1) {
        activateTab(0);
      } else {
        activateTab(nextTab);
      }
    } else if (shouldGoToPreviousTab) {
      if (tabIndex <= 0) {
        activateTab(lastTab);
      } else {
        activateTab(prevTab);
      }
    } else if (shouldGoToFirstTab) {
      activateTab(0);
    } else if (shouldGoToLastTab) {
      activateTab(lastTab);
    } else {
      return null;
    }
  };

  return (
    <div className="tabs">
      <ul role="tablist" aria-label="The Grand Budapest Hotel characters">
        {tabs.map((tab, tabIndex) => {
          const { id, label } = tab;
          return (
            <li key={`${id}-tab`}>
              <button
                type="button"
                role="tab"
                aria-selected={tabIndex === activeTabIndex ? "true" : "false"}
                aria-controls={`${id}-tab`}
                id={id}
                tabIndex={tabIndex === activeTabIndex ? 0 : -1}
                ref={(el: HTMLButtonElement) =>
                  (tabsRefs.current[tabIndex] = el)
                }
                onKeyDown={(event: KeyboardEvent<HTMLButtonElement>) =>
                  onKeyPressed(event, tabIndex)
                }
                onClick={() => activateTab(tabIndex)}
              >
                {label}
              </button>
            </li>
          );
        })}
      </ul>
      {tabs.map((tab, tabIndex) => {
        const { id, content } = tab;
        return (
          <div
            tabIndex={0}
            role="tabpanel"
            id={`${id}-tab`}
            key={`${id}-panel`}
            aria-labelledby={id}
            className={tabIndex === activeTabIndex ? "" : "isHidden"}
          >
            <p>{content}</p>
          </div>
        );
      })}
    </div>
  );
}
```

```meta:ts constants.ts
export const tabs = [
  {
    id: "gustave",
    label: "Monsieur Gustave",
    content:
      "Monsieur Gustave holds the position of concierge at the Grand Budapest Hotel. He makes sure everyone on staff is doing their duty, and all the guests are enjoying themselves to the utmost of comfort. Monsieur Gustave makes an inspirational speech in front of the breakfasting hotel staffs every morning but the speech is usually end up as reading a poetry."
  },
  {
    id: "henckels",
    label: "Henckels",
    content:
      "Henckels was captain of the Lutz border patrol and friend of Monsieur Gustave. He was responsible for recapturing him when he escaped prison. Henckels is presumed to be dead at the end of the film after the card he used to save Zero was torn up. As a child, he visited the hotel and remembers Monsieur Gustave, which gives him a certain fondness for the dutiful concierge."
  },
  {
    id: "serge",
    label: "Serge",
    content:
      "Serge is the chief male servant of a Desgoffe-und-Taxis household who has charge of other employees, receives guests, directs the serving of meals, and performs various personal services. He accuses Monsieur Gustave of murdering Madame D., because of Dmitri's pressure and threatening."
  }
];
```

```meta:scss styles/additional-styles.scss hidden
/* These styles are for presentation purposes only,
they're not required for the component to work */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&display=swap");

html,
body {
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
}

html {
  background: #E0EAFC;  /* fallback */
  background: -webkit-linear-gradient(to right, #CFDEF3, #E0EAFC);
  background: linear-gradient(to right, #CFDEF3, #E0EAFC);
}

#root {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
}

.tabs {
  width: 100%;
  max-width: 40em;
  font-family: "IBM Plex Sans", sans-serif;
}

[role="tab"] {
  border-radius: 0.2rem 0.2rem 0 0;

  /* Add top border */
  &:hover::before,
  &:focus::before,
  &[aria-selected="true"]::before {
    border-radius: 0.2rem 0.2rem 0 0;
  }
}

[role="tabpanel"] {
  border-radius: 0 0.2rem 0.2rem 0.2rem;

  p {
    margin: 0;
    line-height: 150%;
  }

  * + p {
    margin-top: 1em;
  }
}
```

```meta:scss styles/demo.scss
$primary: #006adc;
$primary-light: rgba(0, 106, 220, 0.15);
$tab-bg: rgba(255, 255, 255, 0.65);

[role="tab"] {
  position: relative;
  padding: 0.5rem 1rem;

  /* Reset button styles */
  border: none;
  font-family: inherit;
  font-size: inherit;
  background-color: rgba(255, 255, 255, 0.3);

  /* Active tab button */
  &[aria-selected="true"] {
    background-color: $tab-bg;
    font-weight: 500;
  }

  /* Remove default focus styles */
  &:focus,
  &:active {
    outline: 0;
  }

  /* Add top border */
  &:hover::before,
  &:focus::before,
  &[aria-selected="true"]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-top: 3px solid $primary;
  }

  /* Inactive tabs */
  &[aria-selected="false"] {
    &:hover,
    &:focus {
    background-color: $primary-light;
    color: $primary;
    cursor: pointer;
  }
 }
}

[role="tabpanel"] {
  position: relative;
  z-index: 2;
  padding: 1rem;
  background-color: $tab-bg;

  /* Hide tab panel when inacttive */
  &.isHidden {
    display: none;
  }
}

[role="tablist"] {
  list-style-type: none;
  margin: 0;
  padding: 0;

  li {
    display: inline;
  }
}
```

```meta:scss styles/styles.scss hidden
@import "demo.scss";
@import "additional-styles.scss";
```


Add keyboard navigation support for tab components in React & Typescript.

Accessible tab panels in React

Mixins are easier to memorise than media queries and they can be a great way to manage your breakpoints. Here's a breakdown of the mixin I use in most of my projects.

## The mixin

First, let's create our mixin. We want to accept numbers for our min and max values, since media queries use pixel values. For example, a `min` value of `800` would compile to `@media (min-width: 800px)`. We also need to set the default values to 0, so we know not to compile parts of the media query we don't need.

```scss filename="mixins.scss"
@mixin breakpoint($min: 0, $max: 0) {
  $query: "all";
  $minValue: #{$min}px;
  $maxValue: #{$max}px;

  @if $max == 0 {
    $query: "(min-width: #{$minValue})";
  } @else if $min == 0 {
    $query: "(max-width: #{$maxValue})";
  } @else {
    $query: "(min-width: #{$minValue}) and (max-width: #{$maxValue})";
  }

  @media #{$query} {
    @content;
  }
}
```

## Usage

<div class="codeTabs" filenames="styles.scss,compiled.css" label="Breakpoint mixin compiled code">
 <div class="codeTab">

```scss filename="styles.scss"
@include breakpoint(0, 399.98) {
  /* Your styles here */
}

@include breakpoint(400, 799.98) {
  /* Your styles here */
}

@include breakpoint(800) {
  /* Your styles here */
}
```
  </div>
  <div class="codeTab">

```css filename="compiled.css"
@media (max-width: 399.98px) {
  /* Your styles here */
}

@media (min-width: 400px) and (max-width: 799.98px) {
  /* Your styles here */
}

@media (min-width: 800px) {
  /* Your styles here */
}
```
  </div>
  </div>

You'll notice that I write generic first CSS, rather than mobile first (the industry standard). The main reason behind that decision is that it makes debugging easier (since there are less overrides), and the performance is either the same as mobile first, or slightly faster. So better DX AND better UX! [Read more about generic first code perfomance](https://www.smashingmagazine.com/2018/12/generic-css-mobile-first/#performance-implications)

## Setting pre-defined breakpoints

If you always use the same breakpoints, or if you use a library like Bootstrap, it can be helpful to set some pre-defined values. First, let's save our breakpoints using a [SASS map](https://sass-lang.com/documentation/values/maps). For example, if using Bootstrap, we can accept string values that match the 5 Bootstrap breakpoints: `xs`, `sm`, `md`, `lg`, and `xl`.

```scss filename="mixins.scss"
@mixin breakpoint($min: 0, $max: 0) {
  /* List all accepted values */
  $known-breakpoints: xs, sm, md, lg, xl;

  /* We need to add some errors if one of the values is unknown, 
  for example if you tried to use "small" instead of "sm". */
  @if not index($known-breakpoints, $min) and type-of($min) != number {
    @error "Unknown breakpoint #{$min}.";
  }

  @if not index($known-breakpoints, $max) and type-of($max) != number {
    @error "Unknown breakpoint #{$max}.";
  }

  $query: "all";
  $minValue: 0;
  $maxValue: 0;

  /* Set our breakpoints using SASS Maps
  https://getbootstrap.com/docs/5.0/layout/breakpoints/
  https://sass-lang.com/documentation/values/maps */
  $minBreakpoints: (
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
  );

  $maxBreakpoints: (
    xs: 575.98px,
    sm: 767.98px,
    md: 991.98px,
    lg: 1199.98px,
  );

  /* If the provided value is a string, get the
  corresponding pixel value from the maps above */
  @if type-of($min) == string {
    $minValue: map-get($minBreakpoints, $min);
  } @else if type-of($min) == number {
    $minValue: #{$min}px;
  }

  @if type-of($max) == string {
    $maxValue: map-get($maxBreakpoints, $max);
  } @else if type-of($max) == number {
    $maxValue: #{$max}px;
  }

  @if $max == 0 {
    $query: "(min-width: #{$minValue})";
  } @else if $min == 0 {
    $query: "(max-width: #{$maxValue})";
  } @else {
    $query: "(min-width: #{$minValue}) and (max-width: #{$maxValue})";
  }

  @media #{$query} {
    @content;
  }
}
```

## Usage with pre-defined breakpoints

<div class="codeTabs" filenames="styles.scss,compiled.css" label="Breakpoint mixin with pre-defined values compiled code">

 <div class="codeTab">

```scss filename="styles.scss"
@include breakpoint(0, xs) {
  /* Your styles here */
}

@include breakpoint(sm, md) {
  /* Your styles here */
}

@include breakpoint(lg) {
  /* Your styles here */
}

/* You can still use numbers: */
@include breakpoint(sm, 799.98) {
  /* Your styles here */
}
```

  </div>

   <div class="codeTab">

```css filename="compiled.css"
@media (max-width: 575.98px) {
  /* Your styles here */
}

@include breakpoint(576px, 991.98px) {
  /* Your styles here */
}

@include breakpoint(992px) {
  /* Your styles here */
}

/* You can still use numbers: */
@include breakpoint(576px, 799.98) {
  /* Your styles here */
}
```

  </div>

  </div>


The SCSS mixin I use for handling breakpoints in most of my projects.

My breakpoint SCSS mixin

When a user interacts with your website using a keyboard, they might have to tab through your navigation links before getting to the main content. We want to give keyboard-only users the option to skip the navigation, without affecting the experience for other users. To do this, we can hide the skip navigation link until it's focused.

## Markup

First, we need to properly set up our HTML. Let's add a unique `id` to your main content container, excluding the navigation.

```html filename="index.html"
<nav>...</nav>
<main id="mainContent">...</main>
```

\
Our skip navigation link should have a clear CTA, and we use the `id` we set previously as the destination.

```html filename="index.html"
<a id="skiptocontent" href="#mainContent">Skip to main content</a>
```

## Styles

Now we can style the link and animate in on focus. Here it's fading in from the top of the screen but feel free to tinker or remove the animation.

```css filename="styles.css"
#skiptocontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 250ms ease-out;

  &:focus {
    opacity: 1;
    transform: translateY(0);
  }
}
```

## WCAG Success Criteria

- [x] A link is the first focusable control on the Web page.
- [x] The description of the link communicates that it links to the main content.
- [x] The link is either always visible or visible when it has keyboard focus.
- [x] Activating the link moves the focus to the main content.
- [x] After activating the link, the keyboard focus has moved to the main content.

[View full criteria](https://www.w3.org/TR/WCAG20-TECHS/G1.html)

## Notes

If you decide to animate the skip navigation link, make sure to respect your users' browser preferences and disable animations when requested.

```css filename="styles.css"
#skiptocontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200; 
  opacity: 0;
  transform: translateY(-100%);

  @media (prefers-reduced-motion: no-preference) {
    transition: all 250ms ease-out;
  }

  &:focus {
    opacity: 1;
    transform: translateY(0);
  }
}
```

\
You can also disable every animation on your website like so:

```css filename="styles.css"
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
```


```meta:jsx index.tsx hidden
import { render } from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
render(<App />, rootElement);
```

```meta:tsx App.tsx active
import { Toaster } from "react-hot-toast";
import { Navigation } from "./components";
import { useDemoProps } from "./hooks";

import "./styles/styles.scss";

export default function App() {
  const { demoLinkProps, demoTriggerProps } = useDemoProps();

  return (
    <>
      <a
        id="skiptocontent"
        href="#mainContent"
        // The following props are for demo purposes only
        // DO NOT copy the following line
        {...demoLinkProps}
      >
        Skip to main content
      </a>
      <Navigation />
      <main id="mainContent">
        <h1>Main content</h1>
        <p>
          Use your keyboard's <kbd>Tab</kbd> key to show or hide the skip
          navigation button. You might be running into some issues with the tab
          order since this demo is in an iframe.
          <button {...demoTriggerProps}>
            Click here to manually trigger focus on the button.
          </button>
        </p>
        <p>
          If you press your keyboard's enter key while the button is focused, it
          will move focus to the main content and ignore the nav links above.
        </p>
        <Toaster />
      </main>
    </>
  );
}
```

```meta:scss styles.scss hidden
#skiptocontent a {
  /* font-family: $paragraph;
  font-weight: $font-weight-regular; */
  font-size: 1.8rem;
  line-height: 140%;
  /* color: $text-light;
  letter-spacing: $letter-spacing-paragraph; */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  /* color: $white;
    background: $focus-bg;
    border-bottom-right-radius: $container-radius-sm; */
  padding: 0.4rem 0.8rem;
  font-size: 1.6rem;
  transition: all 250ms ease-out;
  transform: translateY(-100%);
  opacity: 0;

  &:focus {
    transform: translateY(0);
    opacity: 1;
  }
}
```

```meta:scss styles/additional-styles.scss hidden
/* These styles are for presentation purposes only,
they're not required for the component to work */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500&display=swap");

$nav-gap: 8px;

html,
body {
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
}

#skiptocontent {
  padding: 0.4rem 0.8rem;
  font-weight: 400;
  font-size: 1em;
  line-height: 140%;
  color: #f5f7fb;
  background-color: #ed5497;
  border-bottom-right-radius: 6px;
  text-decoration: none;

  &:focus {
    outline: none;
  }
}

h1,
p,
a,
li {
  font-family: "IBM Plex Sans", sans-serif;
  line-height: 160%;
}

nav {
  width: 100%;
  padding: 4px 16px;
  background-color: #f5f7fb;
}

ul {
  display: flex;
  flex-wrap: wrap;
  gap: $nav-gap;
  list-style-type: none;
  padding: 0;

  li + li {
    position: relative;

    &:before {
      content: "|";
      display: inline-block;
      margin-right: $nav-gap;
    }
  }
}

button,
ul li a {
  color: #cd1d8d;
  text-decoration: none;
  border-bottom: 2px solid transparent;

  &:focus,
  &:focus-visible,
  &:hover {
    background-color: #fce5f3;
    border-bottom-color: #cd1d8d;
    outline: none;
  }
}

button {
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
  font-family: "IBM Plex Sans", sans-serif;
  cursor: pointer;
  font-size: 1em;
  background-color: transparent;
}

main {
  padding: 16px;
}

.toast {
  font-family: "IBM Plex Sans", sans-serif;
  line-height: 140%;
}

kbd {
  font-family: "Inconsolata", monospace;
  font-weight: 500;
  background-color: #f5f7fb;
  padding: 0 4px;
  border-radius: 2px;
}
```

```meta:scss styles/demo.scss
#skiptocontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  transition: all 250ms ease-out;
  transform: translateY(-100%);
  opacity: 0;

  &:focus {
    transform: translateY(0);
    opacity: 1;
  }
}
```

```meta:scss styles/styles.scss hidden
@import "demo.scss";
@import "additional-styles.scss";
```

```meta:ts hooks/useDemoProps.ts hidden
/* PLEASE READ: These props are for demo purposes
only and should NOT be used in your actual code */

import { useRef } from "react";
import toast from "react-hot-toast";

export const useDemoProps = () => {
  const skipToContentRef = useRef<HTMLAnchorElement | null>(null);

  const notify = () =>
    toast.success(
      "Success! Your keyboard focus is now within the main content area.",
      {
        duration: 4000,
        position: "top-right",
        iconTheme: {
          primary: "#CD1D8D",
          secondary: "#fff",
        },
        className: "toast",
      }
    );

  const triggerFocus = () => {
    if (skipToContentRef?.current) {
      skipToContentRef.current.focus();
    }
  };

  return {
    demoLinkProps: {
      ref: skipToContentRef,
      onClick: () => notify(),
    },
    demoTriggerProps: { onClick: () => triggerFocus() },
  };
};
```

```meta:ts hooks/index.ts hidden
export { useDemoProps } from "./useDemoProps";
```

```meta:tsx components/Navigation.tsx hidden
const Navigation = () => {
  return (
    <nav>
      <ul>
        <li>
          <a href="/">Nav link 1</a>
        </li>
        <li>
          <a href="/">Nav link 2</a>
        </li>
        <li>
          <a href="/">Nav link 3</a>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;
```

```meta:ts components/index.ts hidden
export { default as Navigation } from "./Navigation";
```


Give keyboard-only users the option to skip navigation links and move focus to the main content.

All snippets

Accessible form inputs in HTML

Accessible custom checkboxes

Clean CSS variables using SASS maps

Accessible tab panels in React

My breakpoint SCSS mixin

Add a ‘skip to content’ link to your website