Test new drawer toggle pattern

[kimisgold]

The drawer-toggle-a11y branch includes a new pattern for handling interface containers that expand, collapse, and sometimes drag to sort.

Drawers appear on the following views:

• Element Sets, Edit
• Item Types, Edit
• Item, Edit files
• Settings, Item Type Elements
• Appearance Settings, Navigation

The following functionality needs to be tested for each drawer appearance:

• Drawers collapse and expand when the arrow button is present.
• Drawers that can be sorted still sort.
• Screen readers identify buttons, as well as their expand and collapse states.
• When using a screen reader, the drawers are labeled so that the user can clearly identify where they are the page. Using the image example, when the user is focused on the "Comment" textarea, the screen reader associates it with the "Title" container.

Please test in Chrome, Edge, Safari, and Firefox for desktop and Safari for iOS.

[katknow]

I'm working on the screen reader testing now, but I thought I'd update on the first two points.

I'm not sure if this is a problem or not, but in some places there is a drop down arrow and then no content while in other places there is no drop down if there is no content. In this situation I imagine it may be because most of the other drawers have content, but I'm not sure.

On the Settings > Item Type Elements page, the drawers do not seem to have the arrow or sort capabilities. I've tested on all browsers, refreshed, cleared cache, etc. and it stays the same. This is the only page you listed that does not seem to have the new features.

[katknow]

The screen reader seems to do fine with the expand/collapse arrows, but it doesn't acknowledge the sort symbol for drag and drop.

For some reason, Firefox does not recognize any of the drawers on the Appearance > Navigation page but it does fine in all other browsers. Firefox also seems to have trouble with the Item Type drawers, but it's not consistent.

In Safari, it recognizes the arrow but it says "show options" and does not indicate whether it is expanded or collapsed. However, on the Item Types page it does say "show description" if you are on the arrow and the drawer is closed.

Overall, if something has options in Chrome and Edge it does tell you if the drawer is open or closed. However, on pages like the Item Type that just have a description it says "show description" and does not indicate whether the drawer is open or closed before you get to the description text or skip to the next drawer.

On the appearance nav page, should the screen reader be able to pick up the URL field?

[kimisgold]

@katknow Can you point me towards where I should find that first screenshot, with the empty containers for "Birth Date", "Birthplace", "Death Date", and "Occupation" elements?

[katknow]

Of course! That one was under Item Types > People. That issue popped up under a few of the item types (on looking again, these may have been ones imported from elsewhere...) because I think the default one is actually 'person'

[katknow]

...never mind its happening under "Person" as well

[kimisgold]

• Regarding Settings > Item Type Elements, they were not originally sortable. They still should have the improved screen reader labels.
• With the empty drawers hmmm. I'm trying to think if it'd be confusing to have non-expandable drawers for elements without descriptions, or if we should have a "No description available" default text.
• Yes, the screen reader should pick up the URL field contents on Appearance > Navigation. I'll look into why that isn't happening.

Still working my way through testing your other comments, but lots of good notes so far.

[kimisgold]

Okay @katknow, I think I figured out how to test for the move icons and disabled elements. These instructions are specifically to use with Voiceover on macOS, though I think the other screen readers have their own equivalents.

Tabbing through the page will only get you the explicitly interactive elements. You need to use Voiceover to navigate all the page content. With VO on, I use the VO shortcut command (option + command) + right/left arrow to navigate all page elements. You'll know it's working if it catches things like the navigation's instruction text ("Check the links to display them in the main navigation."). Using this, it caught the "Move" tooltips as well as the values in disabled fields.

As a note, I realize the "move" icons are theoretically interactive elements, but at this point they're not really keyboard accessible. I'd love to figure out a solution for that sometime, but for the moment I think it makes sense to keep them as they are.

[katknow]

Ah thanks for explaining--having much better luck with VoiceOver now.

[kimisgold]

Checking where we are on this, I think the only remaining aspect to address is the expandable drawers with no content. Does that sound right?

[katknow]

I believe so!