Use aria-hidden and new prop to help facilitate a11y

Author: Kyle Holmberg

src/Collapse.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 
 export class Collapse extends React.Component {
   static propTypes = {
+    accessibilityId: PropTypes.string,
     theme: PropTypes.shape({
       collapse: PropTypes.string,
       content: PropTypes.string
@@ -21,6 +22,7 @@ export class Collapse extends React.Component {
 
 
   static defaultProps = {
+    accessibilityId: '',
     theme: {
       collapse: 'ReactCollapse--collapse',
       content: 'ReactCollapse--content'
@@ -164,10 +166,14 @@ export class Collapse extends React.Component {
 
 
   render() {
-    const {theme, children} = this.props;
+    const {accessibilityId, theme, children, isOpened} = this.props;
     return (
-      <div ref={this.onRefContainer} className={theme.collapse} style={this.initialStyle}>
-        <div ref={this.onRefContent} className={theme.content}>
+      <div
+        ref={this.onRefContainer}
+        className={theme.collapse}
+        style={this.initialStyle}
+        aria-hidden={!isOpened}>
+        <div ref={this.onRefContent} className={theme.content} id={accessibilityId}>
           {children}
         </div>
       </div>