[disclosure]: Add documentation explicilty saying whether or not a DisclosurePanel can be in the DOM before a DisclosureButton

[kylemh]

📖 Documentation

And if not, maybe hint at using things like reverse flex direction yadda yadda

I'm guessing order doesn't matter, but it's prolly a good thing to be explicit about.

[chaance]

I haven't investigated thoroughly but would probably discourage this, though the ARIA pattern does not mention directionality here. My primary concern would be a mismatch between the layout and tab order of the button and content if you used flexbox, but if you change the DOM order the user would have to reverse tab to access anything in the panel after toggling the button. This is purely a personal opinion and not based on any research -- there may be alternative approaches I don't know about.

Any suggestions for how to document this? Happy to take a PR on this one but I'd only want to make a recommendation if we have a bit of research behind us.

[kylemh]

https://jsfiddle.net/kylemh/dwLu2rn3/2/

Looks like using reverse flex directions changes the order visually, yet maintains an accessible DOM order and tabIndex order.

Would it be fair to open a PR recommending the use of flex reverse?

[chaance]

@kylemh The issue is that tab order not following the visual order is also problematic.

When the source order does not match the visual order, the tab order through the content must reflect the logical relationships in the content that are displayed visually. (Source: WCAG 2.0)

The keyboard tab order must be coordinated with the structure of the webpage. The default keyboard navigation order must be logical and intuitive. The tab order should follow the visual flow of the page: left to right, top to bottom (Source: CSUN)

So while flex works, I don't know that I'd recommend it over changing the markup. But I also am not sure changing the markup is a good idea. It might not be terrible for screen readers if you add an aria-description to the button letting the user know they need to navigate back to access the content, but still not logical for non-SR keyboard/switch users. Hence why I'm a bit hesitant to recommend the pattern at all.

[kylemh]

I see. Okay. Trying to think how I can be helpful until I research enough. Would a PR just pointing out this concern be enough to add to the docs for now? A sort of "be mindful" quip.

[chaance]

I think my recommendation would be that it's generally better UI if the button comes before the panel because behavioral expectations align better with the layout, but if you want to change the markup or use CSS to rearrange them you can, and here are the potential drawbacks of doing so (and we could reference the WCAG technique I linked to above).