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

[Uptime] Fix accessibility issue in Uptime app nav links #72926

Merged

Conversation

justinkambic
Copy link
Contributor

Summary

Fixes #71165.

We had a number of cases where navigation links were utilizing React Router's Link component, and nesting an EuiButton. This caused the rendered HTML to nest a button element inside an a tag.

To work around this, I followed the EUI team's recommendations for integrating with React Router 5.1+ and utilize the useHistory hook to create href values which I then provided to EuiButton. When this prop is provided, EuiButton will render an a tag; this should cause us to preserve all functionality while removing the unnecessary button, with no impact to the page styling.

Testing this PR

To test this PR, ensure that all of the links noted in the issue are still working.

Checklist

Delete any items that are not applicable to this PR.

For maintainers

@justinkambic justinkambic added bug Fixes for quality problems that affect the customer experience release_note:fix Project:Accessibility v8.0.0 Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability v7.10.0 v7.9.0 labels Jul 22, 2020
@justinkambic justinkambic requested a review from a team as a code owner July 22, 2020 17:37
@justinkambic justinkambic self-assigned this Jul 22, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/uptime (Team:uptime)

Copy link
Contributor

@myasonik myasonik left a comment

Choose a reason for hiding this comment

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

Ran it locally and everything seems to work! Thanks for the quick turnaround on this!

Copy link
Contributor

@andrewvc andrewvc left a comment

Choose a reason for hiding this comment

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

LGTM

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Build metrics

async chunks size

id value diff baseline
uptime 630.4KB -29.0B 630.4KB

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@justinkambic justinkambic merged commit 24ebe0a into elastic:master Jul 22, 2020
justinkambic added a commit to justinkambic/kibana that referenced this pull request Jul 22, 2020
* Fix accessibility issue in Uptime app nav links.

* Refresh outdated snapshot.

* Introduce aria-label for hidden content.
justinkambic added a commit to justinkambic/kibana that referenced this pull request Jul 22, 2020
* Fix accessibility issue in Uptime app nav links.

* Refresh outdated snapshot.

* Introduce aria-label for hidden content.
gmmorris added a commit to gmmorris/kibana that referenced this pull request Jul 23, 2020
* master: (35 commits)
  Migrated karma tests to jest (elastic#72649)
  Migrate status page app to core (elastic#72017)
  Failing test: Jest Tests.src/plugins/vis_type_vega/public (elastic#71834)
  Fix Firefox TSVB flaky test with switch index patterns (elastic#72882)
  [ML] Fixing link to index management from file data visualizer (elastic#72863)
  test: 💍 add test for sub-expression variables (elastic#71644)
  fix bug (elastic#72809)
  [keystore] use get_keystore in server cli (elastic#72954)
  Show step number instead of incomplete step. (elastic#72866)
  Fix bug where user can't add an exception when "close alert" is checked (elastic#72919)
  [Monitoring] Fix issues displaying alerts (elastic#72891)
  [Ingest Manager] Add more Fleet concurrency tests elastic#71744 (elastic#72338)
  [Security Solution][Exceptions] - Update UI exceptions builder nested logic (elastic#72490)
  disable renovate masterIssue
  [ML] API integration tests for UPDATE data frame analytics endpoint (elastic#72710)
  [Uptime] Fix accessibility issue in Uptime app nav links (elastic#72926)
  [Maps] fix removing global filter from layer can cause app to start thrashing (elastic#72763)
  [Maps] fix blended layer aggregation error when using composite aggregation (elastic#72759)
  fix unexpected arguments to unload command
  Limits the upload size of lists to 9 meg size (elastic#72898)
  ...
justinkambic added a commit that referenced this pull request Jul 23, 2020
…2965)

* Fix accessibility issue in Uptime app nav links.

* Refresh outdated snapshot.

* Introduce aria-label for hidden content.
justinkambic added a commit that referenced this pull request Jul 23, 2020
…2964)

* Fix accessibility issue in Uptime app nav links.

* Refresh outdated snapshot.

* Introduce aria-label for hidden content.
@justinkambic justinkambic deleted the uptime_header-link-accessibility branch July 23, 2020 22:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience Project:Accessibility release_note:fix Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability v7.9.0 v7.10.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

(Accessibility) <button> found within <a>
5 participants