[added] accessibility props for PanelGroup and Panels.

[kennyw12]

Adds accessibility, following the guideline specified here.

The Pivotal UI Team
@atomanyih @ctaymor @d-reinhold @kennyw12 @matt-royal @nicw @stubbornella

[kennyw12]

Oops. Forgot PropType validation. I'm also not sure if these roles should be exposed.

[taion]

Would it be incorrect for the header role to actually get attached to the "heading" element at https://github.com/react-bootstrap/react-bootstrap/pull/1191/files#diff-1e26d9c69579835d9b0137815187fafeR185 rather than the anchor?

[ctaymor]

The use-case we're anticipating here is using an accordion like a set of tabs, as in the example in the react-bootstrap documentation. Based on our research, the a is the correct place to put the role attribute. Here's one blog post that confirms this.

[taion]

BTW, would appreciate seeing your thoughts on discussion on #983 from #983 (comment) on down, i.e. we might structure Panel to look like e.g. Modal, and have e.g.

<Panel>
  <Panel.Heading>{heading}</Panel.Heading>
  <Panel.Body>{body}</Panel.Body>
</Panel>

and then this would just work with the role prop set respectively on heading/body/whatever... haven't worked out all the kinks there yet though.

[ctaymor]

@mattroyal and I just amended the last commit to add role="presentation" to the h4 when we generate the header for a collapsible panel which was only passed a string for a header. The heading sizes are supposed to semantically describe the outline of the page, and since we don't know the structure of a user's page, we don't know what level the header should actually be. It is a visual aesthetic use of an h4, not a semantic one, thus presentation.

Edited to add: Just looking at #983 now and seeing that it addresses this issue. I left some thoughts on changing the API.

[taion]

LGTM. Might make sense to squash these commits. Otherwise !

[jquense]

LGTM