Trial Sessions Page: Public View

cholly75 commented 3 months ago

As a member of the public, so that I can easily see what trial sessions are upcoming, I need a public view of the calendared Trial Sessions.

Currently, the Court maintains a web page populated with PDF files to inform the public of scheduled trial sessions. Since this information can become outdated over time and require re-publishing new files when a change is made and since the Trial Sessions in DAWSON are always up to date, we would like a public-facing version of the Trial Sessions page to be made available in place of the current web page.

Note that this story and #10461 should be released together; a feature flag may be necessary to facilitate separate deployments for each.

Pre-Conditions

Acceptance Criteria

Page is accessible to public facing (i.e., non-logged in user) w/ a unique URL
Page title is "Scheduled Trial Sessions"
Page displays all currently Open trial sessions only
Page retains current format of internal view of Trial Sessions page with the following exceptions:
- Tabs/Views removed: all (not needed since we only display Open sessions here)
- Columns removed: Est. End Date, Notice Issued
- Icons removed: 30-day NOTT reminder clock
- Links removed: Trial Session Planning Report
Page retains Location, Proceeding Type, Session Type, Judge filters
Location links direct user to public view of Session Info Page (see #10460)
List of Open Trial Sessions on page matches list of Open Trial Sessions on internal view at all times
Text addition to page: "Information on this page is current as of [current mm/dd/yy 12:00 AM Eastern]"

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.

katiecissell commented 3 months ago

UX Notes:

Figma file

Known issues:

Accessibility issue with the combo-box component: in mobile devices when VoiceOver or Talkback is on, the dropdown options are not selectable
~~Date field format hint text: add spoken text when screen reader is on and the field is onfocus~~
Blue selection pills have added padding on iOS (confirmed on iPhone 15 and iPad Air 4th gen); on android, they're fine

ttlenard commented 2 months ago

Test Cases

1) Public user can now accesses the new Scheduled Trial Sessions Page; page loads and matches the mockup.

As a public non-logged in user, access the URL for the new Scheduled Trial Sessions Page (URL to be determined by devs.)
Review the page

Expected Results:

[x] NEW FUNCTIONALITY - Welcome to DAWSON/Log in, and Create Account links in normal location
[x] NEW FUNCTIONALITY - Page title is Scheduled Trial Sessions
[x] NEW FUNCTIONALITY - Text below the page title matches the mockup, but is today's date and time (in eastern time zone)
[x] NEW FUNCTIONALITY - Proceeding type radio button has All selected by default
[x] NEW FUNCTIONALITY - There is a card for Remote Proceedings, links open appropriately (in the same tab)
[x] NEW FUNCTIONALITY - Session type, Location, and Judge are all optional filters, nothing selected by default
[x] NEW FUNCTIONALITY - Reset filters link is disabled
[x] NEW FUNCTIONALITY - Table data below the filters displays all open trial sessions (see mock for column names)
[x] NEW FUNCTIONALITY - The city/state displays as a link (dev discretion on if the links are active or not for this story (see associated story #10461)
[x] NEW FUNCTIONALITY - If a session is a swing session, hover over tip displays "Swing session: will be held in two cities."

2) Public user applies filters; results list displays the correct data based on the filters selected.

Part 1

Continuing from the previous test
Change the proceeding type to In Person

Expected Results:

[x] NEW Functionality - Results list of scheduled trial sessions filters appropriately to display only sessions that are in Person
[x] NEW Functionality - No Remote sessions are displayed in the results
[x] NEW FUNCTIONALITY - The Reset Filters link activates
[x] NEW Functionality - Clicking Reset filters link clears the filters, refreshes the results, and sets the proceeding type radio button back to the default of All

*Repeat this test but instead choose Remote

Part 2

Continuing from the above
Select the In Person radio button
Select one or more session types from the dropdown

Expected Results:

[x] NEW FUNCTIONALITY - The Session type selections that you selected will display underneath the dropdown in a blue pill container.
[x] NEW FUNCTIONALITY - Accessibility - These blue pill containers can be selected using a keyboard, and can be removed by using the keyboard only
[x] NEW Functionality - Results list of scheduled trial sessions filters appropriately to display only sessions that are in Person and with the Session type filters that you applied.
[x] NEW Functionality - No Remote sessions are displayed in the results, and neither are any of the session types that you did not select.
[x] NEW FUNCTIONALITY - The Reset Filters link activates
[x] NEW Functionality - Clicking Reset filters link clears the filters, refreshes the results, and sets the proceeding type radio button back to the default of All

*Repeat this test, but add in additional filters for Location and Judge

3) Public user applies multiple filters; results list displays correct data; User manually removes some of the filters by clicking on the "x" in the pill; results list refreshes with the updated filters

Public user accesses the Scheduled Trial Sessions Page
Select multiple filters for Session type/Location/Judge
Click Apply Filters
Results list should update
Manually click on the "x" in one of the pill containers

Expected Results:

[x] Results list refreshes with the updated list based off of the filter that you just removed

Repeat this test by removing multiple filters by clicking on the x in the pill container. Results list will update each time a filter is removed. If you add a new filter to the list, you must click apply filters for the new filter added to "take"

4) Repeat the tests above on a mobile device

[x] Tests pass on iOS
[ ] Tests pass on Android
[ ] Clicking on the swing session icon displays the hover text appropriately on mobile.
[x] Mobile design matches mockups

swongCO commented 2 weeks ago

UX test feedback (desktop)

[x] Add a period to the end of the sentence
[x] Increase spacing between radios to 32px
[x] Add spinning loader when Reset Filters is clicked
[x] Reduce spacing between Reset Filters and table counter
[x] Reduce spacing above and below paginator (can match spacing in feedback above)
[x] Table counter should display total results, not per page
[x] Table counter font weight: label = semibold; number = regular
[x] Dropdowns should stack at smaller breakpoints - see Custom Case Report
[x] Swing session icon hover tip: "Swing session: will be held in two cities"
[x] Adjust spacing of swing session icon in its column - match internal trial session view

Internal view icon:

Public view icon:

swongCO commented 2 weeks ago

Test feedback for Remote Proceedings card

[x] Reduce width of horizontal divider
[x] Reduce height of card

swongCO commented 2 weeks ago

Test feedback (mobile)

[x] Swing session icon is missing next to location
[x] Add empty state message
[x] Increase the width of the dropdown filters to match the card and table
[x] Adjust spacing as indicated in screenshots (if fixing the desktop view addresses this, disregard)

[x]
[x]
[x]

swongCO commented 2 weeks ago

Accessibility feedback

Items flagged by WAVE Evaluation Tool and manual testing:

there are two H1s (Welcome to Dawson and Scheduled Trial Sessions)
H3 is not on desktop (goes from H2 Remote Proceedings to H4 Week of…) but there is H3 on mobile (filters accordion)
no label for hidden icon column
swing session icon is not keyboard navigable and hover tip is not read by VoiceOver
combo box picklist is not selectable in mobile with VO/Talkback on

[x] Hidden icon column - add text for screen readers "Swing session icon"
[x] Enable swing session icon and hover tip to be keyboard navigable
[x] Enable label and hover tip for swing session icon to be read by screen readers
[x] Timebox: enable combo box picklist to be selectable in mobile with VoiceOver/Talkback on (discuss options at the end of timebox)

swongCO commented 1 week ago

UX feedback

[x] There is more spacing than previous between the pill and the filter, which impacts the spacing when the browser window width is reduced
[x] Remote proceedings links should open in the same tab
[x] Remote proceedings card should be positioned above the filters (instead of below) when the browser window width is reduced, like it is in mobile view
[x] Mobile - add "Week of" in header row before the date

swongCO commented 1 week ago

UX feedback

[x] Remove H1 from welcome text and make it a div
[x] Reduce font size of welcome text to 26px to match font size on log in page

ttlenard commented 1 week ago

Some initial Testing feedback: @cruzjone-flexion @nechama-krigsman

[x] Looks like standalone remote is not present as a filter in the Location dropdown. Please add Standalone remote as the first option in the Location dropdown to match the internal view. Thanks!

ttlenard commented 1 week ago

Testing Feedback @cruzjone-flexion @nechama-krigsman

Everything looks good, with the exception of the swing session icon not being able to be clicked/hovered on mobile. @swongCO mentioned that there is a design debt card to address this. Once I have the story number for that Design Debt item, I will add it to this comment

UPDATE: Design Debt ticket is #10548

flexion / ef-cms