Index Navigation Bar on Document View - Correct Placement

cholly75 commented 9 months ago

As a Court user, so that I can quickly navigate to related docket entries, I need the Index portion of the Document View to display the entry I am currently viewing when there is a scroll bar.

One quality of life improvement that has been requested several times is for documents to appropriately position the scrollbar when navigating to the document view from the docket record. Currently if there is a scrollbar in the Index nav, although the viewed document is correctly highlighted the scrollbar is positioned at the top. This makes it irritating to scroll down to the correct entry on the Index to view the surrounding documents.

Note that this is not an issue when the entirety of the docket record is visible on the Index nav.

We would like for the scrollbar/Index nav to display the viewed document when navigating to the Document View.

Pre-Conditions

Acceptance Criteria

Navigating to the document view appropriately positions the Index Nav so that the highlighted entry and scrollbar are immediately visible to the user.
Navigating to the document view does not jump the user immediately to the bottom of the browser window.

Notes

Tasks

Test Cases

Story Definition of Ready (updated on 12/23/22)

The following criteria must be met in order for the user story to be picked up by the Flexion development team. The user story must:

[ ] Is framed in business/user need, the value has been addressed.
[ ] Includes acceptance criteria
[ ] Has been refined
[ ] Pre conditions have been satisfied.

Process: Flexion developers and designers will test if the story meets acceptance criteria and test cases in Flexion dev and staging environments (“standard testing”). If additional acceptance criteria or testing scenarios are discovered while the story is in progress, a new story should be created, added to the backlog and prioritized by the product owner.

Definition of Done (Updated 5-19-22)

Product Owner

[ ] Acceptance criteria have been met and validated on the Court's migration environment
[ ] Add scenario to testing document, if applicable (https://docs.google.com/spreadsheets/d/1FUHKC_YrT-PosaWD5gRVmsDzI1HS_U-8CyMIb-qX9EA/edit?usp=sharing)

UX

[ ] Business test scenarios have been refined to meet all acceptance criteria
[ ] Usability has been validated
[ ] Wiki has been updated (if applicable)
[ ] Story has been tested on a mobile device (for external users only)

Engineering

[ ] Automated test scripts have been written, including visual tests for newly added PDFs.
[ ] Field level and page level validation errors (front-end and server-side) integrated and functioning.
[ ] Verify that language for docket record for internal users and external users is identical.
[ ] New screens have been added to pa11y scripts.
[ ] All new functionality verified to work with keyboard and macOS voiceover https://www.apple.com/voiceover/info/guide/_1124.html.
[ ] READMEs, other appropriate docs, and swagger/APIs fully updated.
[ ] UI should be touch optimized and responsive for external only (functions on supported mobile devices and optimized for screen sizes as required).
[ ] Interactors should validate entities before calling persistence methods.
[ ] Code refactored for clarity and to remove any known technical debt.
[ ] If new docket entries have been added as seed data to efcms-local.json, 3 local s3 files corresponding to that docketEntryId have been added to web-api/storage/fixtures/s3/noop-documents-local-us-east-1
[ ] Acceptance criteria for the story has been met.
[ ] If there are special instructions in order to deploy into the next environment, add them as a comment in the story.
[ ] If the work completed for the story requires a reindex without a migration, or any other special deploy steps, apply these changes to the following flexion branches:
- [ ] experimental1
- [ ] experimental2
- [ ] experimental3
- [ ] experimental4
- [ ] experimental5
- [ ] experimental6
- [ ] develop
[ ] Reviewed by UX on a deployed environment.
[ ] Reviewed by PO on a deployed environment. Can be deployed to the Court's test environment if prod-like data is required. Otherwise deployed to any experimental environment.
[ ] Deployed to the Court's staging environment.

ttlenard commented 9 months ago

Test Cases

1) Court user views a document on the docket record; Document preview page has the document selected for preview highlighted, and the scroll bar on the left side of the page is properly placed in view.

Log in as a Court user
Navigate to a case that has a more than 10 documents on the docket record
Click on a document link for a document that is "lower" on the docket record

Expected Results:

[x] The document preview page displays
[x] NEW FUNCTIONALITY - The document title/scrollbar section on the left is scrolled appropriately so that the document selected is in view.
[x] NEW FUNCTIONALITY - The page loads and the far-right scrollbar is all the way to the top so that you can see the document title and Case tabs.
[x] User can click on different documents on the left panel, and they display appropriately in the document preview

2) Court user clicks on Docket record tab from the document view; Clicks on the document link for another document, Document preview displays correctly, as above.

Continuing from the previous test
Click on the Docket Record tab
Scroll down to a different document on the docket record
Click on the document link for a document that is "lower" on the docket record

Expected Results:

[x] The document preview page displays
[x] NEW FUNCTIONALITY - The document title/scrollbar section on the left is scrolled appropriately so that the document selected is in view.
[x] NEW FUNCTIONALITY - The page loads and the far-right scrollbar is all the way to the top so that you can see the document title and Case tabs.
[x] User can click on different documents on the left panel, and they display appropriately in the document preview

3) Regression test viewing documents on cases that do not have a scroll bar when previewing a document.

[x] Document viewer and document index on the left continue to display appropriately.

*Repeat these tests with various Court users to ensure that the functionality is the same for all Court users.

swongCO commented 8 months ago

UX Note As discussed with Cody, when a user clicks from the Docket Record view to the Document View, the page will jump to the two tabs to give more space for the table and preview pane.

flexion / ef-cms