Add accessibility 🍾 realte to issue fkhadra#121

vasiliydolmatov · Jan 23, 2018 · 08a1ab0 · 08a1ab0
1 parent 8f950a9
commit 08a1ab0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/DefaultTransition.js b/src/DefaultTransition.js
@@ -33,7 +33,6 @@ function DefaultTransition({ children, position, ...props }) {
       {...props}
       timeout={750}
       onEnter={node => node.classList.add(enter)}
-      onEntered={node => node.classList.remove(enter)}
       onExit={node => node.classList.add(exit)}
     >
       {children}

diff --git a/src/Toast.js b/src/Toast.js
@@ -63,7 +63,8 @@ class Toast extends Component {
       PropTypes.string,
       PropTypes.object
     ]),
-    updateId: PropTypes.number
+    updateId: PropTypes.number,
+    ariaLabel: PropTypes.string
   };
 
   static defaultProps = {
@@ -75,7 +76,8 @@ class Toast extends Component {
     className: '',
     bodyClassName: '',
     progressClassName: '',
-    updateId: null
+    updateId: null,
+    role: 'alert'
   };
 
   state = {
@@ -138,7 +140,8 @@ class Toast extends Component {
       className,
       bodyClassName,
       progressClassName,
-      updateId
+      updateId,
+      role
     } = this.props;
 
     return (
@@ -156,6 +159,7 @@ class Toast extends Component {
           {...this.getToastProps()}
         >
           <div
+            {...this.props.in && { role: role }}
             {...(typeof bodyClassName !== 'string'
               ? css(styles.body, bodyClassName)
               : styles.body)}

diff --git a/src/__tests__/__snapshots__/Toast.js.snap b/src/__tests__/__snapshots__/Toast.js.snap
@@ -52,6 +52,7 @@ exports[`Toast Should allow glamor rule as className 1`] = `
   >
     <div
       data-css-6qy7r3=""
+      role="alert"
     >
       FooBar
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,6 +52,7 @@ exports[`Toast Should allow glamor rule as className 1`] = ` @@
       >
         <div
           data-css-6qy7r3=""
+          role="alert"
         >
           FooBar
         </div>
@@ Expand Down @@