[Dashboard Navigation] Fix a11y concerns #174772

Heenawter · 2024-01-12T15:26:49Z

Summary

This PR addresses the a11y issues that were brought up as part of the a11y review via the following:

Added aria-current attribute to the current dashboard link

Before After
Returned focus to the create flyout after adding/editing a link

Before After
Added aria-label attribute to Technical preview badge

Before After
Added more context to the aria-labels for the edit/delete link buttons

Before After

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
Flaky Test Runner was used on any tests changed (Link)
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

Heenawter · 2024-01-12T15:52:32Z

/ci

Heenawter · 2024-01-12T16:28:37Z

/ci

Heenawter · 2024-01-12T17:38:46Z

/ci

Heenawter · 2024-01-12T21:43:02Z

/ci

elasticmachine · 2024-01-12T22:46:48Z

Pinging @elastic/kibana-accessibility (Project:Accessibility)

elasticmachine · 2024-01-12T22:46:49Z

Pinging @elastic/kibana-presentation (Team:Presentation)

nickpeihl

Added a couple of nits. Otherwise lgtm. Nice a11y tests! Code review and tested a11y concerns.

Since it was brought up in the review, do you mind changing here the embeddable.type to links. This should hide the customized time range in the panel settings. It was missed when we did the embeddable type rename.

src/plugins/links/public/components/editor/links_editor.tsx

src/plugins/links/public/components/links_strings.ts

…bana into links-a11y-fixes_2024-01-12

Heenawter · 2024-01-16T15:36:52Z

@nickpeihl

This should hide the customized time range in the panel settings. It was missed when we did the embeddable type rename.

Thanks for reminding me!! I meant to address that but totally forgot 🤦 Fixed in d7c4f58 🎉

…s_2024-01-12

1Copenut

This is a big win for a11y @Heenawter! I have one question and one change request (hopefully small). If the change request to set focus after deleting a link from the modal is large or difficult to refactor, let's move it to a follow-on ticket of its own and I'll change my review to Approved.

I appreciate you helping me prove out this collaborative flow for testing accessibility in smaller, feature-size engagements.

src/plugins/links/public/components/dashboard_link/dashboard_link_component.tsx

1Copenut · 2024-01-18T15:28:56Z

src/plugins/links/public/editor/open_editor_flyout.tsx

@@ -135,10 +139,12 @@ export async function openEditorFlyout(
        { theme: coreServices.theme, i18n: coreServices.i18n }
      ),
      {
+        tabIndex: 1,


@Heenawter Which flyout is this tabIndex being assigned to? I wasn't able to find it in the DOM using a quick document.querySelectorAll('[tabindex="1"]') but had some unexpected tabbing behavior with Firefox + VO. It's entirely possible the new MacOS or VO has disrupted that flow; Firefox seemed okay by itself.

If there is a positive tabindex being applied, that could disrupt the natural tabbing order, so I'd like to evaluate that separately if it does appear in a place I didn't find.

Oh, good catch - I think I accidentally left this in when I was testing different things for refocusing the main flyout after editing/adding links. I've removed it, and it doesn't seem to impact the focusing behaviour 🙇

1Copenut · 2024-01-18T15:29:31Z

src/plugins/links/public/editor/open_link_editor_flyout.tsx

@@ -44,6 +46,12 @@ export async function openLinkEditorFlyout({
      // wait for close animation before unmounting
      setTimeout(() => {
        if (ref.current) ReactDOM.unmountComponentAtNode(ref.current);
+
+        // return focus to the main flyout div to align with a11y standards
+        const flyoutElement = document.getElementById(mainFlyoutId);


This works well when I add and edit links. Can we include logic to also reset this focus to the modal container when I delete a link using the inline trashcan icon?

Done in 11468ac 🎉

x-pack/test/accessibility/apps/group1/dashboard_links.ts

kibana-ci · 2024-01-18T18:22:56Z

💚 Build Succeeded

Buildkite Build
Commit: 11468ac

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`links`	24.9KB	25.1KB	+206.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`embeddable`	60.6KB	60.6KB	-5.0B
`links`	34.1KB	34.3KB	+201.0B
total			+196.0B

History

💚 Build #188045 succeeded 362e53b
💛 Build #187700 was flaky df63fff
💛 Build #187516 was flaky 5d7c259
💚 Build #187327 succeeded fbea8d3
💚 Build #187283 succeeded b8830bf
💔 Build #187267 failed fab9ea5

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @Heenawter

1Copenut

👍 LGTM!

## Summary This PR addresses the a11y issues that were brought up as part of the [a11y review](elastic#163802) via the following: - **Added `aria-current` attribute to the current dashboard link** | Before | After | |--------|--------| | ![Screenshot 2024-01-12 at 9 49 54 AM](https://github.com/elastic/kibana/assets/8698078/975f6acf-fd87-47f3-a12f-02abeb2e5dce) | ![Screenshot 2024-01-12 at 10 03 11 AM](https://github.com/elastic/kibana/assets/8698078/102b3e12-f98e-4f17-9d51-ac8a70d2f34e) | - **Returned focus to the create flyout after adding/editing a link** | Before | After | |--------|--------| | ![image](https://github.com/elastic/kibana/assets/8698078/4d74f3b3-788b-47e7-9dcb-d54a6383026b) | ![image](https://github.com/elastic/kibana/assets/8698078/6b057ee5-094a-49c5-92c2-10deba15b7db) | - **Added `aria-label` attribute to `Technical preview` badge** | Before | After | |--------|--------| | ![Screenshot 2024-01-12 at 11 16 14 AM](https://github.com/elastic/kibana/assets/8698078/06b454ce-07e9-438e-9d41-1d8505ca0e28) | ![Screenshot 2024-01-12 at 11 13 07 AM](https://github.com/elastic/kibana/assets/8698078/44ee37c6-18cc-4918-b127-0b9583630612) | - **Added more context to the `aria-label`s for the edit/delete link buttons** | Before | After | |--------|--------| | ![Screenshot 2024-01-12 at 11 43 45 AM](https://github.com/elastic/kibana/assets/8698078/f90db90f-3da6-4ab6-807d-fba73315ee66) | ![Screenshot 2024-01-12 at 11 43 19 AM](https://github.com/elastic/kibana/assets/8698078/2d9e6ae2-6bd4-4957-ab6d-93fda0708471) | ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed ([Link](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/4856)) ![image](https://github.com/elastic/kibana/assets/8698078/74c173dc-2b59-43e8-bc9b-33a1ae8297b0) - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

Contributes to: elastic#194817 Why I assigned them: Assigned advanced_settings due to elastic#175255 Assigned dashboard_controls due to elastic#190797 Assigned dashboard_links due to elastic#174772 Assigned dashboard_panel_options due to elastic#178596 Assigned grok_debugger due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/grokdebugger/kibana.jsonc#L4 Assigned helpers due to elastic#164341 (call site) Assigned home due to elastic#103192 Assigned index_lifecycle_management due to elastic#116207 Assigned ingest_node_pipelines due to elastic#113783 Assigned kibana_overview due to https://github.com/elastic/kibana/blob/f00ac7a8a21463e6bb4a2784c3a3884f36c62900/x-pack/plugins/grokdebugger/kibana.jsonc#L4 Assigned management due to elastic#165705 Assigned painless_lab due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/painless_lab/kibana.jsonc#L4 Assigned search_profiler due to elastic#195343 Assigned uptime due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/uptime/kibana.jsonc#L4 Assigned lens due to elastic#175893 Assigned ml_anomaly_detection due to elastic#162126 Assigned canvas due to elastic#164376 Assigned cc replication due to elastic#149069 Assigned enterpise search due to elastic#79359 Assigned graph to due elastic#190797 Assigned license_management due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/license_management/kibana.jsonc#L4 Assigned maps due to elastic#155161 Assigned observability due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/observability/kibana.jsonc#L4 Assigned remote clusters due to elastic#96989 Assigned reporting due to elastic#121435 Assigned rollup_jobs due to https://github.com/elastic/kibana/blob/d57bc9a5d7d64f86b550eff7997605a3090aee9a/x-pack/plugins/rollup/kibana.jsonc#L4 Assigned watcher due to elastic#119717

## Summary Assign files within `x-pack/test/accessibility/apps/group[1|2|3]` ### Why I assigned them: Assigned advanced_settings due to #175255 Assigned dashboard_controls due to #190797 Assigned dashboard_links due to #174772 Assigned dashboard_panel_options due to #178596 Assigned grok_debugger due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/grokdebugger/kibana.jsonc#L4 Assigned helpers due to #164341 (call site) Assigned home due to #103192 Assigned index_lifecycle_management due to #116207 Assigned ingest_node_pipelines due to #113783 Assigned kibana_overview due to https://github.com/elastic/kibana/blob/f00ac7a8a21463e6bb4a2784c3a3884f36c62900/x-pack/plugins/grokdebugger/kibana.jsonc#L4 Assigned management due to #165705 Assigned painless_lab due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/painless_lab/kibana.jsonc#L4 Assigned search_profiler due to #195343 Assigned uptime due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/uptime/kibana.jsonc#L4 Assigned lens due to #175893 Assigned ml_anomaly_detection due to #162126 Assigned canvas due to #164376 Assigned cc replication due to #149069 Assigned enterpise search due to #79359 Assigned graph to due #190797 Assigned license_management due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/license_management/kibana.jsonc#L4 Assigned maps due to #155161 Assigned observability due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/observability/kibana.jsonc#L4 Assigned remote clusters due to #96989 Assigned reporting due to #121435 Assigned rollup_jobs due to https://github.com/elastic/kibana/blob/d57bc9a5d7d64f86b550eff7997605a3090aee9a/x-pack/plugins/rollup/kibana.jsonc#L4 Assigned watcher due to #119717 Contributes to: #194817 --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Rodney Norris <[email protected]>

Fix a11y problems

395eab5

Heenawter self-assigned this Jan 12, 2024

Removed outdated translations

fab9ea5

Fix unit tests

b8830bf

Heenawter added 4 commits January 12, 2024 14:38

Add a11y tests

17a7210

Run FTR

3adc516

Remove .only

749ae7a

Fix typo in comment

fbea8d3

Heenawter marked this pull request as ready for review January 12, 2024 22:46

Heenawter requested a review from a team as a code owner January 12, 2024 22:46

Merge branch 'main' into links-a11y-fixes_2024-01-12

5d7c259

Heenawter requested a review from 1Copenut January 15, 2024 15:52

nickpeihl self-requested a review January 16, 2024 13:18

nickpeihl approved these changes Jan 16, 2024

View reviewed changes

src/plugins/links/public/components/editor/links_editor.tsx Show resolved Hide resolved

src/plugins/links/public/components/links_strings.ts Show resolved Hide resolved

src/plugins/links/public/components/links_strings.ts Show resolved Hide resolved

Heenawter added 2 commits January 16, 2024 08:35

Remove custom time range option from links

d7c4f58

Merge branch 'links-a11y-fixes_2024-01-12' of github.com:heenawter/ki…

df63fff

…bana into links-a11y-fixes_2024-01-12

botelastic bot added the Feature:Embedding Embedding content via iFrame label Jan 16, 2024

Heenawter and others added 3 commits January 17, 2024 14:50

Merge branch 'main' into links-a11y-fixes_2024-01-12

693a815

Merge branch 'main' of github.com:elastic/kibana into links-a11y-fixe…

c91bc00

…s_2024-01-12

Fix custom time range action after conflicts

362e53b

1Copenut reviewed Jan 18, 2024

View reviewed changes

Address a11y-specific feedback

11468ac

1Copenut approved these changes Jan 18, 2024

View reviewed changes

Heenawter merged commit f2ec534 into elastic:main Jan 18, 2024
17 checks passed

Heenawter deleted the links-a11y-fixes_2024-01-12 branch January 18, 2024 19:49

kibanamachine added v8.13.0 backport:skip This commit does not require backporting labels Jan 18, 2024

wayneseymour mentioned this pull request Oct 11, 2024

[FTR][Ownership] Assign ally/grps 1,2 & 3 #195964

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard Navigation] Fix a11y concerns #174772

[Dashboard Navigation] Fix a11y concerns #174772

Heenawter commented Jan 12, 2024 •

edited

Loading

Heenawter commented Jan 12, 2024

Heenawter commented Jan 12, 2024

Heenawter commented Jan 12, 2024

Heenawter commented Jan 12, 2024

elasticmachine commented Jan 12, 2024

elasticmachine commented Jan 12, 2024

nickpeihl left a comment

Heenawter commented Jan 16, 2024 •

edited

Loading

1Copenut left a comment

1Copenut Jan 18, 2024

Heenawter Jan 18, 2024 •

edited

Loading

1Copenut Jan 18, 2024

Heenawter Jan 18, 2024

kibana-ci commented Jan 18, 2024

1Copenut left a comment

[Dashboard Navigation] Fix a11y concerns #174772

[Dashboard Navigation] Fix a11y concerns #174772

Conversation

Heenawter commented Jan 12, 2024 • edited Loading

Summary

Checklist

For maintainers

Heenawter commented Jan 12, 2024

Heenawter commented Jan 12, 2024

Heenawter commented Jan 12, 2024

Heenawter commented Jan 12, 2024

elasticmachine commented Jan 12, 2024

elasticmachine commented Jan 12, 2024

nickpeihl left a comment

Choose a reason for hiding this comment

Heenawter commented Jan 16, 2024 • edited Loading

1Copenut left a comment

Choose a reason for hiding this comment

1Copenut Jan 18, 2024

Choose a reason for hiding this comment

Heenawter Jan 18, 2024 • edited Loading

Choose a reason for hiding this comment

1Copenut Jan 18, 2024

Choose a reason for hiding this comment

Heenawter Jan 18, 2024

Choose a reason for hiding this comment

kibana-ci commented Jan 18, 2024

💚 Build Succeeded

Metrics [docs]

Async chunks

Page load bundle

History

1Copenut left a comment

Choose a reason for hiding this comment

Heenawter commented Jan 12, 2024 •

edited

Loading

Heenawter commented Jan 16, 2024 •

edited

Loading

Heenawter Jan 18, 2024 •

edited

Loading