[CCR] IE and Screen reader accesibility

[sebelga]

Internet Explorer tests

I detected 2 bugs with IE:

• One on EUI side (Change flex-basis for EuiPageBody eui#1497)
• The one fixed here, where one of the columns of Remote Clusters was wrapping the text

Accessibility

I only detected one drawback on our side: when we havigate from one of our table list (e.g. auto-follow patterns) and hit the "Create auto-follow pattern" button, we are redirected to the form page but the focus is on the link to the documentation.
I tried several things (tabIndex="0" on the EuiTitle and also the h1 tag) but with no luck. I also tried a React.forwardRef on the AutoFollowPatternPageTitle component to send the h1 tag ref to its parent (and call focus() on componentDidMount().... but with no luck either.
Solution welcome if you find a way! 😄

For the rest I detected 2 bugs on the EUI component and filled issues for them

• <EuiInMemoryTable /> I could not navigate the rows of the table
• <EuiComboBox /> I could not actually "add" an item. Although @bmcconaghy tried and he could do it.

For both of those eui accessibility issue I will record my screen and file an issue on the EUI repo so they can have a look at it.

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[cjcenizal]

Thanks for putting so much time into testing! I had one suggestion about SCSS. Code LGTM, haven't tested locally.

[cjcenizal]

It's not very well-documented, but it's a best practice for us to use classnames instead of inline styles. Could you create components/connection_status/_index.scss and create a class for this?

.remoteClustersConnectionStatus__message {
  white-space: nowrap;
}

You'll need to import this file from public/index.scss:

// At the top of the file
@import './sections/remote_cluster_list/components/connection_status/index'; // (note this can be index, not _index, because SCSS ignores the leading underscore in filenames)

Then we can apply the class like this:

<EuiFlexItem className="remoteClustersConnectionStatus__message">

[sebelga]

ok!

[cjcenizal]

Looks like some snapshots need to be updated for CI to go green.

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[sebelga]

retest

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[cjcenizal]

Just had one small suggestion about the SCSS. Also, it looks like the CI failures are due to an outdated snapshot for a remote_cluster_list/detail_panel test.

[cjcenizal]

The first two classes make the selector somewhat brittlene, since it will no longer take effect if we refactor ConnectionStatus to use a component other than EuiFlexGroup or if the EUI classnames change. Can we change this to just the single class? It's OK to use !important if you need to override what's being inherited; a comment will help make the rationale clearer.

/**
 * 1. Prevent inherited flexbox layout from compressing this element on IE.
 */
.remoteClustersConnectionStatus__message {
  flex-basis: auto !important; / * 1 */
}

[sebelga]

Yes I went with !important first and then remember that other sass linting projects I worked on did not allow them. You know, preferences 😄 Ok will change

[sebelga]

I think it would be worth re-thinking the purpose of full component rendered in snapshots though. Adding a css class should not break a test IMO.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request