docs(elastic charts docs): elastic-chart a11y features into eui docs #4916

rshen91 · 2021-06-23T20:49:55Z

Summary

Closes #4875
Updating the accessibility improvements in the elastic-charts section in the EUI docs.

Checklist

Added updated documentation for the elastic-charts accessibility improvements

kibanamachine · 2021-06-23T21:14:01Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

kibanamachine · 2021-06-24T13:41:40Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

kibanamachine · 2021-06-24T16:44:23Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

kibanamachine · 2021-06-24T19:03:27Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

kibanamachine · 2021-06-24T21:14:03Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

kibanamachine · 2021-06-28T14:35:40Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

myasonik

Thanks for getting these started!

src-docs/src/views/elastic_charts/accessibility.js

src-docs/src/views/elastic_charts/texture.js

kibanamachine · 2021-06-29T19:55:59Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

kibanamachine · 2021-06-30T13:11:32Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

kibanamachine · 2021-06-30T14:07:44Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

myasonik · 2021-06-30T15:11:52Z

@rshen91 Do you want to add goal chart docs to this PR or a follow up?

rshen91 · 2021-06-30T15:15:04Z

@rshen91 Do you want to add goal chart docs to this PR or a follow up?

Oh good call - I can definitely add the goal improvement changes. 🙌🏻

kibanamachine · 2021-07-16T16:43:59Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

kibanamachine · 2021-07-16T17:07:43Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

kibanamachine · 2021-07-16T18:11:11Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

elizabetdev · 2021-07-19T17:03:25Z

Thanks for merging rshen91#3. The idea of the PR is to have the hidden content examples outside of the demo table:

Another thing that I noticed is in dark mode some demo elements don't have enough contrast. I think once we fix this from a design perspective we're good to merge.

elizabetdev · 2021-07-19T17:05:16Z

src-docs/src/views/elastic_charts/texture.js

+  return (
+    <Fragment>
+      <EuiTitle size="xs">
+        <h3 id={id}>Example chart with texture fills</h3>


For consistency with the other demos, we should center this title.

Good catch thank you! 40fed7f
Unfortunately, the bullet graph doesn't yet have a linkLabels way to change the text color (like with partitions where you can set the linkLabels). It's on our roadmap for when the bullet graph moves out of alpha. Thanks!

kibanamachine · 2021-07-19T17:13:28Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

kibanamachine · 2021-07-19T19:03:03Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

elizabetdev · 2021-07-21T14:37:12Z

Thanks for 40fed7f. 😄

But I'm still seeing this chart with dark text. The text should be lighter:

And for this one, the outer labels and lines should be lighter too:

kibanamachine · 2021-07-21T15:40:50Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

…docs

kibanamachine · 2021-07-22T17:24:14Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

elizabetdev · 2021-07-22T17:44:42Z

@rshen91 I was trying to figure out the color issue we're having with the pie charts and the link labels.

It seems that the issue was originated here #3669 when the elastic-charts was updated to version 19.6.3:

To provide an example. If I pass the following colors:

partition: {
  linkLabel: {
    textColor: 'yellow',
  },
  sectorLineStroke: 'red',
}

This is what I get:

If I pass white to the sectorLineStroke:

partition: {
  linkLabel: {
    textColor: 'yellow',
  },
  sectorLineStroke: 'white',
}

The pointing lines get black. I was expecting them to get white. Same behavior as when I passed red:

Ideally, the pointing lines should match the linkLabel.textColor. As they were before the update.

I also noticed another issue. If we pass the euiColorFullShade to linkLabel.textColor I was expecting to get white in dark mode and black in light mode.

partition: {
  linkLabel: {
    textColor: colors.euiColorFullShade.rgba,
  }
}

In light mode it works. But in dark mode this is what I get (the expected black is transformed in white):

I'll open an issue in the elastic-charts repo to fix this and for now I think this is the best compromise:

Bullet graph

bullet graph doesn't yet have a linkLabels way to change the text color

So I added a background that doesn't adapt the color to light/dark theme. And removed the code for adapting the theme. It was not doing anything because the chart doesn't accept it.

So I think we're good to merge the PR. 🎉

elizabetdev

Thanks @rshen91 for all the work and changes! LGTM! 🎉

Tested in Chrome, Safari, Edge and Firefox. I also looked at the code. We had some design limitations described here: #4916 (comment). But for now, this is the best we can do. 😄

kibanamachine · 2021-07-22T18:13:05Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4916/

initial commit

bad9934

rshen91 added accessibility documentation Issues or PRs that only affect documentation - will not need changelog entries Elastic Charts labels Jun 23, 2021

rshen91 changed the title ~~feat(documentation):initial commit for elastic-chart a11y improvements~~ feat(elastic charts docs):initial commit for elastic-chart a11y improvements Jun 23, 2021

Merge remote-tracking branch 'upstream/master' into a11y-docs

e84567b

rshen91 changed the title ~~feat(elastic charts docs):initial commit for elastic-chart a11y improvements~~ feat(elastic charts docs): elastic-chart a11y features into eui docs Jun 24, 2021

rshen91 changed the title ~~feat(elastic charts docs): elastic-chart a11y features into eui docs~~ docs(elastic charts docs): elastic-chart a11y features into eui docs Jun 24, 2021

rshen91 added the skip-changelog label Jun 24, 2021

update docs

c9ca1d5

update formatting

ab9b286

rshen91 requested a review from myasonik June 24, 2021 18:37

rshen91 marked this pull request as ready for review June 24, 2021 18:37

Merge remote-tracking branch 'upstream/master' into a11y-docs

08bb7bd

update ariaDescribedBy for better clarity

1e795c0

myasonik reviewed Jun 29, 2021

View reviewed changes

update per code review

d1fbe00

Merge remote-tracking branch 'upstream/master' into a11y-docs

ef24e4e

update per code review

fa6510d

update charts version and fix bullet example

0eb4955

code review changes

8a1290f

rshen91 requested a review from elizabetdev July 16, 2021 17:43

change id for uniqueness

c11144e

elizabetdev and others added 2 commits July 19, 2021 17:36

Moving hidden content example to outside of the demo panel

625c75b

Merge pull request #3 from miukimiu/a11y-docs

60ce3dd

elizabetdev reviewed Jul 19, 2021

View reviewed changes

update theme

40fed7f

rshen91 requested a review from elizabetdev July 19, 2021 23:02

add call out for bullet chart label color limitations

f8b780a

elizabetdev added 4 commits July 22, 2021 14:47

Merge remote-tracking branch 'upstream/master' into a11y-docs

86125f4

Adding better colors for the provided examples

4440f2f

Colors

7364963

Merge branch 'a11y-docs' of https://github.com/rshen91/eui into a11y-…

02732fa

…docs

elizabetdev approved these changes Jul 22, 2021

View reviewed changes

rshen91 added 2 commits July 22, 2021 11:54

Merge remote-tracking branch 'upstream/master' into a11y-docs

c810a18

Merge remote-tracking branch 'origin/a11y-docs' into a11y-docs

33dd758

rshen91 merged commit c2d1882 into elastic:master Jul 22, 2021

rshen91 deleted the a11y-docs branch July 22, 2021 18:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(elastic charts docs): elastic-chart a11y features into eui docs #4916

docs(elastic charts docs): elastic-chart a11y features into eui docs #4916

rshen91 commented Jun 23, 2021 •

edited

Loading

kibanamachine commented Jun 23, 2021

kibanamachine commented Jun 24, 2021

kibanamachine commented Jun 24, 2021

kibanamachine commented Jun 24, 2021

kibanamachine commented Jun 24, 2021

kibanamachine commented Jun 28, 2021

myasonik left a comment

kibanamachine commented Jun 29, 2021

kibanamachine commented Jun 30, 2021

kibanamachine commented Jun 30, 2021

myasonik commented Jun 30, 2021

rshen91 commented Jun 30, 2021

kibanamachine commented Jul 16, 2021

kibanamachine commented Jul 16, 2021

kibanamachine commented Jul 16, 2021

elizabetdev commented Jul 19, 2021

elizabetdev Jul 19, 2021

rshen91 Jul 19, 2021

kibanamachine commented Jul 19, 2021

kibanamachine commented Jul 19, 2021

elizabetdev commented Jul 21, 2021

kibanamachine commented Jul 21, 2021

kibanamachine commented Jul 22, 2021

elizabetdev commented Jul 22, 2021

elizabetdev left a comment

kibanamachine commented Jul 22, 2021

docs(elastic charts docs): elastic-chart a11y features into eui docs #4916

docs(elastic charts docs): elastic-chart a11y features into eui docs #4916

Conversation

rshen91 commented Jun 23, 2021 • edited Loading

Summary

Checklist

kibanamachine commented Jun 23, 2021

kibanamachine commented Jun 24, 2021

kibanamachine commented Jun 24, 2021

kibanamachine commented Jun 24, 2021

kibanamachine commented Jun 24, 2021

kibanamachine commented Jun 28, 2021

myasonik left a comment

Choose a reason for hiding this comment

kibanamachine commented Jun 29, 2021

kibanamachine commented Jun 30, 2021

kibanamachine commented Jun 30, 2021

myasonik commented Jun 30, 2021

rshen91 commented Jun 30, 2021

kibanamachine commented Jul 16, 2021

kibanamachine commented Jul 16, 2021

kibanamachine commented Jul 16, 2021

elizabetdev commented Jul 19, 2021

elizabetdev Jul 19, 2021

Choose a reason for hiding this comment

rshen91 Jul 19, 2021

Choose a reason for hiding this comment

kibanamachine commented Jul 19, 2021

kibanamachine commented Jul 19, 2021

elizabetdev commented Jul 21, 2021

kibanamachine commented Jul 21, 2021

kibanamachine commented Jul 22, 2021

elizabetdev commented Jul 22, 2021

Bullet graph

elizabetdev left a comment

Choose a reason for hiding this comment

kibanamachine commented Jul 22, 2021

rshen91 commented Jun 23, 2021 •

edited

Loading