fix W3C validation errors

Author: UncleJart

CHANGELOG.md

@@ -1,3 +1,6 @@
+# v7.5.2
+[#245] Fix W3C validation errors
+
 # v7.4.10
 Allow latest react-redux as peer dependency
 [#230]

development/Avatar.js

@@ -11,6 +11,6 @@ const styles = {
 
 export default () => (
   <div className="toastr-avatar" style={styles}>
-    <img src="./assets/jesus.jpg" style={{maxWidth: '105%'}}/>
+    <img src="./assets/jesus.jpg" alt="avatar" style={{maxWidth: '105%'}}/>
   </div>
 );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-toastr",
-  "version": "7.5.1",
+  "version": "7.5.2",
   "description": "react-redux-toastr is a React toastr message implemented with Redux",
   "main": "lib/index.js",
   "jsnext:main": "./src/index.js",

src/ReduxToastr.js

@@ -97,7 +97,7 @@ export class ReduxToastr extends React.Component {
           };
 
           return (
-            <span key={item.id}>
+            <div key={item.id}>
               <ToastrBox
                 inMemory={this.toastrFired}
                 addToMemory={() => this._addToMemory(item.id)}
@@ -115,7 +115,7 @@ export class ReduxToastr extends React.Component {
                 }}
                 className="toastr-attention"/>
               }
-            </span>
+            </div>
           );
         });
     }
@@ -126,30 +126,30 @@ export class ReduxToastr extends React.Component {
     const width = toastr.toastrs && toastr.toastrs[0] && toastr.toastrs[0].options && toastr.toastrs[0].options.width;
     const style = width ? {width: width} : {};
     return (
-      <span>
+      <div>
         {this.toastrPositions.map(position => {
           return (
             <div key={position} className={position} style={style}>
               {this._renderToastrForPosition(position)}
             </div>
           );
         })}
-      </span>
+      </div>
     );
   }
 
   render() {
     const {className, toastr} = this.props;
     return (
-      <span className={cn('redux-toastr', className)} aria-live="assertive">
+      <div className={cn('redux-toastr', className)} aria-live="assertive">
         {toastr.confirm &&
           <ToastrConfirm
             confirm={toastr.confirm}
             {...this.props}
           />
         }
         {this._renderToastrs()}
-      </span>
+      </div>
     );
   }
 }

src/ToastrBox.js

@@ -92,6 +92,13 @@ export default class ToastrBox extends React.Component {
     }, 50);
   }
 
+  get isToastrClickable() {
+    const {onToastrClick, closeOnToastrClick} = this.props.item.options;
+    const hasOnToastrClick = !!onToastrClick;
+
+    return hasOnToastrClick || closeOnToastrClick;
+  }
+
   handlePressEnterOrSpaceKeyToastr = (e) => {
     if (e.key === ' ' || e.key === 'enter') {
       this.handleClickToastr(e);
@@ -196,17 +203,24 @@ export default class ToastrBox extends React.Component {
   }
 
   renderCloseButton() {
+    let closeButtonAttributes = {
+      tabIndex: 0,
+      role: 'button',
+      onKeyPress: this.handlePressEnterOrSpaceKeyCloseButton
+    };
+    if (this.isToastrClickable) {
+      closeButtonAttributes = {};
+    }
     return (
-      <button
-        tabIndex="0"
-        type="button"
+      <div
         className="close-toastr toastr-control"
         aria-label="toast"
         onClick={this.handleClickCloseButton}
         ref={ref => this.closeButton = ref}
+        {...closeButtonAttributes}
       >
-        &#x2715;
-      </button>
+        <span>&#x2715;</span>
+      </div>
     );
   }
 
@@ -352,12 +366,8 @@ export default class ToastrBox extends React.Component {
       type
     } = this.props.item;
 
-    const {onToastrClick, closeOnToastrClick} = options;
-    const hasOnToastrClick = !!onToastrClick;
-    const doesCloseOnToastrClick = closeOnToastrClick;
-
     let toastrClickAttributes = {};
-    if (hasOnToastrClick || doesCloseOnToastrClick) {
+    if (this.isToastrClickable) {
       toastrClickAttributes.role = 'button';
       toastrClickAttributes.tabIndex = 0;
       toastrClickAttributes.onClick = this.handleClickToastr;

src/styles/index.scss

@@ -153,6 +153,7 @@ body.toastr-confirm-active {
       opacity: 0.5;
       cursor: pointer;
       font-family: "Helvetica Neue", Helvetica, Arial sans-serif;
+      color: #000;
 
       &:hover {
         opacity: 1;
@@ -161,6 +162,14 @@ body.toastr-confirm-active {
       &:focus {
         outline: none;
       }
+
+      span {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
     }
 
     &.rrt-info, &.rrt-success, &.rrt-warning, &.rrt-error {