Make EuiBasicTable rows keyboard-accessible when they are clickable.

[cjcenizal]

Summary

When a row has an onClick applied to it, the row becomes keyboard-accessible (you can tab to it) and has a visual focus state.

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios

[chandlerprall]

Nice, so clean! LGTM, code review only.

[cchaos]

Is there a specific reason why an outline was added? The background color is already changing and the outline (which goes outside of the row borders) makes the coloring look a bit messy. I'd stick to one or the other.

[cjcenizal]

Nope I didn't even think about it -- just copied what we had from somewhere else! Which one do you think we should go with?

[cchaos]

I played around with it some and because of the row borders, the focus ring doesn't look so good, but I would like to adjust the hover color for clickable rows as well, so the best I came up with was:

.euiTableRow-isClickable {
  &:hover {
    background-color: transparentize($euiColorPrimary, .95);
  }

  &:focus {
    background-color: transparentize($euiColorPrimary, .9);
  }
}

[cjcenizal]

Nice! I like what you did there. This gibes with @chandlerprall's comment too. Will update.

[snide]

Code looks good to me. Share @cchaos' comment on the styling, but other than that this is really nice!

[cjcenizal]

@cchaos @snide Another thing to note is the hover state currently does not override the selected state. Do you think this makes sense or do you prefer the hover state override the selected state?

[chandlerprall]

IMO the hover state shouldn't override, as you can still Enter or Space to trigger the keyboard-selected row.

[cjcenizal]

Thanks for the reviews @chandlerprall @snide @cchaos! Updated with your feedback.

[cchaos]

Missing semicolon;

Sorry, being picky here, but can you move these to the bottom of the list since they are more specific modifiers?

[cjcenizal]

No prob, done.

[cchaos]

Thanks!