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

UI: Add some simple accessibility labels for line charts #4718

Merged
merged 5 commits into from
Oct 17, 2018

Conversation

DingoEatingFuzz
Copy link
Contributor

SVGs by default are either ignored entirely by screen readers or are read in an excruciating and unhelpful detail.

By adding some attributes and helpful labels, these charts become much more useful for people with visual impairments.

Includes

  1. Labeling svg charts as role=img
  2. Title and description fields for line charts
  3. aria-labelledby on svgs to associate the title and description fields in case the screen reader doesn't do that automatically.
  4. Use case specific title and label for the stats time series chart
  5. A longForm variation of the format-duration helper that ensures times are read correctly.

@DingoEatingFuzz DingoEatingFuzz requested a review from a team September 25, 2018 04:28
@DingoEatingFuzz DingoEatingFuzz mentioned this pull request Sep 26, 2018
5 tasks
- Treat it as an image
- Add a title and a description
- Hide the axes, just in case
Since this is a use case specific chart, we can use use case specific
language in our labels.
@johncowen
Copy link
Contributor

Hey!

Right so this one was a little difficult for me to try out! :) Not sure exactly what is expected, but it does read out the text (using VoiceOver on Safari and also Chrome which seem to work slightly differently)

It would be difficult for me to approve/not approve anything here based on usage, as I'm really not sure what is expected - VoiceOver seems to repeat things a lot (I think this is the excruciating bit you mention 😂 ). Would be good to chat with you to see what you are aiming for here. Happy to approve functionality-wise if it does what you are aiming for/expecting.

Code-wise, 1st little nit is you use 2 forms of the phrase 'time series', one with a hyphen and one without (smallest nit ever!). Apart from that the format-duration code seems quite involved, maybe worthwhile adding some doc at the top explaining the problem its solving, plus a few more inline comments explaining what it's doing where, whatever you think would be useful though.

I think overall I'd have some questions over the fact that you have used the plural forms as the name in your allUnits data, and then you are using a pluralize method to pluralize the longSuffix? I've also just noticed you seem to be pluralizing the 'short form' of the suffix, so 'ms' etc? Maybe I've misunderstood that. The more I look at this file the more I wonder about it, I think this would be one of those places we'd differ - but I'm happy if you are happy with it yourself? It's tested and it looks like it does what it says on the tin - a bit more documentation would also help.

Anyway, sorry not the greatest review in the world :(

Apart from the above, I'm not actually seeing any lines drawn on the graphs?

screen shot 2018-09-28 at 10 30 22

Feel free to shout me to go through if that would help.

@DingoEatingFuzz
Copy link
Contributor Author

I think overall I'd have some questions over the fact that you have used the plural forms as the name in your allUnits data, and then you are using a pluralize method to pluralize the longSuffix?

I suppose I could use the name field instead of introducing the longSuffix method, but the name field was mostly to map to moment method names. All suffix and longSuffix values are consistently singular.

I've also just noticed you seem to be pluralizing the 'short form' of the suffix, so 'ms' etc? Maybe I've misunderstood that.

Short forms don't get pluralized as dictated by the pluralizable: false flag.

The more I look at this file the more I wonder about it, I think this would be one of those places we'd differ - but I'm happy if you are happy with it yourself?

It's not my favorite code, but it's also a sticky situation. Can you describe what is it you don't like about it?

It's tested and it looks like it does what it says on the tin - a bit more documentation would also help.

There are inline comments, but I'll add some more for the new pluralizeUnits refactor that involves longForm.

@johncowen
Copy link
Contributor

I suppose I could use the name field instead of introducing the longSuffix method, but the name field was mostly to map to moment method names. All suffix and longSuffix values are consistently singular.

Yeah don't stress, it's just a thing I noticed and maybe part of the reason why both of us probably think this isn't 'our favorite'.

Can you describe what is it you don't like about it?

It's hard to put my finger on. Kind of why I asked if you were happy, I had a feeling it wasn't your favorite either. I think it was just a general feeling of 'there's a lot going on here, and reading through it a few times I'm still not exactly sure'. No biggie, maybe come back at a later date and see if can be improved at all.

@DingoEatingFuzz DingoEatingFuzz merged commit f02d99a into f-ui-improved-stats-charts Oct 17, 2018
@DingoEatingFuzz DingoEatingFuzz deleted the f-ui-a11y-line-chart branch October 17, 2018 16:45
@github-actions
Copy link

I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions.
If you have found a problem that seems related to this change, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 26, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants