Skip to content

Color Stops Component #2344

@thompsongl

Description

@thompsongl

@ryankeairns Moving spec from #2028 to a more visible location


@thompsongl @snide
Here are some initial mockups and accessibility notes based on our conversation.

Point popovers


The popover contains a text input for the stop value, a delete button, the color picker, and an input for the hex value. In reality, there would never be two popovers open at the same time, but the screenshot below includes an example of a popover with a validation error.

Note that this uses the new compressed inputs.

Screenshot 2019-09-13 15 40 37

Keyboard navigation


  1. ‘Tab’ to component to place focus; a subsequent tab moves to next sibling element, bypassing the guts of the EuiColorStop component

  2. While the component is focused, ‘Arrow up/down’ will cycle through existing stops; ‘Enter’ will create a new stop at the midpoint and open the popover (as pictured above); ‘Escape’ places focus back on the parent color stop component.

  3. While a stop is focused, ‘Enter’ will open the popover and focus on the ‘Stop value’ text input; tabbing will cycle through the main elements (stop input, delete button, color picker, or hex input).

  4. While the color picker focused, ‘Enter’ will place focus on the color field and follow existing keyboard navigation for this component; ‘Escape’ will place focus back on parent color picker element in the normal flow of the popover content (i.e. subsequent tab goes to hex input).

  5. While any first level child is selected (stop input, delete button, color picker, or hex input), ‘Escape’ will close the popover and retain focus on parent stop point;

At this point, the user can use the up/down arrows to cycle through the stops or use 'Tab' to move past the EuiColorStops component and on to the next sibling element in the DOM.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions