@pingux/astro 1.17.0-alpha.0 → 1.17.0-alpha.1

package/lib/cjs/components/Image/Image.js

@@ -56,7 +56,7 @@ var _colors = require("../../styles/colors");
 
 var _templateObject;
 
-var _excluded = ["className", "fallbackImage", "fallbackTimeout", "isDisabled", "src", "sx"];
+var _excluded = ["className", "fallbackImage", "fallbackTimeout", "isDisabled", "src", "alt", "sx"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -77,6 +77,7 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fallbackTimeout = props.fallbackTimeout,
       isDisabled = props.isDisabled,
       src = props.src,
+      alt = props.alt,
       sx = props.sx,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
@@ -122,6 +123,8 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return imgRef.current;
   });
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
+  var ariaLabel = props['aria-label'] || alt;
+  (0, _hooks.useAriaLabelWarning)('Image', ariaLabel);
 
   var _useHover = (0, _interactions.useHover)(props),
       hoverProps = _useHover.hoverProps,
@@ -178,7 +181,7 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var themeUiImage = (0, _react2.jsx)(_themeUi.Image, (0, _extends2["default"])({
     className: classNames,
     ref: imgRef,
-    alt: "Image",
+    alt: alt,
     role: "img",
     src: imgSrc,
     sx: sx
@@ -212,7 +215,15 @@ Image.propTypes = {
   fallbackImage: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
 
   /**  Time in milliseconds that component should wait for a response from src address. */
-  fallbackTimeout: _propTypes["default"].number
+  fallbackTimeout: _propTypes["default"].number,
+
+  /** Descriptive text for an image. This is *highly* recommended in most cases.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt).
+   * */
+  alt: _propTypes["default"].string,
+
+  /** Defines a string value that labels the current element. */
+  'aria-label': _propTypes["default"].string
 };
 Image.defaultProps = {
   isDisabled: false,

package/lib/cjs/components/Image/Image.stories.js

@@ -67,7 +67,9 @@ exports["default"] = _default;
 
 var Default = function Default(_ref) {
   var args = (0, _extends2["default"])({}, _ref);
-  return (0, _react2.jsx)(_["default"], args);
+  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
+    alt: "Ping identity square logo"
+  }));
 };
 
 exports.Default = Default;
@@ -75,7 +77,8 @@ exports.Default = Default;
 var Avatar = function Avatar() {
   return (0, _react2.jsx)(_["default"], {
     src: _imageConstants.pingImg,
-    variant: "images.avatar"
+    variant: "images.avatar",
+    alt: "Ping identity round avatar"
   });
 };
 
@@ -89,7 +92,8 @@ var CustomSizeAndRadius = function CustomSizeAndRadius() {
       height: '70px',
       borderRadius: 8,
       bg: 'neutral.90'
-    }
+    },
+    alt: "Terry Crews in a red suite"
   });
 };
 
@@ -98,7 +102,8 @@ exports.CustomSizeAndRadius = CustomSizeAndRadius;
 var Disabled = function Disabled() {
   return (0, _react2.jsx)(_["default"], {
     src: _imageConstants.pingImg,
-    isDisabled: true
+    isDisabled: true,
+    alt: "Ping identity square logo"
   });
 };
 
@@ -111,7 +116,8 @@ var FallbackImage = function FallbackImage() {
     sx: {
       width: '150px',
       height: '150px'
-    }
+    },
+    alt: "Random image"
   });
 };
 
@@ -125,7 +131,8 @@ var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
     sx: {
       width: '150px',
       height: '150px'
-    }
+    },
+    alt: "Random image"
   });
 };
 
@@ -140,7 +147,8 @@ var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
     sx: {
       width: '150px',
       height: '150px'
-    }
+    },
+    alt: "Random image"
   });
 };
 
@@ -169,7 +177,8 @@ var UpdatingImageSrc = function UpdatingImageSrc() {
       width: '200px',
       height: '200px',
       mt: '25px'
-    }
+    },
+    alt: image === _imageConstants.pingImg ? 'Ping identity square logo' : 'Terry Crews in a red suite'
   }));
 };
 

package/lib/cjs/components/Image/Image.test.js

@@ -101,6 +101,15 @@ test('image shows disabled status', function () {
 
   expect(img).toHaveClass('is-disabled');
 });
+test('image with alt text', function () {
+  getComponent({
+    alt: 'Test'
+  });
+  (0, _react2.act)(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(_testWrapper.screen.getByAltText('Test')).toBeInTheDocument();
+});
 test('image source is able to be changed', function () {
   var src2 = 'second-src';
 

package/lib/components/Image/Image.js

@@ -14,7 +14,7 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 
 var _templateObject;
 
-var _excluded = ["className", "fallbackImage", "fallbackTimeout", "isDisabled", "src", "sx"];
+var _excluded = ["className", "fallbackImage", "fallbackTimeout", "isDisabled", "src", "alt", "sx"];
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -25,7 +25,7 @@ import PropTypes from 'prop-types';
 import { Image as ThemeUIImage } from 'theme-ui';
 import { useHover } from '@react-aria/interactions';
 import { keyframes } from '@emotion/react';
-import { usePropWarning, useStatusClasses, useFallbackImage } from '../../hooks';
+import { usePropWarning, useStatusClasses, useFallbackImage, useAriaLabelWarning } from '../../hooks';
 import { Box } from '../../index';
 import { neutral } from '../../styles/colors';
 /**
@@ -41,6 +41,7 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
       fallbackTimeout = props.fallbackTimeout,
       isDisabled = props.isDisabled,
       src = props.src,
+      alt = props.alt,
       sx = props.sx,
       others = _objectWithoutProperties(props, _excluded);
 
@@ -86,6 +87,8 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
     return imgRef.current;
   });
   usePropWarning(props, 'disabled', 'isDisabled');
+  var ariaLabel = props['aria-label'] || alt;
+  useAriaLabelWarning('Image', ariaLabel);
 
   var _useHover = useHover(props),
       hoverProps = _useHover.hoverProps,
@@ -142,7 +145,7 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   var themeUiImage = ___EmotionJSX(ThemeUIImage, _extends({
     className: classNames,
     ref: imgRef,
-    alt: "Image",
+    alt: alt,
     role: "img",
     src: imgSrc,
     sx: sx
@@ -176,7 +179,15 @@ Image.propTypes = {
   fallbackImage: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 
   /**  Time in milliseconds that component should wait for a response from src address. */
-  fallbackTimeout: PropTypes.number
+  fallbackTimeout: PropTypes.number,
+
+  /** Descriptive text for an image. This is *highly* recommended in most cases.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt).
+   * */
+  alt: PropTypes.string,
+
+  /** Defines a string value that labels the current element. */
+  'aria-label': PropTypes.string
 };
 Image.defaultProps = {
   isDisabled: false,

package/lib/components/Image/Image.stories.js

@@ -35,12 +35,15 @@ export default {
 export var Default = function Default(_ref) {
   var args = _extends({}, _ref);
 
-  return ___EmotionJSX(Image, args);
+  return ___EmotionJSX(Image, _extends({}, args, {
+    alt: "Ping identity square logo"
+  }));
 };
 export var Avatar = function Avatar() {
   return ___EmotionJSX(Image, {
     src: pingImg,
-    variant: "images.avatar"
+    variant: "images.avatar",
+    alt: "Ping identity round avatar"
   });
 };
 export var CustomSizeAndRadius = function CustomSizeAndRadius() {
@@ -51,13 +54,15 @@ export var CustomSizeAndRadius = function CustomSizeAndRadius() {
       height: '70px',
       borderRadius: 8,
       bg: 'neutral.90'
-    }
+    },
+    alt: "Terry Crews in a red suite"
   });
 };
 export var Disabled = function Disabled() {
   return ___EmotionJSX(Image, {
     src: pingImg,
-    isDisabled: true
+    isDisabled: true,
+    alt: "Ping identity square logo"
   });
 };
 export var FallbackImage = function FallbackImage() {
@@ -67,7 +72,8 @@ export var FallbackImage = function FallbackImage() {
     sx: {
       width: '150px',
       height: '150px'
-    }
+    },
+    alt: "Random image"
   });
 };
 export var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
@@ -78,7 +84,8 @@ export var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
     sx: {
       width: '150px',
       height: '150px'
-    }
+    },
+    alt: "Random image"
   });
 };
 WithSkeletonLoadSuccess.args = {
@@ -90,7 +97,8 @@ export var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
     sx: {
       width: '150px',
       height: '150px'
-    }
+    },
+    alt: "Random image"
   });
 };
 export var UpdatingImageSrc = function UpdatingImageSrc() {
@@ -116,6 +124,7 @@ export var UpdatingImageSrc = function UpdatingImageSrc() {
       width: '200px',
       height: '200px',
       mt: '25px'
-    }
+    },
+    alt: image === pingImg ? 'Ping identity square logo' : 'Terry Crews in a red suite'
   }));
 };

package/lib/components/Image/Image.test.js

@@ -76,6 +76,15 @@ test('image shows disabled status', function () {
   var img = screen.getByRole('img');
   expect(img).toHaveClass('is-disabled');
 });
+test('image with alt text', function () {
+  getComponent({
+    alt: 'Test'
+  });
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(screen.getByAltText('Test')).toBeInTheDocument();
+});
 test('image source is able to be changed', function () {
   var src2 = 'second-src';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.17.0-alpha.0",
+  "version": "1.17.0-alpha.1",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",