react-redux-toastr - npm Package Compare versions

Comparing version 7.4.1 to 7.4.3

lib/ToastrBox.js

@@ -135,2 +135,4 @@ 'use strict';
     _this.transitionOut = transitionOut || _this.props.transitionOut;
+    // an identifier to facilitate aria labelling for a11y for multiple instances of the component family in the DOM
+    _this.id = Math.floor(Math.random() * 9999);
 
@@ -161,2 +163,4 @@ _this.state = { progressBar: null };
     this.props.addToMemory(item.id);
+    //
+    this.closeButton.focus();
   };
@@ -168,2 +172,7 @@
     }
+    // when toast unloads the toast close button automatically focuses on the next toast control (if any)
+    // need to add a micro delay to allow the DOM to recycle
+    setTimeout(function () {
+      document.getElementsByClassName('toastr-control')[0].focus();
+    }, 50);
   };
@@ -213,8 +222,15 @@
   ToastrBox.prototype.renderCloseButton = function renderCloseButton() {
+    var _this3 = this;
+
     return _react2.default.createElement(
       'button',
       {
+        tabIndex: '0',
         type: 'button',
-        className: 'close-toastr',
-        onClick: this.handleClickCloseButton
+        className: 'close-toastr toastr-control',
+        'aria-label': 'toast',
+        onClick: this.handleClickCloseButton,
+        ref: function ref(_ref) {
+          return _this3.closeButton = _ref;
+        }
       },
@@ -248,6 +264,6 @@ '\u2715'
         'div',
-        { className: 'rrt-middle-container' },
+        { className: 'rrt-middle-container', role: 'alertdialog', 'aria-labelledby': 'dialogTitle-' + this.id, 'aria-describedby': 'dialogDesc-' + this.id },
         title && _react2.default.createElement(
           'div',
-          { className: 'rrt-title' },
+          { id: 'dialogTitle-' + this.id, className: 'rrt-title' },
           title
@@ -257,3 +273,3 @@ ),
           'div',
-          { className: 'rrt-text' },
+          { id: 'dialogDesc-' + this.id, className: 'rrt-text' },
           message
@@ -345,3 +361,3 @@ ),
   ToastrBox.prototype._setTransition = function _setTransition(hide) {
-    var _this3 = this;
+    var _this4 = this;
 
@@ -351,4 +367,4 @@ var animationType = hide ? this.transitionOut : this.transitionIn;
     var onEndListener = function onEndListener(e) {
-      if (e && e.target == _this3.toastrBoxElement) {
-        _this3.toastrBoxElement.classList.remove(animationType);
+      if (e && e.target == _this4.toastrBoxElement) {
+        _this4.toastrBoxElement.classList.remove(animationType);
       }
@@ -378,3 +394,3 @@ };
   ToastrBox.prototype.render = function render() {
-    var _this4 = this;
+    var _this5 = this;
 
@@ -401,4 +417,4 @@ var _props$item5 = this.props.item,
       _extends({
-        ref: function ref(_ref) {
-          return _this4.toastrBoxElement = _ref;
+        ref: function ref(_ref2) {
+          return _this5.toastrBoxElement = _ref2;
         },
@@ -405,0 +421,0 @@ className: (0, _classnames2.default)('toastr', 'animated', 'rrt-' + type, options.className),

lib/ToastrConfirm.js

@@ -60,2 +60,5 @@ 'use strict';
     _this.isKeyDown = false;
+    // an identifier to facilitate aria labelling for a11y for multiple instances of the component family in the DOM
+    _this.id = Math.floor(Math.random() * 9999);
+
     return _this;
@@ -72,4 +75,14 @@ }
     }
+    // when toast loads the toast close button automatically focuses on the toast control
+    this.closeButton.focus();
   };
 
+  ToastrConfirm.prototype.componentWillUnmount = function componentWillUnmount() {
+    // when toast unloads the toast close button automatically focuses on the next toast control (if any)
+    // need to add a micro delay to allow the DOM to recycle
+    setTimeout(function () {
+      document.getElementsByClassName('toastr-control')[0].focus();
+    }, 50);
+  };
+
   ToastrConfirm.prototype.handleOnKeyDown = function handleOnKeyDown(e) {
@@ -198,4 +211,4 @@ if ((0, _utils.keyCode)(e) == ENTER) {
         tabIndex: '-1',
-        ref: function ref(_ref2) {
-          return _this4.confirmHolderElement = _ref2;
+        ref: function ref(_ref4) {
+          return _this4.confirmHolderElement = _ref4;
         },
@@ -208,8 +221,8 @@ onKeyDown: this.handleOnKeyDown,
         'div',
-        { className: 'rrt-confirm animated', ref: function ref(_ref) {
-            return _this4.confirmElement = _ref;
-          } },
+        { className: 'rrt-confirm animated', ref: function ref(_ref3) {
+            return _this4.confirmElement = _ref3;
+          }, role: 'alertdialog', 'aria-describedby': 'dialogDesc-' + this.id },
         message && _react2.default.createElement(
           'div',
-          { className: 'rrt-message' },
+          { className: 'rrt-message', id: 'dialogDesc-' + this.id },
           message
@@ -223,3 +236,5 @@ ),
             _Button2.default,
-            { className: 'rrt-ok-btn', onClick: function onClick() {
+            { tabIndex: '0', ref: function ref(_ref) {
+                return _this4.closeButton = _ref;
+              }, className: 'rrt-ok-btn toastr-control', onClick: function onClick() {
                 return _this4.handleConfirmClick();
@@ -231,3 +246,5 @@ } },
             _Button2.default,
-            { className: 'rrt-cancel-btn', onClick: this.handleCancelClick.bind(this) },
+            { tabIndex: '0', ref: function ref(_ref2) {
+                return _this4.closeButton = _ref2;
+              }, className: 'rrt-cancel-btn toastr-control', onClick: this.handleCancelClick.bind(this) },
             this.cancelText
@@ -246,3 +263,3 @@ ),
               _Button2.default,
-              { className: className, onClick: handler, key: index },
+              { tabIndex: '0', className: className, onClick: handler, key: index },
               text
@@ -249,0 +266,0 @@ );

package.json

 {
   "name": "react-redux-toastr",
-  "version": "7.4.1",
+  "version": "7.4.3",
   "description": "react-redux-toastr is a React toastr message implemented with Redux",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -34,3 +34,3 @@ ## `react-redux-toastr` [demo](http://diegoddox.github.io/react-redux-toastr/)
 ```
-- or include the css file from the demo site (**NOTE**: This can be change at anytime)
+- or include the css file from the demo site (**NOTE**: This file can be changed anytime)
 ```html
@@ -152,2 +152,3 @@ <link href="https://diegoddox.github.io/react-redux-toastr/7.1/react-redux-toastr.min.css" rel="stylesheet" type="text/css">
 Each of these methods can take up to three arguments the `title` a `message` and `options`.
+
 In `options` you can specify `timeOut` `icon` `onShowComplete` `onHideComplete` `className` `component` `removeOnHover`,`removeOnHoverTimeOut`,`showCloseButton`, `onCloseButtonClick`, `onToastrClick`, `progressBar`, `transitionIn`, `position`, `attention`, `onAttentionClick`, `transitionOut` and `closeOnToastrClick`.
@@ -206,3 +207,3 @@
 ##### Toastr: `message`
-This one is in case you wanna show a large amount of information, unlike the other methods above this will not close automatically unless you provide a `timeout` in the `message` options.
+Use this one if you wanna show a large amount of information. Unlike the other methods above, it would not close automatically unless you provide a `timeout` in the `message` options.
 
@@ -222,5 +223,5 @@ ```javascript
 ##### Toastr: `confirm`
-The confirm method takes two arguments, the first is the message the second is a object where you can specify what will happen when the user clicks on `ok` and `cancel` button or by `keypress` `enter/esc`
+The confirm method takes two arguments. The first one is the message and the second one is an object where you can specify what will happen when the user clicks on `ok` or on the `cancel` buttons or on `keypress` `enter/esc`.
 
-NOTE: You can only have one at a time, right now if you have one `confirm` and you fire another it will be ignored.
+NOTE: You can only have one confirm toastr at the same time. If you have one `confirm` and you fire another it will be ignored.
 
@@ -235,5 +236,5 @@ ```javascript
 
-You can change the `ok` and `cancel` text by:
+You can change the `ok` and `cancel` texts by:
 
-- Passing the `confirm` props to the `ReduxToastr` component
+- Passing `confirmOptions` to the `ReduxToastr` component:
 
@@ -249,3 +250,3 @@ ```javascript
 
-- Passing the `okText` and `cancelText` props to the `toasterConfirmOptions` object:
+- Passing `okText` and `cancelText` in the `toasterConfirmOptions` object:
 
@@ -264,3 +265,3 @@ ```javascript
 
-- Passing the `disableCancel` prop to the `toasterConfirmOptions` object:
+- Passing `disableCancel` in the `toasterConfirmOptions` object:
 
@@ -270,3 +271,3 @@ ```javascript
   ...
-  disableCancel: true;
+  disableCancel: true
 };
@@ -279,12 +280,13 @@
 
-- Passing the `buttons` prop to the `toasterConfirmOptions` object.
-  The buttons are inserted after the OK and the cancel button.
+- Passing `buttons` in the `toasterConfirmOptions` object.
+
+  The buttons are inserted after the OK and the cancel buttons.
   
   Each button config can have a `text`, `handler` and a `className` property.
   
-  If you want to move the original OK or cancel button to a different place, just
-  insert a button config with a boolean flag `ok` or `cancel` at the desired position
-  (note that all other properties are ignored in this button config).
+  If you want to move the original OK or cancel buttons to a different postiion, just
+  insert a an object with a single boolean flag: `ok` or `cancel` to the desired position
+  inside buttons. (note that all other properties are ignored in this case).
 
-The following config leads to 3 buttons in this order:
+The following config leads to 3 buttons in the following order:
 1. "Apply" (original OK button)
@@ -327,3 +329,3 @@ 2. "Do not apply" (our custom button)
 
-### Avatar: in case you wanna use the same avatar as the example
+### Avatar: in case you wanna use the same avatar as in the example
 [Avatar](https://github.com/diegoddox/react-redux-toastr/blob/master/development/Avatar.js)
@@ -330,0 +332,0 @@

src/ToastrBox.js

@@ -36,2 +36,4 @@ import React, {isValidElement} from 'react'; //  eslint-disable-line no-unused-vars
     this.transitionOut = transitionOut || this.props.transitionOut;
+    // an identifier to facilitate aria labelling for a11y for multiple instances of the component family in the DOM
+    this.id = Math.floor(Math.random() * 9999);
 
@@ -76,2 +78,4 @@ this.state = {progressBar: null};
     this.props.addToMemory(item.id);
+    //
+    this.closeButton.focus();
   }
@@ -83,2 +87,7 @@
     }
+    // when toast unloads the toast close button automatically focuses on the next toast control (if any)
+    // need to add a micro delay to allow the DOM to recycle
+    setTimeout(function() {
+      document.getElementsByClassName('toastr-control')[0].focus();
+    }, 50);
   }
@@ -90,3 +99,3 @@
     }
-  }
+  };
 
@@ -111,3 +120,3 @@ handlePressEnterOrSpaceKeyCloseButton(e) {
     }
-  }
+  };
 
@@ -126,3 +135,3 @@ handleClickCloseButton = (e) => {
     this._removeToastr();
-  }
+  };
 
@@ -141,3 +150,3 @@ mouseEnter = () => {
     }
-  }
+  };
 
@@ -158,3 +167,3 @@ mouseLeave = () => {
     }
-  }
+  };
 
@@ -197,5 +206,8 @@ renderSubComponent() {
       <button
+        tabIndex="0"
         type="button"
-        className="close-toastr"
+        className="close-toastr toastr-control"
+        aria-label="toast"
         onClick={this.handleClickCloseButton}
+        ref={ref => this.closeButton = ref}
       >
@@ -223,5 +235,5 @@ &#x2715;
         {options.status && type === 'light' && <div className={classnames('toastr-status', options.status)}/>}
-        <div className="rrt-middle-container">
-          {title && <div className="rrt-title">{title}</div>}
-          {message && <div className="rrt-text">{message}</div>}
+        <div className="rrt-middle-container" role="alertdialog" aria-labelledby={`dialogTitle-${this.id}`} aria-describedby={`dialogDesc-${this.id}`}>
+          {title && <div id={`dialogTitle-${this.id}`} className="rrt-title">{title}</div>}
+          {message && <div id={`dialogDesc-${this.id}`} className="rrt-text">{message}</div>}
           {options.component && this.renderSubComponent()}
@@ -228,0 +240,0 @@ </div>

src/ToastrConfirm.js

@@ -42,2 +42,5 @@ import React from 'react';
     this.isKeyDown = false;
+    // an identifier to facilitate aria labelling for a11y for multiple instances of the component family in the DOM
+    this.id = Math.floor(Math.random() * 9999);
+
   }
@@ -53,4 +56,14 @@
     }
+    // when toast loads the toast close button automatically focuses on the toast control
+    this.closeButton.focus();
   }
 
+  componentWillUnmount() {
+    // when toast unloads the toast close button automatically focuses on the next toast control (if any)
+    // need to add a micro delay to allow the DOM to recycle
+    setTimeout(function() {
+      document.getElementsByClassName('toastr-control')[0].focus();
+    }, 50);
+  }
+
   handleOnKeyDown(e) {
@@ -171,8 +184,8 @@ if (keyCode(e) == ENTER) {
       >
-        <div className="rrt-confirm animated" ref={ref => this.confirmElement = ref}>
-          {message && <div className="rrt-message">{message}</div>}
+        <div className="rrt-confirm animated" ref={ref => this.confirmElement = ref} role="alertdialog" aria-describedby={`dialogDesc-${this.id}`}>
+          {message && <div className="rrt-message" id={`dialogDesc-${this.id}`}>{message}</div>}
           {options.component && <options.component/>}
           <div className="rrt-buttons-holder">
             {!this.containsOkButton(options.buttons) &&
-              <Button className="rrt-ok-btn" onClick={() => this.handleConfirmClick()}>
+              <Button tabIndex="0" ref={ref => this.closeButton = ref} className="rrt-ok-btn toastr-control" onClick={() => this.handleConfirmClick()}>
                 {this.okText}
@@ -182,3 +195,3 @@ </Button>
             {!this.disableCancel && !this.containsCancelButton(options.buttons) &&
-              <Button className="rrt-cancel-btn" onClick={this.handleCancelClick.bind(this)}>
+              <Button  tabIndex="0" ref={ref => this.closeButton = ref} className="rrt-cancel-btn toastr-control" onClick={this.handleCancelClick.bind(this)}>
                 {this.cancelText}
@@ -196,3 +209,3 @@ </Button>
 
-              return <Button className={className} onClick={handler} key={index}>{text}</Button>;
+              return <Button tabIndex="0" className={className} onClick={handler} key={index}>{text}</Button>;
             })}
@@ -199,0 +212,0 @@ </div>

No alert changes

Improved metrics

Total package byte prevSize

134954

increased by2.63%

Lines of code

2313

increased by2.35%

Number of lines in readme file

335

increased by0.6%

No dependency changes