Add tooltip for unauthenticated download button

[yugalkaushik]

Fixes #3511

Changes:

Web-Editor.mp4

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[raclim]

Thanks so much for your work on this @yugalkaushik, I think this looks great so far!

I think my only concern is whether the implementation for this tooltip is WCAG 2.2 compliant. I think the relevant criterion might be 1.4.3 Content on Hover or Focus?

[yugalkaushik]

So I tried making the tooltip WCAG 2.2 compliant, but it looks like we'd need to change the whole functionality to make it work properly or we can keep the basic implementation. What do you suggest?

[raclim]

Thanks for taking a look into it!

We're aiming to become WCAG 2.2 compliant, so I think it might be better to take a step back to come up with a tooltip that meets the criterion before pushing anything out. This is also probably linked to @takshittt's PR (#3497). Maybe this could be something to look into altogether?

[yugalkaushik]

I'm thinking of creating a separate, common tooltip modal component that we can reuse wherever needed. This should help reduce the need to manually implement tooltips in each component. Once that's done, we can use that tooltip here as well.

[awood0727]

Hi @raclim, my team and I, which consists of @npNSU, @kaybcodes, and @SilasVM have looked into issues #3709 and #3511. We agree they could be modified to be more WGAC-compliant, and have done some work/research into doing so. Some potential improvements are as follows: ensure the user can dismiss the prompt themselves (utilizing their keyboard and mouse to exit), and ensure the labels are written as simply as possible for screen reader users.

We were also able to match the tooltip color from this pull request and PR #3497. We explored an option that can make unavailable buttons grayed out while the user is not logged in, and additionally located the area where it is possible to change; however, it changes the entire list color, so new lines of code will need to be added to specify the list element in question. Additionally, we believe that the amount of work needed to complete this will take a lot of time and effort. This is why we believe the best course of action would be to allow multiple contributors to help with both issues to make them more WGAC-compliant. With the ability my team has, we believe we can only gray out the buttons that are in question, and if you would like to, we can make a pull request for that and continue to allow other contributors to edit our changes and continue with the outline we have suggested.