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

[UIEH-440] More Accessible Routing #448

Merged
merged 6 commits into from Jun 28, 2018

Conversation

Projects
None yet
2 participants
@wwilsman
Collaborator

wwilsman commented Jun 28, 2018

Purpose

[UIEH-440]

This initially started as a spike to see how accessible routing looked in eholdings. This cleans up that POC and adds tests.

Approach

As it turned out, this POC has little to do with the actual routing or routes.

  • Focus the pane title when a new search is conducted

    This was done in the SearchPaneset component. When the component updates with a new search within the same search type, the results pane title will receive focus. Similarly, when navigating directly to an existing search (via external link), the results pane title is also focused on mount (as long as the details view is not also visible).

  • Focus the search results list item when a details pane is closed

    The search route knows which element is currently, and was previously active, so the active item logic was moved into the getResults() method of that route. Since this route also knows the previous active item, when the details view is closed the previously active item will receive focus.

    This is done via a shouldFocusItem prop which reflects the previous item ID that will be sent to all list items. When the list item ID matches, it is made focused via an HOC designed specifically to focus elements on mount and update. This was made into an HOC in case this pattern is needed again in the future.

  • Focus the details pane heading when it becomes active

    For this, the details view is one of the deepest navigation points in our app. So whenever that component is mounted, it should receive focus. Since the heading sometimes is not visible while loading, on update after it is finished loading it will focus the heading.

TODOs

  • This only covers three primary areas of eholdings. Still to be done is search form focus management in all places where we can conduct searches, and most likely some other areas as well.

Screenshots

a11y-routing

Not sure why this gif looks weird but ¯_(ツ)_/¯

@wwilsman wwilsman requested review from cherewaty and Robdel12 Jun 28, 2018

@cherewaty

🥇

@wwilsman wwilsman merged commit a80721f into master Jun 28, 2018

8 checks passed

ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: checkout-and-install Your tests passed on CircleCI!
Details
ci/circleci: eslint Your tests passed on CircleCI!
Details
ci/circleci: stylelint Your tests passed on CircleCI!
Details
ci/circleci: test-chrome Your tests passed on CircleCI!
Details
continuous-integration/jenkins/branch This commit looks good
Details
continuous-integration/jenkins/pr-merge This commit looks good
Details
license/cla Contributor License Agreement is signed.
Details

@wwilsman wwilsman deleted the ww/a11y-routing-poc branch Jun 28, 2018

@Robdel12 Robdel12 referenced this pull request Jul 17, 2018

Merged

Introduce accessible routing documentation #497

1 of 1 task complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment