Ensures every ARIA button, link and menuitem has an accessible name validation error in demo flights chart #148647

bhavyarm · 2023-01-10T15:02:44Z

Description

Dashboard controls a11y tests Add controls panel

Failures in tracked branches: 0

Buildkite Job
https://buildkite.com/elastic/kibana-pull-request/builds/98892#018597d8-1389-415d-9554-d5abd16545b4

Error: a11y report:

VIOLATION
  [aria-command-name]: Ensures every ARIA button, link and menuitem has an accessible name
    Impact: serious
    Help: https://dequeuniversity.com/rules/axe/4.6/aria-command-name?application=axeAPI
    Elements:
      - <div tabindex="0" role="button" aria-pressed="false" data-test-subj="legend-Security Delay" style="display: flex; justify-content: center; align-items: center; height: 100%; margin-left: 4px; margin-right: 4px;">
      - <div tabindex="0" role="button" aria-pressed="false" data-test-subj="legend-Weather Delay" style="display: flex; justify-content: center; align-items: center; height: 100%; margin-left: 4px; margin-right: 4px;">
      - <div tabindex="0" role="button" aria-pressed="false" data-test-subj="legend-Carrier Delay" style="display: flex; justify-content: center; align-items: center; height: 100%; margin-left: 4px; margin-right: 4px;">
      - <div tabindex="0" role="button" aria-pressed="false" data-test-subj="legend-Late Aircraft Delay" style="display: flex; justify-content: center; align-items: center; height: 100%; margin-left: 4px; margin-right: 4px;">
      - <div tabindex="0" role="button" aria-pressed="false" data-test-subj="legend-NAS Delay" style="display: flex; justify-content: center; align-items: center; height: 100%; margin-left: 4px; margin-right: 4px;">
      - <div tabindex="0" role="button" aria-pressed="false" data-test-subj="legend-No Delay" style="display: flex; justify-content: center; align-items: center; height: 100%; margin-left: 4px; margin-right: 4px;">

Related Issues

The text was updated successfully, but these errors were encountered:

elasticmachine · 2023-01-10T15:02:47Z

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

elasticmachine · 2023-01-10T15:02:47Z

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

bhavyarm · 2023-01-10T17:12:08Z

Another test failing with same violation in controls a11y test suite -

X-Pack Accessibility Tests
x-pack/test/accessibility/apps/dashboard_controls.ts
Dashboard controls a11y tests Open data view picker

Failures in tracked branches: 0

Buildkite Job
https://buildkite.com/elastic/kibana-pull-request/builds/98892#018597d8-1389-415d-9554-d5abd16545b4

Error: a11y report:

VIOLATION
  [aria-command-name]: Ensures every ARIA button, link and menuitem has an accessible name
    Impact: serious
    Help: https://dequeuniversity.com/rules/axe/4.6/aria-command-name?application=axeAPI
    Elements:
      - <div tabindex="0" role="button" aria-pressed="false" data-test-subj="legend-Security Delay" style="display: flex; justify-content: center; align-items: center; height: 100%; margin-left: 4px; margin-right: 4px;">
      - <div tabindex="0" role="button" aria-pressed="false" data-test-subj="legend-Weather Delay" style="display: flex; justify-content: center; align-items: center; height: 100%; margin-left: 4px; margin-right: 4px;">
      - <div tabindex="0" role="button" aria-pressed="false" data-test-subj="legend-Carrier Delay" style="display: flex; justify-content: center; align-items: center; height: 100%; margin-left: 4px; margin-right: 4px;">
      - <div tabindex="0" role="button" aria-pressed="false" data-test-subj="legend-Late Aircraft Delay" style="display: flex; justify-content: center; align-items: center; height: 100%; margin-left: 4px; margin-right: 4px;">
      - <div tabindex="0" role="button" aria-pressed="false" data-test-subj="legend-NAS Delay" style="display: flex; justify-content: center; align-items: center; height: 100%; margin-left: 4px; margin-right: 4px;">
      - <div tabindex="0" role="button" aria-pressed="false" data-test-subj="legend-No Delay" style="display: flex; justify-content: center; align-items: center; height: 100%; margin-left: 4px; margin-right: 4px;">

1Copenut · 2023-01-10T20:49:22Z

There's a great opportunity here to make these markers on the flight delay visualization (or any markers) more accessible and solve the axe violation. I see two parts:

Give each button marker a proper aria-label with i18n translation
Wrap the buttons in an ordered list that builds an accessible label

<h2 data-test-subj="dashboardPanelTitle" class="embPanel__title">
  <span id="if8987510-9122-11ed-82b7-3b342ea4f0bc" class="css-hus3oj-euiScreenReaderOnly">
    Dashboard panel: [Flights] Delays &amp; Cancellations
  </span>
  <span class="embPanel__titleInner">
    <span class="embPanel__titleText">[Flights] Delays &amp; Cancellations</span>
  </span>
</h2>

...

! The OL will give screen reader users two pieces of context:
! 1. What information the list items will present
! 2. How many list items are available to be read back
! aria-label string will need to be built up in a `const` as string "[Flights] Delays and Cancellations Markers"
! Screen reader will announce "[Flights] Delays and Cancellations Markers, list, 20 items"

+ <ol aria-label="[Flights] Delays and Cancellations Markers">
+   <li>
      <button
!       Marker numbers should increase sequentially
+       aria-label="Delays and Cancellations Marker 1"
        class="echAnnotation__marker"
        type="button"
      >
        <div class="echAnnotation__icon">
          <svg
            aria-hidden="true"
            class="euiIcon css-2txxin-euiIcon-m"
            height="16"
            role="img"
            viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M7.59 10.059L7.35..." fill-rule="evenodd"></path>
          </svg>
        </div>
      </button>
+   </li>

! Other button markers wrapped in LIs

+ </ol>

Heenawter · 2023-02-10T20:25:19Z

Looking in to this, and it looks like the a11y issues are actually related to the legend items of the [Flights] Delay Type chart underneath the controls flyout, and not the controls flyout itself... I ran an Axe scan and I don't see any a11y concerns specifically about the controls creation/editor flyout.

@bhavyarm Unless I'm missing something, is it fair to re-assign this to the Vis team and update the issue to reflect that this isn't a controls issue?

elasticmachine · 2023-02-16T20:49:15Z

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)

markov00 · 2023-02-20T13:30:30Z

This is configured in Lens src/plugins/chart_expressions/expression_xy/public/components/legend_action_popover.tsx

## Summary Closes #148647 Fixes accessibility problem on legend actions button.

bhavyarm added bug Fixes for quality problems that affect the customer experience Project:Accessibility Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas Project:Controls labels Jan 10, 2023

Heenawter added impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. loe:medium Medium Level of Effort labels Jan 10, 2023

bhavyarm mentioned this issue Jan 10, 2023

Updating axe-core to latest #144940

Merged

This was referenced Jan 10, 2023

(Accessibility) Ensure Cancellations and Delays timeseries markers show tooltips on focus as well as hover #148684

Open

(Accessibility) Ensure Cancellations and Delays timeseries tooltips inject aria-describedby into buttons #148685

Open

Heenawter self-assigned this Feb 10, 2023

Heenawter changed the title ~~Ensures every ARIA button, link and menuitem has an accessible name validation error in dashboard controls~~ Ensures every ARIA button, link and menuitem has an accessible name validation error in demo flights chart Feb 16, 2023

Heenawter added Team:Visualizations Visualization editors, elastic-charts and infrastructure and removed Project:Controls labels Feb 16, 2023

Heenawter removed their assignment Feb 16, 2023

stratoula mentioned this issue Feb 21, 2023

[Visualizations] Fixes legend actions accessibility #151678

Merged

stratoula self-assigned this Feb 21, 2023

ThomThomson removed the Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas label Feb 21, 2023

stratoula closed this as completed in #151678 Feb 22, 2023

stratoula added a commit that referenced this issue Feb 22, 2023

[Visualizations] Fixes legend actions accessibility (#151678)

67e19ec

## Summary Closes #148647 Fixes accessibility problem on legend actions button.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ensures every ARIA button, link and menuitem has an accessible name validation error in demo flights chart #148647

Ensures every ARIA button, link and menuitem has an accessible name validation error in demo flights chart #148647

bhavyarm commented Jan 10, 2023 •

edited by 1Copenut

Loading

elasticmachine commented Jan 10, 2023

elasticmachine commented Jan 10, 2023

bhavyarm commented Jan 10, 2023

1Copenut commented Jan 10, 2023

Heenawter commented Feb 10, 2023 •

edited

Loading

elasticmachine commented Feb 16, 2023

markov00 commented Feb 20, 2023

Ensures every ARIA button, link and menuitem has an accessible name validation error in demo flights chart #148647

Ensures every ARIA button, link and menuitem has an accessible name validation error in demo flights chart #148647

Comments

bhavyarm commented Jan 10, 2023 • edited by 1Copenut Loading

Description

Related Issues

elasticmachine commented Jan 10, 2023

elasticmachine commented Jan 10, 2023

bhavyarm commented Jan 10, 2023

1Copenut commented Jan 10, 2023

Heenawter commented Feb 10, 2023 • edited Loading

elasticmachine commented Feb 16, 2023

markov00 commented Feb 20, 2023

bhavyarm commented Jan 10, 2023 •

edited by 1Copenut

Loading

Heenawter commented Feb 10, 2023 •

edited

Loading