New: Allow visua11y to appear in drawer

[oliverfoster]

fixes #85

New

• Allow visua11y to appear in drawer

Includes

• https://github.com/cgkineo/adapt-visua11y/pull/88 Breakpoint fixes

[oliverfoster]

@kirsty-hames would you mind styling this properly please?

[joe-replin]

Functionally, this works well and I like the solution for solving #83. With screen readers, I've noted a few issues.

Testing with NVDA with either Chrome or FF

• The entirely of the contents of the visua11y drawer is read out after the drawer heading is announced.
• Tabbing forward passed the close button focuses on the grouping for the entire visua11y drawer. The entirely of its contents is read out a 2nd time.

Testing with JAWS with either Chrome or FF

• The current browser tab is being read out in addition to the drawer header.
• On first tab forward in focusing on the close button, the entirely of the visua11y drawer is being read out.
• Attempting to use arrow keys to toggle radio buttons in the readability group first causes the label to be spelled out and then causes further keyboard presses to become unresponsive.

[oliverfoster]

I was hoping you could figure out how it should work? Please. @joe-replin

i.e. does it need a id="drawer-heading" adding somewhere?

[joe-replin]

Sure thing, @oliverfoster. Reviewing the PR was just the last thing I did at EOD yesterday so wasn't solutioning just yet. :)

[oliverfoster]

Actually, on second read, that stuff does sound quite fundamental. I'll do it, don't worry.

[kirsty-hames]

For _location notify, we have a top level class is-visua11ysettings applied to .notify. This is useful if you want style the Visua11y popup different from other notify popups in Adapt. Should we apply the same for .drawer?

[github-actions[bot]]

:tada: This PR is included in version 2.3.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: