What

Rewrite the Color Palette component to use the Composite component and to have role="listbox", so that each Color Palette becomes one tab stop.

Why

Tabbing through the many options in a Color Palette can be tedious, as each color represents a tab stop:

The Color Palette component is a good candidate for the listbox role and Reakit’s Composite. With Composite, users will be able to tab to the list of color options but then use the arrow keys to navigate within the list of options. This enables users navigating with the keyboard to more efficiently navigate the UI.

A/C

• Partially rewrite the Color Palette component so that it uses the Composite component internally
• Give the Color Palette component a role="listbox"
• Each color palette should represent one tab stop. Inside each palette, each color can be selected by using the arrow keys.