feat(modal): modal header accessibility (#596)

momentum-design · Apr 29, 2020 · dfe6723 · dfe6723
1 parent 3fc2648
commit dfe6723
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/react/src/lib/Button/index.js b/react/src/lib/Button/index.js
@@ -219,7 +219,7 @@ Button.propTypes = {
   ariaLabel: PropTypes.string,
   /** @prop ID to reference for blindness accessibility feature | '' */
   ariaLabelledBy: PropTypes.string,
-  /** @prop Boolean value for aria-pressed (toggle button accessibility) | undefined */
+  /** @prop Boolean value for aria-pressed (toggle button accessibility) | null */
   ariaPressed: PropTypes.bool,
   /** @prop Children Nodes to Render inside Button | null */
   children: PropTypes.node,
@@ -271,7 +271,7 @@ Button.defaultProps = {
   active: false,
   ariaLabel: '',
   ariaLabelledBy: '',
-  ariaPressed: '',
+  ariaPressed: null,
   children: null,
   circle: false,
   className: '',

diff --git a/react/src/lib/Modal/examples/Large.js b/react/src/lib/Modal/examples/Large.js
@@ -40,6 +40,9 @@ export default class ModalLarge extends React.PureComponent {
             <ModalHeader
               headerLabel='Large Modal'
               showCloseButton
+              role="heading"
+              ariaLabel="Large Modal"
+              ariaLevel="2"
             />
             <ModalBody>
               <form ref={form1 => this.form1 = form1} />

diff --git a/react/src/lib/ModalHeader/index.js b/react/src/lib/ModalHeader/index.js
@@ -13,6 +13,9 @@ class ModalHeader extends React.PureComponent {
       headerLabel,
       message,
       showCloseButton,
+      role,
+      ariaLevel,
+      ariaLabel,
       ...props
     } = this.props;
     const {
@@ -31,8 +34,8 @@ class ModalHeader extends React.PureComponent {
           children
           ? children
           : [
-              <span key='title-0' className='md-modal__title'>{headerLabel}</span>,
-              message && <span key='title-1' className='md-modal__message'>{message}</span>
+            <span key='title-0' className='md-modal__title' role={role} aria-level={ariaLevel} aria-label={ariaLabel}>{headerLabel}</span>,
+            message && <span key='title-1' className='md-modal__message'>{message}</span>
           ]
         }
         {
@@ -60,7 +63,13 @@ ModalHeader.propTypes = {
    /** @prop Modal message | '' */
   message: PropTypes.string,
   /** @prop show/hide close button | true */
-  showCloseButton: PropTypes.bool
+  showCloseButton: PropTypes.bool,
+  /** @prop role modal header | null */
+  role: PropTypes.string,
+  /** @prop ariaLevel modal header | null */
+  ariaLevel: PropTypes.number,
+  /** @prop ariaLabel modal header | null */
+  ariaLabel: PropTypes.string,
 };
 
 ModalHeader.defaultProps = {
@@ -70,6 +79,9 @@ ModalHeader.defaultProps = {
   headerLabel: '',
   message: '',
   showCloseButton: true,
+  role: null,
+  ariaLabel: null,
+  ariaLevel: null,
 };
 
 ModalHeader.contextTypes = {

diff --git a/react/src/lib/ModalHeader/tests/__snapshots__/index.spec.js.snap b/react/src/lib/ModalHeader/tests/__snapshots__/index.spec.js.snap
@@ -4,11 +4,14 @@ exports[`tests for <ModalHeader /> should match SnapShot 1`] = `
 ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
   Symbol(enzyme.__unrendered__): <ModalHeader
+    ariaLabel={null}
+    ariaLevel={null}
     className=""
     closeBtnProps={null}
     headerLabel=""
     id="test"
     message=""
+    role={null}
     showCloseButton={true}
   />,
   Symbol(enzyme.__renderer__): Object {
@@ -28,7 +31,10 @@ ShallowWrapper {
       "children": Array [
         Array [
           <span
+            aria-label={null}
+            aria-level={null}
             className="md-modal__title"
+            role={null}
           >
             
           </span>,
@@ -49,8 +55,11 @@ ShallowWrapper {
         "key": "title-0",
         "nodeType": "host",
         "props": Object {
+          "aria-label": null,
+          "aria-level": null,
           "children": "",
           "className": "md-modal__title",
+          "role": null,
         },
         "ref": null,
         "rendered": "",
@@ -81,7 +90,10 @@ ShallowWrapper {
         "children": Array [
           Array [
             <span
+              aria-label={null}
+              aria-level={null}
               className="md-modal__title"
+              role={null}
             >
               
             </span>,
@@ -102,8 +114,11 @@ ShallowWrapper {
           "key": "title-0",
           "nodeType": "host",
           "props": Object {
+            "aria-label": null,
+            "aria-level": null,
             "children": "",
             "className": "md-modal__title",
+            "role": null,
           },
           "ref": null,
           "rendered": "",