Accessibility fixes

[cjcolvar]

Changes in this PR:

• Move aria-label from Tooltip to parent Button components
• Remove special CSS from CurrentTimeIndicator component so all parts of it appear black and the same font size (Demo site: Color contrast does not meet minimum requirement #57)
• Add aria-label to edit annotation icon button
• Add aria-label to volume Slider component
• Set page language using override of generated page (Demo site: page language has not been identified #55)
• Remove restrictions on zooming from viewport meta element using override of generate page (Demo site: page zoom is restricted #54)
  • This does not appear to affect layout of the elements
• Allow page to scroll when zooming (related to Demo site: page zoom is restricted #54)
  • Zooming to 200% can push certain parts of the page offscreen and thus unreachable without scroll bars
  • This does not appear to affect layout of the elements

Not resolved in this PR:

• Demo site: Hidden element has focusable content #56
  • I believe MaterialUI handles the modal switching the app in the background to aria-hidden=true and adds custom JS handling to make the app's elements be non-focusable (https://mui.com/material-ui/react-modal/#focus-trap). We could add some more custom handling which would set and remove tabindex="-1" on all of the interactive elements in the app but that might be hacky given that MaterialUI also handles setting elements tabindex. (Maybe it is possible to override the methods in MaterialUI which set aria-hidden on the app root div node to also mark/unmark the tabindex on interactive elements?)

[cjcolvar]

Thinking about this a little more I think we could work around the issue with not being able to modify the template used for generating the index and app/index pages. Since we're not changing those pages content often we could make copies of the generated pages, edit them, and then use them to overwrite the generated pages during the docker container build process or earlier in the build process.

[cjcolvar]

I overrode the generated pages at the end of the build process and was able to insert the page language and modify the viewport. With this SiteImprove is happier (#56 still isn't handled) and the UI and behavior doesn't appear to be any different for me on Firefox. Since overflow is hidden I wonder if declaring a maximum-scale would be good since it would announce to the user that content gets hidden when zoomed above that threshold. Setting that would flag in SiteImprove so maybe what we really need to do is set overflow to scroll and not set a maximum-scale. I tried this and it seems like it didn't negatively impact normal 100% zoom. My tests were in the standalone demo site and things may behave differently in Avalon.

[cjcolvar]

I updated the PR description to reflect the changes I pushed in the last commit and mentioned in my previous comment.

[Dananji]

👍

I just have one question on the redirect to app/index.html.

[Dananji]

Does this need to point to the override code?

[cjcolvar]

These files are copied into /dist/index.html at the end of yarn build so the path is correct.
https://github.com/IUBLibTech/timeliner/pull/60/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R10

[elynema]

@cjcolvar I'm still getting a message about a button missing a text alternative for the volume slider component from the SiteImprove browser plugin:

This seems like it would be quick / easy to resolve?

[elynema]

Given what is documented for the volume slider here: #61, it may make sense to get rid of this button altogether, and so may not make sense to create a label for it.