DEV Community: Aaron Cohen

Accessible Component Series: Common Patterns - Accordions

Aaron Cohen — Mon, 10 Jan 2022 05:57:32 +0000

Intro

About this series

Web accessibility is often overlooked by developers. As such, this series is intended to serve as how-two for developers to implement commonly used patterns with accessibility in mind.

We'll be using React, Typescript and Framer Motion throughout this series.

I have another post, available here, highlighting a number of reasons why I think developers should put more emphasis on accessibility.

If you're interested in finding other articles in this series, you can refer to this post which I'll continue to update as new posts go live.

What we're building

In this post, I'll be going through the ins-and-outs of building an Accordion. Common usages include FAQs, Product Description Sections, etc..

Assumptions

This post assumes knowledge of JavaScript, React, and a tiny bit of TypeScript. Even if you're not up to speed on Typescript, you should have no issue following along. We'll also be using Framer Motion to improve the UX of our animations.

A quick note on Accessibility + ARIA Attributes

It's incredibly important to how understand how and why specific ARIA Attributes are being used. ARIA Attributes, when used incorrectly, can potentially make a user's experience even worse.

TL;DR

If you want to dive right in and take a look under the hood, you can check out the final result on CodeSandbox or toy with the finished version below:

🔧 Let's get building

1. The Accordion Container

First, let's setup our base Accordion component:

// src/components/Accordion.tsx

import React from "react";

import { AccordionItem } from "components/Accordion/AccordionItem";

// Component Props
interface Props {
  defaultIndex?: number;
  sections: Array<{
    title: string;
    body: string;
  }>;
}

const Accordion: React.FC<Props> = ({ defaultIndex = -1, sections = [] }) => {
  // Used to track the currently active (open) accordion item
  // Note: If we pass in -1, all items will be closed by default
  const [activeIndex, setActiveIndex] = React.useState(defaultIndex);

  // A handler for setting active accordion item
  const handleSetActiveIndex = (n: number) => {
    // If the user clicks the active accordion item, close it
    if (n === activeIndex) setActiveIndex(-1);
    // Otherwise set the clicked item to active
    else setActiveIndex(n);
  };

  return (
    <ul className="accordion">
      {sections.map((s, idx) => (
        <AccordionItem
          key={s.title}
          item={s}
          idx={idx}
          activeIndex={activeIndex}
          handleClick={handleSetActiveIndex}
        />
      ))}
    </ul>
  );
};

export { Accordion };

Nothing special or out of the ordinary here. Simply tracking state via activeIndex and iterating over our sections, passed in via props, and returning our AccordionItem component defined in the next step below.

2. The Accordion Item

// src/components/Accordion/AccordionItem.tsx

import React from "react";
import { AnimatePresence, useReducedMotion, m } from "framer-motion";

import { SVG } from "components/SVG";

// Component Props
interface Props {
  idx: number;
  activeIndex: number;
  item: { title: string; body: string };
  handleClick: (n: number) => void;
}

const AccordionItem: React.FC<Props> = ({
  item,
  idx,
  activeIndex,
  handleClick
}) => {
  // Get browser's reduce motion setting
  const shouldReduceMotion = useReducedMotion();
  // Active State
  const active = idx === activeIndex;
  // Button ID : Must be unique to each accordion.
  const buttonId = `button-${idx}`;
  // Panel ID : Must be unique to each accordion
  const panelId = `panel-${idx}`;

  // Framer Motion Variants
  const variants = {
    active: { height: "auto", marginTop: "1rem" },
    inactive: { height: 0, marginTop: "0rem" }
  };

  // If browser's reduce motion settings are true, respect them otherwise use default animation
  const transition = shouldReduceMotion ? { type: "just" } : undefined;

  return (
    <li className="accordion__item">
      <button
        id={buttonId}
        // Aria Controls - Denotes what element this element controls
        aria-controls={panelId}
        // Aria Expanded - Denotes the expanded state of the element this element controls
        aria-expanded={active}
        // On Click, pass the index back up to the parent component
        onClick={() => handleClick(idx)}
      >
        <span className="t-heading">{item.title}</span>
        <SVG.PlusMinus active={active} />
      </button>
      <AnimatePresence>
        {active && (
          <m.div
            id={panelId}
            // Aria Labelled By - Denotes what element this element is controlled by
            aria-labelledby={buttonId}
            initial={"inactive"}
            animate={"active"}
            exit={"inactive"}
            variants={variants}
            transition={transition}
          >
            <p>{item.body}</p>
          </m.div>
        )}
      </AnimatePresence>
    </li>
  );
};

export { AccordionItem };

Here we're getting into some real accessibility-related topics, namely the use of aria-controls, aria-expanded, and aria-labelledby. Links for further information are found in the Accessibility Resources & References section below.

In short, we're using some IDs, unique to this list, to create relationships between button elements and div elements. This is a bit of a contrived example and if this were to be used in production, it would be wise to ensure IDs are unique to the entire page to avoid conflicts.

We're also using a few helpers from Framer Motion. The useReducedMotion hook to helps us decide which animation to use when transitioning between states. The AnimatePresence component helps us smoothly mount and un-mount a given accordion panel.

3. SVG Indicator

// src/components/SVG/PlusMinus.tsx

import React from "react";
import { m, useReducedMotion } from "framer-motion";

const variants = {
  active: { rotate: 90 },
  inactive: { rotate: 0 }
};

interface SVGProps {
  className?: string;
  active: boolean;
}

const PlusMinus: React.FC<SVGProps> = ({ className = "", active = false }) => {
  // Get browser's reduce motion setting
  const shouldReduceMotion = useReducedMotion();

  // If browser's reduce motion settings are true, respect them otherwise use default animation
  const transition = shouldReduceMotion ? { type: "just" } : undefined;
  return (
    <m.svg
      className={className}
      width="12"
      height="12"
      viewBox="0 0 12 12"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <m.line
        x1="6"
        y1="-4.37114e-08"
        x2="6"
        y2="12"
        stroke="currentColor"
        strokeWidth="2"
        animate={active ? "active" : "inactive"}
        variants={variants}
        transition={transition}
      />
      <m.line y1="6" x2="12" y2="6" stroke="currentColor" strokeWidth="2" />
    </m.svg>
  );
};

export { PlusMinus };

While this component isn't critical to the function or accessibility of the accordion, it's a slick little indicator that helps us assign a visual cue to the state of our accordion items.

4. Adding some data

The last thing to do is add some data. In this example, we're passing in some hard-coded placeholder data to the Accordion component via App.tsx

// src/App.tsx
import React from 'react';
import { Accordion } from "components/Accordion";

const data = [
  {
    title: "Section One",
    body:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt vitae semper quis lectus nulla. Risus nullam eget felis eget nunc lobortis. Cum sociis natoque penatibus et magnis dis parturient montes nascetur."
  },
  {
    title: "Section Two",
    body:
      "Dolor morbi non arcu risus quis varius quam. Leo duis ut diam quam. Leo duis ut diam quam nulla porttitor massa id neque. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu."
  }
];

const App = () => {
  return <Accordion sections={data} />;
};

export { App };

And that's that.

If you're interested in seeing how things are styled in my setup, check out the CodeSandbox

Closing Notes

Accessibility Resources & References

MDN Aria Attributes

Feedback

I always welcome feedback. If you spot any errors or omissions, please let me know.

Accessible Component Series: Introduction & Overview

Aaron Cohen — Mon, 10 Jan 2022 04:20:35 +0000

Intro

About this series

Web accessibility is often overlooked by developers. As such, this series is intended to serve as how-two for developers to implement commonly used patterns with accessibility in mind.

We'll be using React, Typescript and Framer Motion throughout this series.

Why accessibility?

Accessibility is a crucial part of providing an equitable experience to all users. With so much great content on the web, it would be a shame to exclude people because of a disability. Many people rely on technologies like screen readers, magnifiers, contrast tools, color correction tools, braille readers and more to access the web.

By making a concerted effort to develop sites with accessibility in mind, you're ensuring everyone gets a seat at the table.

Not only can a lack of web accessibility prevent certain users from using your site, it can also open you, or your clients, up to costly lawsuits.

In the United States, according to the Wall Street Journal, "[accessibility] lawsuits have risen steadily, to about 3,500 in 2020 from roughly 2,900 in 2019 and about 2,300 in 2018." This article projected "more than 4,000 such lawsuits for all of 2021 if trends hold."^[1]

Long story short, the trend did hold and 4055 web accessibility lawsuits were filed in 2021^[2] according to UseableNet's 2021 Year End Report.

Assumptions

This series assumes knowledge of JavaScript, React, and a tiny bit of TypeScript. Even if you're not up to speed on Typescript, you should have no issue following along.

A quick note on Accessibility + ARIA Attributes

The posts in this series utilize various ARIA Attributes on HTML elements. It's incredibly important to how understand how and why specific ARIA Attributes are being used. ARIA Attributes, when used incorrectly, can potentially make a user's experience even worse.

Posts

Accordions

CodeSandboxes

Closing Notes

Accessibility Resources & References

MDN Aria Attributes

Feedback

I always welcome feedback. If you spot any errors or omissions, please let me know.

Footnotes

1. The Wall Street Journal - Lawsuits Over Digital Accessibility for People With Disabilities Are Rising
2. UseableNet - 2021 Year End Report - ADA Digital Accessibility Lawsuits

Svelte + Sapper + Netlify CMS

Aaron Cohen — Mon, 18 May 2020 13:53:56 +0000

Introduction

Hello.

In this post, I'll be outlining how to get started with Svelte, Sapper and Netlify CMS.

This article assumes some baseline knowledge of Svelte, Sapper and various configuration options specific to Netlify's CMS.

Documentation

You can find the repo for this project here.

What we'll accomplish

Setup a Svelte / Sapper project
Setup a Netlify Project + Netlify Authentication
Configure Netlify to automatically build & deploy to Github
Refactor Sapper to statically generate blog posts from Markdown

Setting up Svelte & Sapper

The team at Sapper has setup a great starter template that we'll use to skip a lot of the tedious aspects of starting from scratch.

It's also pretty damn un-opinionated so even if you decide to grow this into a larger project, you won't be locked into anything.

We'll be opting to use the Rollup based bundler since at the time of this writing it is better documented for use with Sapper.

npx degit "sveltejs/sapper-template#rollup" my-app

cd into my-app and run

npm i && npm run dev

You should see your console output

> Listening on http://localhost:3001

Open http://localhost:3001 in your browser and take a peek.

Now that we're up and running, we can start getting things organized in our code to get everything linked up to Netlify.

Setup Netlify + Netlify Authentication

First we'll have to create a new folder within ~/static called admin. Therein we'll create two files, config.yml and index.html.

First, let's drop in a simple config for Netlify's CMS so we can outline how we'll structure our blog post entries:

# ~/static/admin/config.yml

backend:
  name: git-gateway
  branch: master # Branch to update (optional; defaults to master)

publish_mode: editorial_workflow # Allows you to save drafts before publishing them
media_folder: static/uploads # Media files will be stored in the repo under static/images/uploads
public_folder: /uploads # The src attribute for uploaded media will begin with /images/uploads

collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "static/posts" # The path to the folder where our blog posts are stored
    create: true # Allow users to create new documents in this collection
    fields: # The fields for each document
      - { label: "Slug", name: "slug", widget: "string" }
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }

Next, let's add the markup for the /admin route:

<!-- ~/static/admin/index.html  -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </body>
</html>

Refactoring for Markdown

If you're not familiar with how Sapper handles dynamic URL parameters, check out their documentation on routing.

We'll be editing our ~/src/routes/blog/[slug].json.js to read markdown files from the filesystem, parse the Markdown + Frontmatter, and render the data into our component.

We will also need to edit ~/src/routes/blog/index.json.js to extract the various titles and slugs from our posts in order to display them on the /blog route.

For this, we'll make use of gray-matter to handle the Frontmatter which is in YAML and marked to parse our Markdown.

Install these two dependencies via npm:

npm i marked gray-matter

Let's also create a folder where our blog posts will live. Create a folder called posts within ~/static. We told Netlify to save posts here with the line

folder: "static/posts"

in our config.yaml for our blog collection.

Next, let's setup our [slug].json.js file to put these two libraries to use:

// ~/src/routes/blog/[slug].json.js

import path from "path";
import fs from "fs";
import grayMatter from "gray-matter";
import marked from "marked";

const getPost = (fileName) => {
  return fs.readFileSync(
    path.resolve("static/posts/", `${fileName}.md`),
    "utf-8"
  );
};

export function get(req, res, _) {
  const { slug } = req.params;

  const post = getPost(slug);
  const renderer = new marked.Renderer();

  const { data, content } = grayMatter(post);
  const html = marked(content, { renderer });

  if (html) {
    res.writeHead(200, {
      "Content-Type": "application/json",
    });

    res.end(JSON.stringify({ html, ...data }));
  } else {
    res.writeHead(404, {
      "Content-Type": "application/json",
    });

    res.end(
      JSON.stringify({
        message: `Not found`,
      })
    );
  }
}

Next we'll modify our ~/src/routes/blog/index.json.js file to read all the files within our ~/static/posts directory and pluck out the information required to render and provide links to each article.

// ~/src/routes/blog/index.json.js
import fs from "fs";
import path from "path";
import grayMatter from "gray-matter";

const getAllPosts = () => {
  try {
    return fs.readdirSync("static/posts/").map((fileName) => {
      const post = fs.readFileSync(
        path.resolve("static/posts", fileName),
        "utf-8"
      );
      return grayMatter(post).data;
    });
  } catch (e) {
    return [];
  }
};

export function get(_, res) {
  res.writeHead(200, {
    "Content-Type": "application/json",
  });
  const posts = getAllPosts();
  res.end(JSON.stringify(posts));
}

Since we're no longer using the original data source for the blog posts ~/src/routes/blog/_posts.js we can delete that file.

Also, since we're passing our JSON data from [slug].json.js to [slug].svelte with the same structure as before, we don't need to make any changes to the latter file.

Setting up Netlify & Git Repo

At this point, we've nearly got our ducks in a row to deploy our site and start writing blog posts.

First, create a new repo and push your code to it.

Next, head on over to Netlify and click 'New Site from Git', select your Git provider of choice, authorize the Netlify App and allow access to all or for more granularity, select the repos you want Netlify to have access to.

Make sure you specify the build command and publish directory like so and mash that 'Deploy Site' button.

If you head back to your Netlify dashboard you should see that your site is building and as soon as it's published, you can preview a link to the site.

Last but not least, we need to enable the Identity and Git Gateway features so you can signup/login via the /admin path on your newly deployed site to manage posts as well as allow Netlify to publish changes to your Git repo to trigger new static builds.

Identity

Git Gateway

Logging into the CMS

Head on over to your live site and add the /admin path to your URL.

Click 'Sign Up', create an account, confirm your account via the automated email from Netlify and jump back over to /admin and give it a refresh.

###

Thanks for reading. If you’d like to stay up to date with my writings and projects, please follow me on Twitter or consider supporting my writing by buying me a coffee.