var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),g=(a,n)=>{for(var s in n)c(a,s,{get:n[s],enumerable:!0})},l=(a,n,s,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of h(n))!N.call(a,t)&&t!==s&&c(a,t,{get:()=>n[t],enumerable:!(i=m(n,t))||i.enumerable});return a};var b=(a,n,s)=>(s=a!=null?d(u(a)):{},l(n||!a||!a.__esModule?c(s,"default",{value:a,enumerable:!0}):s,a)),f=a=>l(c({},"__esModule",{value:!0}),a);var r=k((T,o)=>{o.exports=_jsx_runtime});var M={};g(M,{default:()=>x,frontmatter:()=>w});var e=b(r()),w={title:"Building an Accessible Dropdown Menu",description:"From keyboard navigation to focus management, the humble dropdown is more complex than it seems",date:"2022-03-23T00:53:18.258Z"};function p(a){let n=Object.assign({img:"img",p:"p",a:"a",code:"code",ul:"ul",li:"li",em:"em",h2:"h2",span:"span",pre:"pre",h3:"h3"},a.components),{Kbd:s}=n;return s||v("Kbd",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.img,{src:"kenny/work/gmg/menu",alt:"Account menu"}),` `,(0,e.jsxs)(n.p,{children:["As ",(0,e.jsx)(n.a,{href:"https://ped.ro/",children:"Pedro Duarte"})," said in his ",(0,e.jsx)(n.a,{href:"https://www.youtube.com/watch?v=pcMYcjtWwVI",children:"video"})," demonstrating the capabilities of ",(0,e.jsx)(n.a,{href:"https://radix-ui.com/",children:"Radix Primitives"}),", building an accessible dropdown is much harder than it appears on the surface."]}),` `,(0,e.jsxs)(n.p,{children:["There are countless factors to consider, from keyboard navigation and focus management to aria-roles and screen reader support the ",(0,e.jsx)(n.a,{href:"https://www.w3.org/TR/wai-aria-practices-1.2/#menubutton",children:"Menu Button WAI-ARIA design pattern"})," lists many design details to implement and test, as well warnings and common mistakes."]}),` `,(0,e.jsxs)(n.p,{children:["For example, the ",(0,e.jsx)(n.code,{children:"button"})," element that triggers the ",(0,e.jsx)(n.code,{children:"Dropdown"})," should include the following interactions while focus is on the button:"]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(s,{children:"Enter"}),": opens the menu and places focus on the first menu item."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(s,{children:"Space"}),": opens the menu and places focus on the first menu item."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(s,{children:"Down Arrow"})," ",(0,e.jsx)(n.em,{children:"(optional)"}),`: opens the menu and moves focus to the first menu item.`]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(s,{children:"Up Arrow"})," ",(0,e.jsx)(n.em,{children:"(optional)"}),`: opens the menu and moves focus to the last menu item.`]}),` `]}),` `,(0,e.jsxs)(n.h2,{id:"accessible-primitives",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#accessible-primitives",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Accessible Primitives"]}),` `,(0,e.jsx)(n.p,{children:"There are a number of open source libraries who's goal it is to make building accessible components easier. These components typically come unstyled, and offer a variety of different ways to compose and style them to fit into your design system."}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.a,{href:"https://radix-ui.com/",children:"Radix Primitives"}),": a set of primitives that are styled by default."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.a,{href:"https://headlessui.dev/",children:"Headless UI"}),": from the team behind ",(0,e.jsx)(n.a,{href:"https://tailwindcss.com/",children:"Tailwind CSS"}),", a set of primitives that are styled by default. Comes in ",(0,e.jsx)(n.code,{children:"React"})," and ",(0,e.jsx)(n.code,{children:"Vue"})," flavors."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.a,{href:"https://reakit.io/",children:"Reakit"}),": Accessible, composable, customizable, tiny & fast."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.a,{href:"https://react-spectrum.adobe.com/react-aria/",children:"React Aria"}),": A library of React Hooks that provides accessible UI primitives for your design system."]}),` `]}),` `,(0,e.jsxs)(n.p,{children:["For Graham Media Group's design system we chose to use Headless UI's ",(0,e.jsx)(n.a,{href:"https://headlessui.dev/react/menu/",children:"Menu (Dropdown)"})," for it's simple and composable API. While this package is written and maintained by the Tailwind CSS team, it is not dependant on Tailwind for styling."]}),` `,(0,e.jsxs)(n.p,{children:["We use ",(0,e.jsx)(n.a,{href:"https://www.styled-components.com/",children:"styled-components"})," and a TypeScript variant of ",(0,e.jsx)(n.a,{href:"https://www.styled-system.com/",children:"styled-system"})," for styling, and gaining access to all of our defined style props was as easy as passing transforming a component into a primitive through the ",(0,e.jsx)(n.code,{children:"as"})," prop. The component will merge the prop interfaces of the primitive and the component, and the primitive will be styled with the component's props."]}),` `,(0,e.jsx)(n.pre,Object.assign({16:""},{20:""},{className:"language-tsx",showLineNumbers:"",filename:"src/components/Dropdown.tsx",children:(0,e.jsxs)(n.code,Object.assign({16:""},{20:""},{className:"language-tsx code-highlight",showLineNumbers:"",filename:"src/components/Dropdown.tsx",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Menu"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Transition"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"@headlessui/react"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Box"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"../Box"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Button"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"../Button"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"4",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"Dropdown"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[" children",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[" buttonText ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Open"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[" variant ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"$primary"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[" size ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"rg"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Menu"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," open ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Box"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"16",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token comment",children:"/* By using the polymorphic `as` prop, we gain access to `size` and `variant` */"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Menu.Button"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"as"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Button"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"size"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"size",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"variant"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"variant",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"18",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"buttonText",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"19",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"20",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Transition"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"show"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"open",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"21",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Menu.Items"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"as"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Box"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"sx"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"menuItemStyles",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"static"}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"22",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"children",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"23",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"24",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"25",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"26",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"27",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"28",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"29",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"30",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]}))})),` `,(0,e.jsxs)(n.p,{children:["By composing the primitives from the ",(0,e.jsx)(n.code,{children:"@headlessui/react"})," package within our component library, we are able to distribute variant derived styles to the ",(0,e.jsx)(n.code,{children:"Menu.Button"}),", ",(0,e.jsx)(n.code,{children:"Menu.Items"})," and ",(0,e.jsx)(n.code,{children:"Menu.Item"})," components to allow for easy customization, and to allow for easy composition of in the consuming application."]}),` `,(0,e.jsxs)(n.h3,{id:"in-action",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#in-action",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"In Action"]}),` `,(0,e.jsx)("video",{style:{width:"var(--sizes-full)",height:"auto",borderRadius:"var(--radii-lg)",aspectRatio:"1280 / 386"},loop:!0,muted:!0,autoPlay:!0,playsInline:!0,children:(0,e.jsx)("source",{src:"/videos/account-menu.mp4",type:"video/mp4"})}),` `,(0,e.jsxs)(n.p,{children:["The primary use-case of the dropdown menu is the ",(0,e.jsx)(n.code,{children:""})," component, which lives in the site header and is only accessible to logged in users. This provides a quick way to interact with our third party comment provider, navigate to popular pages and account features such as logging out."]}),` `,(0,e.jsx)(n.img,{src:"kenny/work/gmg/reg-wall",alt:"Registration wall"})]})}function y(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(p,a)})):p(a)}var x=y;function v(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(M);})(); ;return Component;

Select Projects

Building an Accessible Dropdown Menu