Feature/464 check accessibility

[maxdiebold-erg]

Related Issues:

• HMW-464
• HMW-469

Main Changes:

• Updated several HTML element attributes in response to feedback from accessibility tools.
• Switched to lazily loaded routes to cut initial bundle size from ~3,300 KiB to ~1,500 KiB.
• Fixed issue of new surrounding features layers not appearing in legend.
• Switched to single color for scatter plot dots on Monitoring Report page.
• Added ability to focus and trigger map widgets with keyboard.
  • Updated layer labels in the surrounding widget so that they are read by screen reader when focused.
  • The visible state of the Add/Save Data Widget was not updating properly: I altered it so the trigger re-renders when the visibility state changes, so that it has the latest value of the state variable. This causes the trigger to re-render more often, but I believe it will also aid in the switch to React 18 in the future.
  • There is more that could be done to improve keyboard navigation, but these changes at least make it possible to operate the widgets with a keyboard.

Steps To Test:

1. Navigate around various pages of the app and confirm that the lazily loaded routes still function as expected.
2. Go to the Community page, open the Surrounding Features widget, and toggle on the "Dischargers" layer.
3. Confirm that the "Permitted Discharger" item is visible in the legend.
4. Toggle on the "Dischargers" layer in the layer list.
5. Confirm that only one "Permitted Discharger" item is visible in the legend.
6. Repeat steps 2 - 5 for the "USGS Streamgages" layer.

NOTE: The monitoringLocationsLayer and surroundingMonitoringLocationsLayer legend items are separate, because their cluster size varies between the layers.

7. Test navigating around the map canvas with the keyboard and triggering widgets with the "Enter" or "Space" key.

TODO:

• For the new items, there were additional accessibility issues, but they relate to other issues that were already present across the application: the "ARIA IDs are not unique" warnings all point to instances where the @reach/tabs library is used. This is because each ARIA ID is only unique within a particular Tabs group, but we use multiple such groups on a single page. This issue has been raised in Duplicate IDs when using multiple tabs instances reach/reach-ui#947, but it hasn't yet received a response, and, according to Reach UI is not currently maintained reach/reach-ui#972, the library currently isn't maintained. We should check back on this issue, but it might not be fixed anytime soon.
• To improve keyboard navigation across map widgets, we should consider automatically focusing panels when they are opened, and returning focus to the trigger when they are closed. Additionally, to match the behavior of Esri widgets, we may want the Esc key to close focused panels.

[cschwinderg]

I'm still reviewing this PR, but I wanted to give you a heads up on some style issues I found.

• The popups on the waterbody report, monitoring report, and plan summary pages are a different style than the rest of the app (see screenshots below)
  
  
  

• Tab styles are messed up on the about, state, tribe, and national pages
  
  
  

[maxdiebold-erg]

@cschwinderg Ouch, I guess I forgot to check the other pages. I'm sure that has to do with the lazy loading. I only thought to add that because it was mentioned in the Lighthouse analysis, but it's definitely not necessary for this release and can be rolled back for now.

[cschwinderg]

Good catch on the keyboard navigation issues!

I left a couple more suggestions below related to the Add & Save Data Widget.

[cschwinderg]

For the new items, there were additional accessibility issues, but they relate to other issues that were already present across the application: the "ARIA IDs are not unique" warnings all point to instances where the @reach/tabs library is used. This is because each ARIA ID is only unique within a particular Tabs group, but we use multiple such groups on a single page. This issue has been raised in reach/reach-ui#947, but it hasn't yet received a response, and, according to reach/reach-ui#972, the library currently isn't maintained. We should check back on this issue, but it might not be fixed anytime soon.

I don't think we should do anything about it this release, but we should switch to a different library (probably USWDS) or even make our own tab component. This will probably be a HMW V3 issue.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[cschwinderg]

Thanks for making those changes!