Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessible sunburst graphs #1154

Closed
myasonik opened this issue May 10, 2021 · 1 comment · Fixed by #1155 or elastic/kibana#102078
Closed

Accessible sunburst graphs #1154

myasonik opened this issue May 10, 2021 · 1 comment · Fixed by #1155 or elastic/kibana#102078
Assignees
Labels
:accessibility Accessibility related issue enhancement New feature or request released Issue released publicly

Comments

@myasonik
Copy link

All slices of a sunburst should be reported.

For nested layers, should nest tables into the appropriate cell. (Yes, this is valid and works well whereas complex table markup such as stretched table columns don't work very well.)

Example (simplified) component:

function() {
	// if a label was provided, use that to make the name; otherwise, use the graph type
	const tableCaption = label ? `${label} data` : `${graphType} data`;

	<figure>
      <canvas role="presentation">
        <div class="echScreenReaderOnly">
          <dl>...</dl>
          <table>
            <caption>{tableCaption}</caption>
            <thead>
              <tr>
                <th>Category</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">US Population</th>
                <td>300 Million</td>
              </tr>
            </tbody>
          </table>
        </div>
      </canvas>
    </figure>
}

Extra credit: (can be moved to a future ticket)
If there is a high number of slices, we should use the same logic for when labels get visually hidden. Only show the same labels in the table. Then render a show more cells button that adds more rows to the table and moves focus back to the tableto the table.

@myasonik myasonik added bug Something isn't working :accessibility Accessibility related issue labels May 10, 2021
@rshen91 rshen91 self-assigned this May 10, 2021
@rshen91 rshen91 changed the title Accessible sunbpurt graphs Accessible sunburst graphs May 14, 2021
@markov00 markov00 added this to Backlog in Accessibility May 25, 2021
@markov00 markov00 added enhancement New feature or request and removed bug Something isn't working labels May 26, 2021
Accessibility automation moved this from Backlog to Done Jun 10, 2021
nickofthyme pushed a commit that referenced this issue Jun 10, 2021
# [30.2.0](v30.1.0...v30.2.0) (2021-06-10)

### Features

* **a11y:** add data table for screen readers (sunburst,  treemap, icicle, flame) ([#1155](#1155)) ([87fd75f](87fd75f)), closes [#1154](#1154)
@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 30.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme nickofthyme added the released Issue released publicly label Jun 10, 2021
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this issue Feb 10, 2022
# [30.2.0](elastic/elastic-charts@v30.1.0...v30.2.0) (2021-06-10)

### Features

* **a11y:** add data table for screen readers (sunburst,  treemap, icicle, flame) ([opensearch-project#1155](elastic/elastic-charts#1155)) ([a1a68fe](elastic/elastic-charts@a1a68fe)), closes [opensearch-project#1154](elastic/elastic-charts#1154)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:accessibility Accessibility related issue enhancement New feature or request released Issue released publicly
Projects
No open projects
Accessibility
  
Done
4 participants