Accessibility updates to Alternate viewer section and copy buttons

[mferrarini]

Description

An accessibility audit completed at Harvard revealed two issues that occur when screenreaders are interacting with the share plugin.

1. The small IIIF logo image is a link that a user can click on (which brings up the iiif.co website) OR drag into another viewer instance (to quickly load a new object into the canvas).
   • None of this is explained to a user relying on assistive technology.
   • The two behaviors (clicking vs. dragging) have different destinations, which can be confusing to any user.
   • The current instructions provided is also not intuitive, especially for novice users.
2. There is no visual or audio cue when a "Copy" button has been clicked; a user is left guessing whether or not the information has been copied to the clipboard (so this is both an accessibility and a usability concern).

Fixes

1. Update the IIIF icon href to point directly to the manifest (instead of going to the iiif.co homepage on click, the current default behavior); there is still the option to add a reference to the iiif.co page with the "What if IIIF?" link (which is included by default)
2. Add an alternative interaction where the manifest can be copied to clipboard using the same "Copy" button pattern as the other sections (this is a clear and easy alternative to the cursor/touch-only affordance of the click & drag IIIF icon and satisfies accessibility concerns)
3. Add both an audio and visual cue that "Copy" buttons have been clicked (this should be applied to all three "copy to clipboard" buttons)
4. Update the "Alternative viewer" section to have a clearer title and instructions (see screenshot of new language and layout).

How should this be tested?

• Spin up the demo site from this branch: npm run start
• Visually check to see that the share modal window matches that shown in the screenshot below
• Click on each "copy" button and see that a notification window is triggered in the top center (it should have a green background, with a success icon and message that says "Link/Code/Manifest copied to clipboard!")
• Click and drag the IIIF icon into another viewer instance to ensure that functionality is still working and opens up the image in the new viewer space
• Click on the "What is IIIF?" link to ensure that is still working and brings you to the IIIF.io homepage.

Unit tests were also updated to reflect the changes made related to the legend and label components: npm run test

[marlo-longley]

Hi @mferrarini -- thanks for taking this on! The code looks good to me. I tested everything according to your steps and all worked as expected.

My one suggestion is about the font inside the Snackbar elements. When I'm running it locally, I'm not getting the app-wide Roboto font but instead a serif font. I was able to fix this by using Typography, just a suggestion if you are running into the same thing.

    <CopyToClipboard text={shareLinkText}>
      <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy link to clipboard" onClick={() => enqueueSnackbar((
        <Typography variant="body1">
          Link copied to clipboard!
        </Typography>
      ), { variant: 'success' })}>Copy</Button>
    </CopyToClipboard>

[mferrarini]

This is great feedback, thank you @marlo-longley ! I'll go ahead and make this change so the fonts are aligned with Mirador.

[phil-plencner-hl]

This all works as described. Looks great.