@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.

Keyboard navigation
-
‘Tab’ to component to place focus; a subsequent tab moves to next sibling element, bypassing the guts of the EuiColorStop component
-
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.
-
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).
-
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).
-
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.
@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.
Keyboard navigation
‘Tab’ to component to place focus; a subsequent tab moves to next sibling element, bypassing the guts of the
EuiColorStopcomponentWhile 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.
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).
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).
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
EuiColorStopscomponent and on to the next sibling element in the DOM.