Website accessibility improvements

[lsfgrd]

Related Issue

None

Proposed Changes

• Remove the outline:none from the plugin button's focused state. It was practically impossible to navigate these buttons with the keyboard without outlines. I also propose adding a condition to only render the "collapsed" state if the user clicks the "+" button instead of having it rendered all the time but not visible. Check the demo bellow;

https://user-images.githubusercontent.com/9519976/135757298-a4170dea-34be-4abf-b77e-f495c89d9cab.mov

• Add the aria-label attribute to the "+/x" button to indicate the respective action to screen readers;
• Add alt text to the logo so screen readers can understand it's a logo;
• Add the lang property to the html tag to indicate the content's language declaratively.

This is the Lighthouse rating before the changes:

After the changes:

Here you can see some improvement on SEO and Performance as well.

The Best Practices metric went down due to dev environment not using HTTPs. It should be good live.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.