Fix accessibility issues with saved object finder #13152

stacey-gammon · 2017-07-27T15:27:25Z

and use new kui styles

cjcenizal

I love that you swapped in the kuiTabs component -- thanks for doing that! I have just one small suggestion.

cjcenizal · 2017-07-27T23:03:07Z

src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html

-    </li>
-  </ul>
+  <div class="kuiTabs">
+    <div


These can be <button> elements, and then we won't need kbn-accessible-click any more. That directive is meant to be used as a last resort, if you can't use a <button> or <a> with an href.

cjcenizal · 2017-07-27T23:10:12Z

Also can we leave #12205 open? I think these will need to be long-lived issues to help us track overall progress and write up our 508 accessibility report.

trevan · 2017-07-28T00:04:43Z

I don't think kuiTabs are darkThemed yet so this will look wrong on a dark theme dashboard.

cjcenizal · 2017-07-28T15:10:25Z

Oops @trevan is right. I guess we'll have to forgo the tabs for now, unless you want to update the UI Framework @stacey-gammon.

stacey-gammon · 2017-07-28T21:09:47Z

I'm probably going about this all wrong, but some experimentation yields this for a dark theme variation:

cjcenizal

🛠 It's so cool to see this component get updated. Thanks for doing this. Just had two suggestions!

cjcenizal · 2017-07-28T21:14:59Z

ui_framework/components/tabs/_index.scss

+$tabColor--darkTheme: #cecece;
+$tabBackgroundColor--darkTheme: #333333;
+$tabHoverBackgroundColor--darkTheme: #777777;
+$tabBorderColor--darkTheme: #777777;


This is fantastic! I'd just suggest looking for global color variables (in https://github.com/elastic/kibana/blob/master/ui_framework/components/_variables.scss#L47), to which you can assign these variables. For example:

$tabColor--darkTheme: $globalTextColor--darkTheme; $tabBackgroundColor--darkTheme: $globalBackgroundColor--darkTheme; // etc...

This way all of the components will derive the same color palette from a shared source of truth. If there are any colors which don't exist in the _variables.scss file, then feel free to just assign the hex value to a component-specific variable in this file.

cjcenizal · 2017-07-28T21:17:26Z

ui_framework/components/tabs/_tabs.scss

@@ -23,6 +27,11 @@
  border-radius: 0; /* 1 */
  margin-bottom: -1px; /* 3 */

+  @include darkTheme {
+    background-color: $tabBackgroundColor--darkTheme;
+    border-color: $tabBorderColor--darkTheme;


I think we'll also need to add a color property here to make it match the link's dark theme style (https://github.com/elastic/kibana/blob/master/ui_framework/components/_mixins.scss#L25).

color: $globalLinkColor--darkTheme;

Similar changes will need to be made to the hover and focus states.

I added colors for the hover states, but the other states I left as is to follow suit with the light theme, which doesn't treat those tabs when they are active as links.

How it looks now:

Oh OK cool, I see. I took a look in the browser and it looks like the text color has poor color contrast against the background:

I think we should address this color contrast issue. How about using a different variable -- can we add color: $tabColor--darkTheme;? This will get it to look like this:

…nk color.

stacey-gammon · 2017-07-31T16:45:09Z

jenkins, test this

cjcenizal

Had one small suggestion. Also, can we add an example for the Tabs dark theme to the documentation site?

<GuideDemo isDarkTheme={true}>
  <Tabs />
</GuideDemo>

cjcenizal · 2017-08-01T15:23:07Z

ui_framework/components/tabs/_tabs.scss

@@ -23,6 +27,11 @@
  border-radius: 0; /* 1 */
  margin-bottom: -1px; /* 3 */

+  @include darkTheme {
+    background-color: $tabBackgroundColor--darkTheme;
+    border-color: $tabBorderColor--darkTheme;


Oh OK cool, I see. I took a look in the browser and it looks like the text color has poor color contrast against the background:

I think we should address this color contrast issue. How about using a different variable -- can we add color: $tabColor--darkTheme;? This will get it to look like this:

…kground tabs

…ccessibility-object-finder

stacey-gammon · 2017-08-02T16:42:07Z

Failed on:

03:35:17.578        │ debg  existsByDisplayedByCssSelector [data-test-subj~="dashboardLandingPage"]
03:35:18.626        │ debg  clickDashboardBreadcrumbLink
03:35:18.691        │ debg  TestSubjects.find(searchFilter)
03:35:18.692        │ debg  in displayedByCssSelector: [data-test-subj~="searchFilter"]
03:35:28.745        │ debg  --- tryForTime failure: An element could not be located on the page using the given search parameters.
03:35:39.287        │ debg  --- tryForTime failed again with the same message  ...
03:35:49.856        │ debg  --- tryForTime failed again with the same message  ...
03:36:00.425        │ debg  --- tryForTime failed again with the same message  ...
03:36:00.992        │ debg  --- tryForTime failure: tryForTime timeout: NoSuchElement: An element could not be located on the page using the given search parameters.
03:36:00.995        │           at /var/lib/jenkins/workspace/elastic+kibana+pull-request+multijob-selenium/node_modules/leadfoot/lib/findDisplayed.js:37:21
03:36:00.995        │           at /var/lib/jenkins/workspace/elastic+kibana+pull-request+multijob-selenium/node_modules/dojo/Promise.js:156:41
03:36:00.995        │           at run (/var/lib/jenkins/workspace/elastic+kibana+pull-request+multijob-selenium/node_modules/dojo/Promise.js:51:33)
03:36:00.995        │           at /var/lib/jenkins/workspace/elastic+kibana+pull-request+multijob-selenium/node_modules/dojo/nextTick.js:35:17
03:36:00.995        │           at _combinedTickCallback (internal/process/next_tick.js:73:7)
03:36:00.995        │           at process._tickDomainCallback (internal/process/next_tick.js:128:9)
03:36:00.995        │           at Command.findDisplayed (/var/lib/jenkins/workspace/elastic+kibana+pull-request+multijob-selenium/node_modules/leadfoot/Command.js:23:10)
....
(/var/lib/jenkins/workspace/elastic+kibana+pull-request+multijob-selenium/node_modules/bluebird/js/main/async.js:15:14)
03:36:01.002        │           at runCallback (timers.js:672:20)
03:36:01.003        │           at tryOnImmediate (timers.js:645:5)
03:36:01.003        │           at processImmediate [as _immediateCallback] (timers.js:617:5)
03:36:01.498        │ debg  --- tryForTime failure: tryForTime timeout: Error: tryForTime timeout: NoSuchElement: An element could not be located on the page using the given search parameters.
03:36:01.500        │           at /var/lib/jenkins/workspace/elastic+kibana+pull-request+multijob-selenium/node_modules/leadfoot/lib/findDisplayed.js:37:21
03:36:01.500        │           at /var/lib/jenkins/workspace/elastic+kibana+pull-request+multijob-selenium/node_modules/dojo/Promise.js:156:41
......
03:36:01.507        │           at tryOnImmediate (timers.js:645:5)
03:36:01.507        │           at processImmediate [as _immediateCallback] (timers.js:617:5)
03:36:02.004        │ debg  Taking screenshot "/var/lib/jenkins/workspace/elastic+kibana+pull-request+multijob-selenium/test/functional/screenshots/failure/dashboard app dashboard clone clone warns on duplicate name.png"
03:36:02.091      └- ✖ fail: "dashboard app dashboard clone clone warns on duplicate name"
03:36:02.093      │        tryForTime timeout: Error: tryForTime timeout: Error: tryForTime timeout: NoSuchElement: An element could not be located on the page using the given search parameters.

Hope this isn't an unstable test, those were supposed to be fixed. :(

If it passes a second time, I'll file a bug for unstable test. Since it seems to have failed on the merge commit and not the prior commit, that's what I suspect.

jenkins, test this

stacey-gammon · 2017-08-03T17:07:21Z

Should be ready to go for a final look @cjcenizal. Test failure was flaky and I have a separate PR out that should address it.

cjcenizal

Fantastic! 🌋

* Fix accessibility issues with saved object finder and use new kui styles * Dark theme-icy kuiTabs * Refer to existing dark theme color variables. Use dark theme hover link color. * use button instead of div element so no need for kbn-accessible-click * Add dark theme tab variety to ui framework site, lighten color of background tabs

stacey-gammon · 2017-08-07T18:19:18Z

Backports:
6.x: #13371
6.0: #13372

* Fix accessibility issues with saved object finder and use new kui styles * Dark theme-icy kuiTabs * Refer to existing dark theme color variables. Use dark theme hover link color. * use button instead of div element so no need for kbn-accessible-click * Add dark theme tab variety to ui framework site, lighten color of background tabs

Fix accessibility issues with saved object finder

bbc77cb

and use new kui styles

stacey-gammon added Project:Accessibility :Sharing v6.0.0 labels Jul 27, 2017

stacey-gammon requested a review from cjcenizal July 27, 2017 15:27

stacey-gammon added the review label Jul 27, 2017

cjcenizal suggested changes Jul 27, 2017

View reviewed changes

Dark theme-icy kuiTabs

d0d3972

cjcenizal suggested changes Jul 28, 2017

View reviewed changes

stacey-gammon added 2 commits July 31, 2017 12:25

Refer to existing dark theme color variables. Use dark theme hover li…

6ac6015

…nk color.

use button instead of div element so no need for kbn-accessible-click

ae0325b

cjcenizal suggested changes Aug 1, 2017

View reviewed changes

stacey-gammon added 2 commits August 2, 2017 11:04

Add dark theme tab variety to ui framework site, lighten color of bac…

98147ae

…kground tabs

Merge branch 'master' of https://github.com/elastic/kibana into fix/a…

5295896

…ccessibility-object-finder

cjcenizal approved these changes Aug 7, 2017

View reviewed changes

stacey-gammon merged commit ab8668a into elastic:master Aug 7, 2017

This was referenced Aug 7, 2017

[6.x] Fix accessibility issues with saved object finder (#13152) #13371

Merged

[6.0] Fix accessibility issues with saved object finder (#13152) #13372

Merged

timroes mentioned this pull request Aug 25, 2017

[Accessibility] Manage Saved Searches button not accessible via keyboard #12890

Closed

jimgoodwin added the v6.0.0-rc1 label Sep 28, 2017

stacey-gammon deleted the fix/accessibility-object-finder branch October 24, 2017 13:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix accessibility issues with saved object finder #13152

Fix accessibility issues with saved object finder #13152

stacey-gammon commented Jul 27, 2017 •

edited

Loading

cjcenizal left a comment

cjcenizal Jul 27, 2017

cjcenizal commented Jul 27, 2017

trevan commented Jul 28, 2017

cjcenizal commented Jul 28, 2017

stacey-gammon commented Jul 28, 2017

cjcenizal left a comment

cjcenizal Jul 28, 2017

cjcenizal Jul 28, 2017

stacey-gammon Aug 1, 2017

cjcenizal Aug 1, 2017

stacey-gammon commented Jul 31, 2017

cjcenizal left a comment

cjcenizal Aug 1, 2017

stacey-gammon commented Aug 2, 2017

stacey-gammon commented Aug 3, 2017

cjcenizal left a comment

stacey-gammon commented Aug 7, 2017

Fix accessibility issues with saved object finder #13152

Fix accessibility issues with saved object finder #13152

Conversation

stacey-gammon commented Jul 27, 2017 • edited Loading

cjcenizal left a comment

Choose a reason for hiding this comment

cjcenizal Jul 27, 2017

Choose a reason for hiding this comment

cjcenizal commented Jul 27, 2017

trevan commented Jul 28, 2017

cjcenizal commented Jul 28, 2017

stacey-gammon commented Jul 28, 2017

cjcenizal left a comment

Choose a reason for hiding this comment

cjcenizal Jul 28, 2017

Choose a reason for hiding this comment

cjcenizal Jul 28, 2017

Choose a reason for hiding this comment

stacey-gammon Aug 1, 2017

Choose a reason for hiding this comment

cjcenizal Aug 1, 2017

Choose a reason for hiding this comment

stacey-gammon commented Jul 31, 2017

cjcenizal left a comment

Choose a reason for hiding this comment

cjcenizal Aug 1, 2017

Choose a reason for hiding this comment

stacey-gammon commented Aug 2, 2017

stacey-gammon commented Aug 3, 2017

cjcenizal left a comment

Choose a reason for hiding this comment

stacey-gammon commented Aug 7, 2017

stacey-gammon commented Jul 27, 2017 •

edited

Loading