live Example - external site

• Intro
• Installation
• About
• Examples
• Variants
• functionality
  • Keyboard
• todo

There are a lot of dropdowns that are not accessible to screen readers

This can be due to any number of things but commonly will be:

• Incorrect use of Aria
• Keyboard navigation controls that either are non-standard or trap the user.
• Non-visible focus states
• Use of non semantic Elements

This application is created wih React. If you would like to setup this Application on your personal machine these are the steps required.

The App is a compound component. The state is passed from the parent <Dropdown> ⬇️ to the children 🚸:

• <Trigger>
• <Content>
• <Item>

The dropdown menu is unstyled except for the initial dropdown functionality.

⚠️ Further styling is required to personalise the dropdown/ ensure colour contrast for the site it will be used on.

Each component can accept props (classNames, functions, atttributes etc), and a variant (currently only default available).

• Written in React & Typescript with Functional Components
• State shared using Context
• Functionality hidden from developer to make easy to implement

<Dropdown>
  <Dropdown.Trigger variant="default">Menu</Dropdown.Trigger>
  <Dropdown.Content>
    <Dropdown.Item>
      <button>hello</button>
    </Dropdown.Item>
    <Dropdown.Item>
      <a href="/#">world</a>
    </Dropdown.Item>
    <Dropdown.Item>
      <p>hello</p>
    </Dropdown.Item>
  </Dropdown.Content>
</Dropdown>

default: basic styling added to the component.

• White background
• Grey border
• Hover/ Focus/ Active states

Work in Progress more to come!

Each focusable child passed to Dropdown. Item can be programmatically focused using the keyboard once the menu has been opened. focusable children include:

• <a> - must have a href
• <button>
• input
• <textarea>
• <select>
• <details>
• any other element you have added a tabindex to that is not -1

Note: All elements listed above will have tabindex={-1} added to it for management of focus state

• Tests
• Add submenu functionality
• Detect menu collision with edge of Window - move appropriately to remain in view
• Add to NPM
• Additional Variants