svgs - npm Package Compare versions

Comparing version 3.0.1 to 3.1.0

CHANGELOG.md

 # CHANGELOG
 
+### 3.1.0
+
+- Improved accessibility by supporting titles for SVG elements. See #11
+- Correctly use `textPath` instead of `textpath` as the element names are case
+  sensitive. See #12
+
 ### 3.0.1
@@ -4,0 +10,0 @@

index.js

@@ -230,5 +230,21 @@ import PropTypes from 'prop-types';
 function Svg(props) {
-  return <svg { ...prepare(props) } />;
+  const { title, ...rest } = props;
+
+  if (title) {
+    return (
+      <svg role='img' aria-label='[title]' { ...prepare(rest) }>
+        <title>{ title }</title>
+        { props.children }
+      </svg>
+    );
+  }
+
+  return <svg { ...prepare(rest) } />;
 }
 
+Svg.propTypes = {
+  title: PropTypes.string,
+  desc: PropTypes.string
+};
+
 /**
@@ -297,3 +313,3 @@ * Return a symbol SVG element.
 function TextPath(props) {
-  return <textpath { ...prepare(props) } />;
+  return <textPath { ...prepare(props) } />;
 }
@@ -300,0 +316,0 @@

index.native.js

@@ -1,2 +0,4 @@
-import Svg, {
+import { View } from 'react-native';
+import React from 'react';
+import RNSvg, {
   Circle,
@@ -23,2 +25,16 @@ ClipPath,
 
+const Svg = (props) => {
+  const { title, ...rest } = props;
+
+  if (title) {
+    return (
+      <View accessible={ true } accessibilityLabel={ title }>
+        <RNSvg { ...rest} />
+      </View>
+    );
+  }
+
+  return <RNSvg { ...rest} />
+};
+
 export {
@@ -25,0 +41,0 @@ Circle,

lib/index.js

@@ -249,5 +249,26 @@ 'use strict';
 function Svg(props) {
-  return _react2.default.createElement('svg', prepare(props));
+  var title = props.title,
+      rest = _objectWithoutProperties(props, ['title']);
+
+  if (title) {
+    return _react2.default.createElement(
+      'svg',
+      _extends({ role: 'img', 'aria-label': '[title]' }, prepare(rest)),
+      _react2.default.createElement(
+        'title',
+        null,
+        title
+      ),
+      props.children
+    );
+  }
+
+  return _react2.default.createElement('svg', prepare(rest));
 }
 
+Svg.propTypes = {
+  title: _propTypes2.default.string,
+  desc: _propTypes2.default.string
+};
+
 /**
@@ -328,3 +349,3 @@ * Return a symbol SVG element.
 function TextPath(props) {
-  return _react2.default.createElement('textpath', prepare(props));
+  return _react2.default.createElement('textPath', prepare(props));
 }
@@ -331,0 +352,0 @@

package.json

 {
   "name": "svgs",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "svgs is a compatiblity layer between svg and react-native-svg",
@@ -5,0 +5,0 @@ "main": "./lib",

README.md

@@ -85,4 +85,20 @@ # svgs
 
+#### Accessibility
+
+If you want Section 508 Accessibility add the `title` prop to the `<Svg />` component like this:
+```js
+<Svg title="Image Description" width="1000" height="1000" ... />
+```
+When this renders on native, you'll get your SVG wrapped in a View with an accessibilityLabel.
+On web, the SVG element will get two aria labels and a `<title>` element that are
+required for accessibility.
+```html
+<svg role="img" aria-label="[title]" width="1000" height="1000">
+  <title>Image Description</title>
+  ...
+</svg>
+```
+
 ## License
 
 MIT

test.js

@@ -289,6 +289,6 @@ import Svg, {
 
-    it('is a textpath', function () {
+    it('is a textPath', function () {
       const name = shallow(<TextPath />).name();
 
-      assume(name).equals('textpath');
+      assume(name).equals('textPath');
     });
@@ -295,0 +295,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

89614

increased by1.99%

Lines of code

963

increased by4.79%

Number of lines in readme file

104

increased by18.18%

No dependency changes