react-fontawesome - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

changelog.md

 # Changelog
 
+## v1.4.0
+
+- Merged #30: Add support for aria screen reader support, thanks @Phyks
+
 ## v1.3.1
@@ -4,0 +8,0 @@

lib/index.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.srOnlyStyle = undefined;
 
@@ -18,2 +19,13 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+var srOnlyStyle = exports.srOnlyStyle = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: '0px',
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0px, 0px, 0px, 0px)',
+  border: '0px'
+};
+
 /**
@@ -23,2 +35,3 @@ * A React component for the font-awesome icon library.
  *
+ * @param {String} [ariaLabel] An extra accessibility label to put on the icon
  * @param {Boolean} [border=false] Whether or not to show a border radius
@@ -45,2 +58,3 @@ * @param {String} [className] An extra set of CSS classes to add to the component
   propTypes: {
+    ariaLabel: _react2.default.PropTypes.string,
     border: _react2.default.PropTypes.bool,
@@ -77,4 +91,5 @@ className: _react2.default.PropTypes.string,
     var tag = _props$tag === undefined ? 'span' : _props$tag;
+    var ariaLabel = _props.ariaLabel;
 
-    var props = _objectWithoutProperties(_props, ['border', 'cssModule', 'className', 'fixedWidth', 'flip', 'inverse', 'name', 'pulse', 'rotate', 'size', 'spin', 'stack', 'tag']);
+    var props = _objectWithoutProperties(_props, ['border', 'cssModule', 'className', 'fixedWidth', 'flip', 'inverse', 'name', 'pulse', 'rotate', 'size', 'spin', 'stack', 'tag', 'ariaLabel']);
 
@@ -111,5 +126,4 @@ var classNames = [];
     className && classNames.push(className);
-    return _react2.default.createElement(tag, _extends({}, props, { className: classNames.join(' ') }));
+    return _react2.default.createElement(tag, _extends({}, props, { 'aria-hidden': true, className: classNames.join(' ') }), ariaLabel ? _react2.default.createElement('span', { style: srOnlyStyle }, ariaLabel) : null);
   }
-});
-module.exports = exports['default'];
+});

package.json

 {
   "name": "react-fontawesome",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A React component for the font-awesome icon library.",
@@ -5,0 +5,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

12147

increased by5.07%

Lines of code

107

increased by13.83%

No dependency changes