[Panel] Accessibility Enhancements #1424

Open
wants to merge 1 commit into
from

Conversation

Projects
None yet
2 participants
@gerardkcohen
Contributor

gerardkcohen commented Nov 21, 2013

This initial PR is for feedback only.

Adding the following accessibility improvements to Panel:

  • Focus Management
    • Tab and Shift + Tab cycle focus within the Panel
    • Upon dismissing the Panel, focus is returned to the trigger that initially launched the Panel (via Widget-Modality)
    • The default Close button is configured with isDefault so that focus is immediately applied upon displaying the Panel
  • ARIA Roles/ Properties
    • A new attribute panelType that accepts values of simple or complex which are used to determine whether the Panel has an ARIA role of alertdialog (panelType: simple) or dialog (panelType: complex). Documentation and examples will show that that a simple Panel is defined as having a small amount of text or a message that alerts, warns, or requests information. A complex Panel is a Panel that includes large amounts of text or Form elements/ other interactive elements. A complex Panel also adds a role of document on the Panel body. Default panelType is simple
    • The property aria-describedby is placed on the bounding box and references the Panel's body.
    • A new attribute title is added and is wrapped by a <h1> tag. HTML_PARSER is included. aria-labelledby is placed on the bounding box and references the title. Documentation and examples will show how to properly markup subtitles within the title and how headerContent can still be used in conjunction with the title. CSS styles have been updated to maintain the <h1> style
    • Panel visibility is communicated via the 'aria-hidden' property on the bounding box.
    • If the Panel is modal, 'aria-hidden' is set to true on the body so as not to confuse AT users (via Widget-Modality)

User Guides/ examples and unit tests have not been updated yet because I wanted to get feedback and finalize the code. The unit tests are still passing with these modifications though.

@juandopazo

This comment has been minimized.

Show comment Hide comment
@juandopazo

juandopazo Nov 21, 2013

Member

I like the idea of using the dialog ARIA role, but I'm not sure it belongs in Panel itself. It seems a bit opinionated for such a general use widget. What do you think about making a new Widget extension instead?

Member

juandopazo commented Nov 21, 2013

I like the idea of using the dialog ARIA role, but I'm not sure it belongs in Panel itself. It seems a bit opinionated for such a general use widget. What do you think about making a new Widget extension instead?

@gerardkcohen

This comment has been minimized.

Show comment Hide comment
@gerardkcohen

gerardkcohen Nov 26, 2013

Contributor

I don't think Panel is as much a general use widget as you think. Possibly Overlay, but I think Panel being defined as mimicking "the functionality of a regular OS window" makes it a little less generic. Having modality and button support, hiding on escape, etc should all be implemented in an accessible way, which I have done here. As far as a role, a widget of this type can only have roles of dialog or alertdialog which I have tried to support without the user having to know the specific roles, or highly technical reasons for picking one over the other.

Contributor

gerardkcohen commented Nov 26, 2013

I don't think Panel is as much a general use widget as you think. Possibly Overlay, but I think Panel being defined as mimicking "the functionality of a regular OS window" makes it a little less generic. Having modality and button support, hiding on escape, etc should all be implemented in an accessible way, which I have done here. As far as a role, a widget of this type can only have roles of dialog or alertdialog which I have tried to support without the user having to know the specific roles, or highly technical reasons for picking one over the other.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment