Fix List Item Accessibility Violation

[pixiwyn]

As a user of DAWSON, so that I can navigate the application using a screen reader and other accessibility tools, I need the paginator used in DAWSON to be free of accessibility violations.

Pre-Conditions

Acceptance Criteria

• All cypress accessibility tests should pass without excluding the axe core rule, listitem.

Notes

• Resolving this issue could take several paths, we could submit a fix to the react paginator package, fork the package and fix the issue on our own and maintain that repository, or find a new paginator package that does not have accessibility violations.

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

• [x] Automated test scripts have been written, including visual tests for newly added PDFs.
• [x] Field level and page level validation errors (front-end and server-side) integrated and functioning.
• [x] Verify that language for docket record for internal users and external users is identical.
• [x] New screens have been added to pa11y scripts.
• [x] All new functionality verified to work with keyboard and macOS voiceover https://www.apple.com/voiceover/info/guide/_1124.html.
• [x] READMEs, other appropriate docs, and swagger/APIs fully updated.
• [x] UI should be touch optimized and responsive for external only (functions on supported mobile devices and optimized for screen sizes as required).
• [x] Interactors should validate entities before calling persistence methods.
• [x] Code refactored for clarity and to remove any known technical debt.
• [x] 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
• [x] Acceptance criteria for the story has been met.
• [x] If there are special instructions in order to deploy into the next environment, add them as a comment in the story.
• [x] 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
• [x] 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]

Test Cases

• [ ] Cypress tests pass
• [ ] Screen readers work when accessing the system/paginators
• [ ] Works with screen readers on mobile devices.

[Mwindo]

I looked into this briefly. Unfortunately, the issue is with the third-party library react-paginate itself. See https://github.com/AdeleD/react-paginate/issues/459. The options I can think of:

1. Changing the DOM post-load. This seems terribly clunky.
2. Forking. This seems high-cost.
3. Switching to a different library. Again, this seems high-cost.
4. Pinning to an earlier version, e.g., version 8.1.3. (Per this comment.) This isn't necessarily ideal, but it's much better than the above.
5. Punting for now and hoping the issue is resolved with a future release. (Although the most recent release is April 2023.)

Depending on the severity of this issue, I think the best options are 4 and 5, but I am open to other suggestions.

[Mwindo]

Unassigning myself for now, but happy to pick back up in a few days.

[ttlenard]

@TomElliottFlexion Everything looks good with the exception of a small typo here. This should be "your".