Improve a11y to close Pinny

cole-sanderson commented 8 years ago

We are missing two features to allow user to close Pinny.

1. There is a case that there is no close button in Pinny to close Pinny and screenreader wont be able to close Pinny.

To do:

Add visually hidden close button to structure at end of pinny__wrapper to allow screenreader to close Pinny after reading content in Pinny.

Current structure:

<div id="myPinny" class="pinny__wrapper" role="document" hidden>
    <div class="pinny__header">
        <a class="pinny__close">close</a>
    </div>
    <div class="pinny__content pinny--is-scrollable"></div>
    <div class="pinny__footer"></div>
</div>

Proposal structure:

<div id="myPinny" class="pinny__wrapper" role="document" hidden>
    <div class="pinny__header">
        <button class="pinny__close">close</button>
    </div>
    <div class="pinny__content pinny--is-scrollable"></div>
    <div class="pinny__footer"></div>
    <button class="pinny__visually-hidden-close pinny__close">close</button>
</div>

Additional note: We should be using <button> element instead of <a> since its behaviour button not linking to new page.

1. Add 'escape' keyboard function to Pinny. When user tap 'escape' button on keyboard and it should close Pinny.

jeffkamo commented 8 years ago

I argue in #99 that we should implement some default, basic and fool-proof measures to avoid a situation where a screen reader user may become permanently (or mostly permanently) trapped in a modal.

Basically, all instances of Pinny are required to have either an escape button (added automatically, not by the implementer, although maybe overridable) OR a message with instructions on what must be done to escape (it's possible that escaping a modal could be a worse UX).

marlowpayne commented 8 years ago

We are going to have to make the decision on whether or not these a11y enhancements should be part of the backfilled Zepto-compatible release alongside #99 (++: These fixes can come into the release without compatibility issues; --: This would delay the release) or just only work to get these into the latest jQuery-based Pinny (++: Legacy release would go out a lot quicker and we can focus all efforts into the latest codebase; --: These changes feel like they should come along with the fixes from #99)

@jeffkamo @cole-sanderson thoughts?

mobify / pinny

Improve a11y to close Pinny #98