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

[Logstash] [Pipeline Viewer] Improve LS monitoring accessibility #24169

Conversation

justinkambic
Copy link
Contributor

Summary

Resolves #18065

The accessibility of the Pipeline Viewer was already greatly improved with the changes we added in #18597 for 6.4.0, but it can be improved with the proper addition of aria-labels for the buttons on the view.

With regards to tab order, @snide and I confirmed that everything looks fine with it, and it should because the view is composed exclusively of EUI components.

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

- [ ] This was checked for cross-browser compatibility, including a check against IE11 All the components in question are EUI-maintained
- [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support No text was added, the labels use the name fields.
- [ ] Documentation was added for features that require explanation or tutorials No functionality was added, aside from increasing the utility of screen readers

For maintainers

Testing this PR

The updated snapshots should demonstrate the needed labels being rendered, but if you want to actually see the view rendering these I'm happy to help stand up a LS instance.

Alternatively, here's an example of each of the button types rendering the appropriate aria-label attribute:

  • Plugin Statement:
    image
  • Collapsible Statement Icon Button:
    image
  • Collapsible Statement Name button:
    image

cc @AlonaNadler

Copy link
Contributor

@snide snide left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm

@elasticmachine
Copy link
Contributor

💔 Build Failed

@justinkambic
Copy link
Contributor Author

jenkins test this

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@justinkambic justinkambic merged commit 2b6cd21 into elastic:master Oct 18, 2018
justinkambic added a commit that referenced this pull request Oct 18, 2018
)

* Update test data shape to conform to component proptypes.

* Add aria-labels for pipeline viewer buttons.
@justinkambic justinkambic deleted the monitoring_ls-pipeline-viewer-accessibility branch October 18, 2018 16:46
@justinkambic
Copy link
Contributor Author

Backported to:
6.x/6.5.0 de08f17

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants