@pingux/astro 1.12.0-alpha.0 → 1.12.0-alpha.3

package/lib/cjs/components/Avatar/Avatar.js

@@ -36,13 +36,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_themeUi.Avatar, (0, _extends2["default"])({
-    ref: ref,
-    alt: "Avatar"
+    ref: ref
   }, props));
 });
 Avatar.propTypes = {
   /**  Source of avatar. */
-  src: _propTypes["default"].string.isRequired
+  src: _propTypes["default"].string.isRequired,
+
+  /** Alternative text for avatar. */
+  alt: _propTypes["default"].string
+};
+Avatar.defaultProps = {
+  alt: 'Avatar'
 };
 Avatar.displayName = 'Avatar';
 var _default = Avatar;

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

@@ -34,4 +34,14 @@ test('an avatar is rendered', function () {
 
   expect(img).toBeInstanceOf(HTMLImageElement);
   expect(img).toBeInTheDocument();
+  expect(img).toHaveAttribute('alt', 'Avatar');
+});
+test('an avatar is rendered with custom alt', function () {
+  getComponent({
+    alt: 'Custom Alt'
+  });
+
+  var img = _testWrapper.screen.getByRole('img');
+
+  expect(img).toHaveAttribute('alt', 'Custom Alt');
 });

package/lib/cjs/components/Button/Button.js

@@ -54,7 +54,7 @@ var _Loader = _interopRequireDefault(require("../Loader"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant"];
+var _excluded = ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant", "tabIndex"];
 
 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); }
 
@@ -78,6 +78,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onPressUp = props.onPressUp,
       children = props.children,
       variant = props.variant,
+      tabIndex = props.tabIndex,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var buttonRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
@@ -132,7 +133,9 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       alignItems: 'center'
     },
     variant: variant
-  }, others, (0, _utils.mergeProps)(hoverProps, focusProps, buttonProps)), isLoading ? (0, _react2.jsx)("span", {
+  }, others, (0, _utils.mergeProps)(hoverProps, focusProps, _objectSpread(_objectSpread({}, buttonProps), {}, {
+    tabIndex: tabIndex
+  }))), isLoading ? (0, _react2.jsx)("span", {
     style: {
       visibility: 'hidden'
     }
@@ -204,7 +207,10 @@ Button.propTypes = {
   onPressUp: _propTypes["default"].func,
 
   /** The styling variation of the button. */
-  variant: _propTypes["default"].string
+  variant: _propTypes["default"].string,
+
+  /** The focus variation of the button. */
+  tabIndex: _propTypes["default"].number
 };
 Button.defaultProps = {
   isDisabled: false,

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

@@ -85,7 +85,7 @@ test('renders component in the default state', function () {
 test('copy button is hovered and renders tooltip via mouse', function () {
   getComponent();
 
-  var copyBtn = _testWrapper.screen.getByLabelText('copy');
+  var copyBtn = _testWrapper.screen.getByLabelText('copy to clipboard');
 
   expect(copyBtn).not.toHaveFocus();
 
@@ -98,7 +98,7 @@ test('copy button is hovered and renders tooltip via mouse', function () {
 test('copy button is focused and renders tooltip via keyboard', function () {
   getComponent();
 
-  var copyBtn = _testWrapper.screen.getByLabelText('copy');
+  var copyBtn = _testWrapper.screen.getByLabelText('copy to clipboard');
 
   expect(copyBtn).not.toHaveFocus();
 
@@ -141,7 +141,7 @@ test('click on copy button copies data to the clipboard', /*#__PURE__*/(0, _asyn
       switch (_context2.prev = _context2.next) {
         case 0:
           getComponent();
-          button = _testWrapper.screen.getByLabelText('copy');
+          button = _testWrapper.screen.getByLabelText('copy to clipboard');
           _context2.next = 4;
           return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
             return _regenerator["default"].wrap(function _callee$(_context) {
@@ -176,7 +176,7 @@ test('after button click, the tooltip renders with the text "Copied!"', /*#__PUR
       switch (_context4.prev = _context4.next) {
         case 0:
           getComponent();
-          button = _testWrapper.screen.getByLabelText('copy');
+          button = _testWrapper.screen.getByLabelText('copy to clipboard');
           _context4.next = 4;
           return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
             return _regenerator["default"].wrap(function _callee3$(_context3) {

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -159,7 +159,8 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "comboBox"
   }, triggerProps, {
     ref: triggerRef,
-    isDisabled: isDisabled || isReadOnly
+    isDisabled: isDisabled || isReadOnly,
+    tabIndex: -1
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _MenuDownIcon["default"],
     sx: isOpen ? {

package/lib/cjs/components/CopyText/CopyButton.js

@@ -39,7 +39,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var CopyButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
     ref: ref,
-    "aria-label": "copy",
+    "aria-label": "copy to clipboard",
     variant: "buttons.copy"
   }, (0, _lodash.omit)(props, 'iconProps')), (0, _react2.jsx)(_Icon["default"], (0, _extends2["default"])({
     icon: _ContentCopyIcon["default"],

package/lib/cjs/components/CopyText/CopyText.js

@@ -34,6 +34,8 @@ var _interactions = require("@react-aria/interactions");
 
 var _utils = require("@react-aria/utils");
 
+var _liveAnnouncer = require("@react-aria/live-announcer");
+
 var _index = require("../../index");
 
 var _CopyButton = _interopRequireDefault(require("./CopyButton"));
@@ -101,6 +103,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   (0, _react.useEffect)(function () {
     if (isCopied) {
+      (0, _liveAnnouncer.announce)('Copied!', 'polite');
       var timer = (0, _setTimeout2["default"])(function () {
         setIsCopied(false);
       }, 1000);
@@ -115,7 +118,8 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var content = mode === 'link' || mode === 'nonClickableContent' ? children : (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "quiet",
     onPress: copyToClipboard,
-    "aria-label": "copy-content"
+    "aria-label": "copy-content",
+    tabIndex: -1
   }, focusProps), children);
   var tooltip = isCopied ? 'Copied!' : tooltipText;
   var isTooltipOpen = isFocusVisible || isHovered || isCopied;

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

@@ -88,19 +88,10 @@ describe('Text mode', function () {
     expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
     expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
   });
-  test('content and copy buttons are focused with keyboard', function () {
+  test('copy button is focused with keyboard', function () {
     getComponent();
 
-    var contentBtn = _testWrapper.screen.getByLabelText('copy-content');
-
-    expect(contentBtn).not.toHaveFocus();
-
-    _userEvent["default"].tab();
-
-    expect(contentBtn).toHaveFocus();
-    expect(contentBtn).toHaveClass('is-focused');
-
-    var copyBtn = _testWrapper.screen.getByLabelText('copy');
+    var copyBtn = _testWrapper.screen.getByLabelText('copy to clipboard');
 
     expect(copyBtn).not.toHaveFocus();
 
@@ -164,7 +155,7 @@ describe('Text mode', function () {
         switch (_context4.prev = _context4.next) {
           case 0:
             getComponent();
-            button = _testWrapper.screen.getByLabelText('copy');
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
             _context4.next = 4;
             return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
               return _regenerator["default"].wrap(function _callee3$(_context3) {
@@ -202,7 +193,7 @@ describe('Text mode', function () {
             getComponent({
               textToCopy: textToCopy
             });
-            button = _testWrapper.screen.getByLabelText('copy');
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
             _context6.next = 5;
             return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
               return _regenerator["default"].wrap(function _callee5$(_context5) {
@@ -238,7 +229,7 @@ describe('Text mode', function () {
           case 0:
             global.navigator.clipboard = undefined;
             getComponent();
-            button = _testWrapper.screen.getByLabelText('copy');
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
             _context8.next = 5;
             return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
               return _regenerator["default"].wrap(function _callee7$(_context7) {
@@ -283,7 +274,7 @@ describe('Text mode', function () {
             getComponent();
             spy = jest.spyOn(console, 'error');
             expect(spy).not.toHaveBeenCalled();
-            button = _testWrapper.screen.getByLabelText('copy');
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
             _context10.next = 9;
             return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
               return _regenerator["default"].wrap(function _callee9$(_context9) {
@@ -319,7 +310,7 @@ describe('Text mode', function () {
         switch (_context12.prev = _context12.next) {
           case 0:
             getComponent();
-            button = _testWrapper.screen.getByLabelText('copy');
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
             _context12.next = 4;
             return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
               return _regenerator["default"].wrap(function _callee11$(_context11) {
@@ -354,7 +345,7 @@ describe('Text mode', function () {
         switch (_context14.prev = _context14.next) {
           case 0:
             getComponent();
-            button = _testWrapper.screen.getByLabelText('copy');
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
             _context14.next = 4;
             return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13() {
               return _regenerator["default"].wrap(function _callee13$(_context13) {
@@ -415,7 +406,7 @@ describe('Link mode', function () {
 
     expect(_testWrapper.screen.queryByRole('tooltip')).not.toBeInTheDocument();
 
-    var button = _testWrapper.screen.getByLabelText('copy');
+    var button = _testWrapper.screen.getByLabelText('copy to clipboard');
 
     _testWrapper.fireEvent.mouseMove(button);
 
@@ -426,7 +417,7 @@ describe('Link mode', function () {
   test('copy button is focused with keyboard', function () {
     getComponent();
 
-    var copyBtn = _testWrapper.screen.getByLabelText('copy');
+    var copyBtn = _testWrapper.screen.getByLabelText('copy to clipboard');
 
     expect(copyBtn).not.toHaveFocus();
 
@@ -454,7 +445,7 @@ describe('Link mode', function () {
         switch (_context16.prev = _context16.next) {
           case 0:
             getComponent();
-            button = _testWrapper.screen.getByLabelText('copy');
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
             _context16.next = 4;
             return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15() {
               return _regenerator["default"].wrap(function _callee15$(_context15) {

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

@@ -88,7 +88,12 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       loadedSuccessfully = _useState4[0],
-      setLoadedSuccessfully = _useState4[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
+      setLoadedSuccessfully = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      hasTimedOut = _useState6[0],
+      setHasTimedOut = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
   // https://github.com/facebook/react/issues/14010#issuecomment-433788147
 
 
@@ -99,11 +104,17 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isLoadingRef.current = newState;
   };
 
-  var _useState5 = (0, _react.useState)(fallbackImage || src),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      imgSrc = _useState6[0],
-      setImgSrc = _useState6[1];
+  var setImgSrc = function setImgSrc() {
+    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || hasTimedOut) {
+      return fallbackImage;
+    }
+
+    return src;
+  };
 
+  var imgSrc = (0, _react.useMemo)(function () {
+    return setImgSrc();
+  }, [src, isLoading, hasTimedOut]);
   var imgRef = (0, _react.useRef)();
   /* istanbul ignore next */
 
@@ -126,20 +137,18 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var onImageLoad = function onImageLoad() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setImgSrc(src);
       setLoadedSuccessfully(true);
     }
   };
 
   var onImageError = function onImageError() {
     setIsLoadingWithRef(false);
-    setImgSrc(fallbackImage || null);
   };
 
   var onFallbackTimeout = function onFallbackTimeout() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setImgSrc(fallbackImage || null);
+      setHasTimedOut(true);
     }
   };
 

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

@@ -2,17 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithSkeletonLoadTimeout = exports.WithSkeletonLoadSuccess = exports.FallbackImage = exports.Disabled = exports.Default = exports.CustomSizeAndRadius = exports.Avatar = void 0;
+exports["default"] = exports.WithSkeletonLoadTimeout = exports.WithSkeletonLoadSuccess = exports.UpdatingImageSrc = exports.FallbackImage = exports.Disabled = exports.Default = exports.CustomSizeAndRadius = exports.Avatar = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
 
@@ -22,8 +30,14 @@ var _imageConstants = require("./imageConstants");
 
 var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 
+var _index = require("../../index");
+
 var _react2 = require("@emotion/react");
 
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var _default = {
   title: 'Image',
   component: _["default"],
@@ -130,4 +144,33 @@ var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
   });
 };
 
-exports.WithSkeletonLoadTimeout = WithSkeletonLoadTimeout;
+exports.WithSkeletonLoadTimeout = WithSkeletonLoadTimeout;
+
+var UpdatingImageSrc = function UpdatingImageSrc() {
+  var _useState = (0, _react.useState)(_imageConstants.chiefIdentityChampions),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      image = _useState2[0],
+      setImage = _useState2[1];
+
+  var handleButtonPress = function handleButtonPress() {
+    var src = image === _imageConstants.pingImg ? _imageConstants.chiefIdentityChampions : _imageConstants.pingImg;
+    setImage(src);
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      width: '200px'
+    }
+  }, (0, _react2.jsx)(_index.Button, {
+    onPress: handleButtonPress
+  }, "Change Image"), (0, _react2.jsx)(_["default"], {
+    src: image,
+    sx: {
+      width: '200px',
+      height: '200px',
+      mt: '25px'
+    }
+  }));
+};
+
+exports.UpdatingImageSrc = UpdatingImageSrc;

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

@@ -48,7 +48,12 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
+
+  return renderFn((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -96,6 +101,26 @@ test('image shows disabled status', function () {
 
   expect(img).toHaveClass('is-disabled');
 });
+test('image source is able to be changed', function () {
+  var src2 = 'second-src';
+
+  var _getComponent = getComponent(),
+      rerender = _getComponent.rerender;
+
+  (0, _react2.act)(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', testSrc);
+  getComponent({
+    src: src2
+  }, {
+    renderFn: rerender
+  });
+  (0, _react2.act)(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', src2);
+});
 describe('test Image component with useFallbackImage hook', function () {
   test('image component will use src if loaded correctly', function () {
     getComponent();

package/lib/cjs/components/Menu/Menu.js

@@ -58,6 +58,8 @@ var _MenuItem = _interopRequireDefault(require("../MenuItem"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["isDisabled", "onAction", "onSelectionChange", "isNotFocusedOnHover"];
@@ -111,7 +113,8 @@ var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "ul",
     ref: menuRef,
-    variant: "menu"
+    variant: "menu",
+    "aria-orientation": _orientation["default"].VERTICAL
   }, others, (0, _utils.mergeProps)(focusProps, menuProps)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
     return (0, _react2.jsx)(_MenuItem["default"], {
       key: item.key,

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

@@ -20,6 +20,8 @@ var _testWrapper = require("../../utils/testUtils/testWrapper");
 
 var _index = require("../../index");
 
+var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
+
 var _react2 = require("@emotion/react");
 
 var testTitle = 'Test Title';
@@ -59,6 +61,7 @@ test('should render basic menu with children', function () {
   var menuItems = _testWrapper.screen.queryAllByRole('menuitem');
 
   expect(menuItems).toHaveLength(3);
+  expect(menu).toHaveAttribute('aria-orientation', _orientation["default"].VERTICAL);
 });
 test('should render items when selectionMode is set to single', function () {
   getComponent({

package/lib/components/Avatar/Avatar.js

@@ -10,13 +10,18 @@ import { Avatar as ThemeUIAvatar } from 'theme-ui';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(ThemeUIAvatar, _extends({
-    ref: ref,
-    alt: "Avatar"
+    ref: ref
   }, props));
 });
 Avatar.propTypes = {
   /**  Source of avatar. */
-  src: PropTypes.string.isRequired
+  src: PropTypes.string.isRequired,
+
+  /** Alternative text for avatar. */
+  alt: PropTypes.string
+};
+Avatar.defaultProps = {
+  alt: 'Avatar'
 };
 Avatar.displayName = 'Avatar';
 export default Avatar;

package/lib/components/Avatar/Avatar.test.js

@@ -21,4 +21,12 @@ test('an avatar is rendered', function () {
   var img = screen.getByRole('img');
   expect(img).toBeInstanceOf(HTMLImageElement);
   expect(img).toBeInTheDocument();
+  expect(img).toHaveAttribute('alt', 'Avatar');
+});
+test('an avatar is rendered with custom alt', function () {
+  getComponent({
+    alt: 'Custom Alt'
+  });
+  var img = screen.getByRole('img');
+  expect(img).toHaveAttribute('alt', 'Custom Alt');
 });

package/lib/components/Button/Button.js

@@ -9,7 +9,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant"];
+var _excluded = ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant", "tabIndex"];
 
 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; }
 
@@ -39,6 +39,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       onPressUp = props.onPressUp,
       children = props.children,
       variant = props.variant,
+      tabIndex = props.tabIndex,
       others = _objectWithoutProperties(props, _excluded);
 
   var buttonRef = useRef();
@@ -94,7 +95,9 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       alignItems: 'center'
     },
     variant: variant
-  }, others, mergeProps(hoverProps, focusProps, buttonProps)), isLoading ? ___EmotionJSX("span", {
+  }, others, mergeProps(hoverProps, focusProps, _objectSpread(_objectSpread({}, buttonProps), {}, {
+    tabIndex: tabIndex
+  }))), isLoading ? ___EmotionJSX("span", {
     style: {
       visibility: 'hidden'
     }
@@ -166,7 +169,10 @@ Button.propTypes = {
   onPressUp: PropTypes.func,
 
   /** The styling variation of the button. */
-  variant: PropTypes.string
+  variant: PropTypes.string,
+
+  /** The focus variation of the button. */
+  tabIndex: PropTypes.number
 };
 Button.defaultProps = {
   isDisabled: false,

package/lib/components/CodeView/CodeView.test.js

@@ -60,7 +60,7 @@ test('renders component in the default state', function () {
 });
 test('copy button is hovered and renders tooltip via mouse', function () {
   getComponent();
-  var copyBtn = screen.getByLabelText('copy');
+  var copyBtn = screen.getByLabelText('copy to clipboard');
   expect(copyBtn).not.toHaveFocus();
   userEvent.hover(copyBtn);
   expect(copyBtn).toHaveClass('is-hovered');
@@ -69,7 +69,7 @@ test('copy button is hovered and renders tooltip via mouse', function () {
 });
 test('copy button is focused and renders tooltip via keyboard', function () {
   getComponent();
-  var copyBtn = screen.getByLabelText('copy');
+  var copyBtn = screen.getByLabelText('copy to clipboard');
   expect(copyBtn).not.toHaveFocus();
   userEvent.tab();
   expect(copyBtn).toHaveFocus();
@@ -105,7 +105,7 @@ test('click on copy button copies data to the clipboard', /*#__PURE__*/_asyncToG
       switch (_context2.prev = _context2.next) {
         case 0:
           getComponent();
-          button = screen.getByLabelText('copy');
+          button = screen.getByLabelText('copy to clipboard');
           _context2.next = 4;
           return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
             return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -140,7 +140,7 @@ test('after button click, the tooltip renders with the text "Copied!"', /*#__PUR
       switch (_context4.prev = _context4.next) {
         case 0:
           getComponent();
-          button = screen.getByLabelText('copy');
+          button = screen.getByLabelText('copy to clipboard');
           _context4.next = 4;
           return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
             return _regeneratorRuntime.wrap(function _callee3$(_context3) {

package/lib/components/ComboBox/ComboBoxInput.js

@@ -117,7 +117,8 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "comboBox"
   }, triggerProps, {
     ref: triggerRef,
-    isDisabled: isDisabled || isReadOnly
+    isDisabled: isDisabled || isReadOnly,
+    tabIndex: -1
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,
     sx: isOpen ? {

package/lib/components/CopyText/CopyButton.js

@@ -9,7 +9,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(IconButton, _extends({
     ref: ref,
-    "aria-label": "copy",
+    "aria-label": "copy to clipboard",
     variant: "buttons.copy"
   }, omit(props, 'iconProps')), ___EmotionJSX(Icon, _extends({
     icon: ContentCopy,

package/lib/components/CopyText/CopyText.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { useFocusRing } from '@react-aria/focus';
 import { Pressable, useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
+import { announce } from '@react-aria/live-announcer';
 import { Box, Button, Tooltip, TooltipTrigger } from '../../index';
 import CopyButton from './CopyButton';
 import useCopyToClipboard from '../../hooks/useCopyToClipboard';
@@ -68,6 +69,8 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
 
   useEffect(function () {
     if (isCopied) {
+      announce('Copied!', 'polite');
+
       var timer = _setTimeout(function () {
         setIsCopied(false);
       }, 1000);
@@ -83,7 +86,8 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
   var content = mode === 'link' || mode === 'nonClickableContent' ? children : ___EmotionJSX(Button, _extends({
     variant: "quiet",
     onPress: copyToClipboard,
-    "aria-label": "copy-content"
+    "aria-label": "copy-content",
+    tabIndex: -1
   }, focusProps), children);
   var tooltip = isCopied ? 'Copied!' : tooltipText;
   var isTooltipOpen = isFocusVisible || isHovered || isCopied;

package/lib/components/CopyText/CopyText.test.js

@@ -60,14 +60,9 @@ describe('Text mode', function () {
     expect(screen.queryByRole('tooltip')).toBeInTheDocument();
     expect(screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
   });
-  test('content and copy buttons are focused with keyboard', function () {
+  test('copy button is focused with keyboard', function () {
     getComponent();
-    var contentBtn = screen.getByLabelText('copy-content');
-    expect(contentBtn).not.toHaveFocus();
-    userEvent.tab();
-    expect(contentBtn).toHaveFocus();
-    expect(contentBtn).toHaveClass('is-focused');
-    var copyBtn = screen.getByLabelText('copy');
+    var copyBtn = screen.getByLabelText('copy to clipboard');
     expect(copyBtn).not.toHaveFocus();
     userEvent.tab();
     expect(copyBtn).toHaveFocus();
@@ -128,7 +123,7 @@ describe('Text mode', function () {
         switch (_context4.prev = _context4.next) {
           case 0:
             getComponent();
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context4.next = 4;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
               return _regeneratorRuntime.wrap(function _callee3$(_context3) {
@@ -166,7 +161,7 @@ describe('Text mode', function () {
             getComponent({
               textToCopy: textToCopy
             });
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context6.next = 5;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
               return _regeneratorRuntime.wrap(function _callee5$(_context5) {
@@ -202,7 +197,7 @@ describe('Text mode', function () {
           case 0:
             global.navigator.clipboard = undefined;
             getComponent();
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context8.next = 5;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
               return _regeneratorRuntime.wrap(function _callee7$(_context7) {
@@ -247,7 +242,7 @@ describe('Text mode', function () {
             getComponent();
             spy = jest.spyOn(console, 'error');
             expect(spy).not.toHaveBeenCalled();
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context10.next = 9;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
               return _regeneratorRuntime.wrap(function _callee9$(_context9) {
@@ -283,7 +278,7 @@ describe('Text mode', function () {
         switch (_context12.prev = _context12.next) {
           case 0:
             getComponent();
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context12.next = 4;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
               return _regeneratorRuntime.wrap(function _callee11$(_context11) {
@@ -318,7 +313,7 @@ describe('Text mode', function () {
         switch (_context14.prev = _context14.next) {
           case 0:
             getComponent();
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context14.next = 4;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
               return _regeneratorRuntime.wrap(function _callee13$(_context13) {
@@ -374,14 +369,14 @@ describe('Link mode', function () {
     fireEvent.mouseMove(container);
     fireEvent.mouseEnter(container);
     expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
-    var button = screen.getByLabelText('copy');
+    var button = screen.getByLabelText('copy to clipboard');
     fireEvent.mouseMove(button);
     fireEvent.mouseEnter(button);
     expect(screen.queryByRole('tooltip')).toBeInTheDocument();
   });
   test('copy button is focused with keyboard', function () {
     getComponent();
-    var copyBtn = screen.getByLabelText('copy');
+    var copyBtn = screen.getByLabelText('copy to clipboard');
     expect(copyBtn).not.toHaveFocus();
     userEvent.tab();
     userEvent.tab();
@@ -405,7 +400,7 @@ describe('Link mode', function () {
         switch (_context16.prev = _context16.next) {
           case 0:
             getComponent();
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context16.next = 4;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
               return _regeneratorRuntime.wrap(function _callee15$(_context15) {

package/lib/components/Image/Image.js

@@ -20,7 +20,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React, { forwardRef, useRef, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Image as ThemeUIImage } from 'theme-ui';
 import { useHover } from '@react-aria/interactions';
@@ -52,7 +52,12 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
       loadedSuccessfully = _useState4[0],
-      setLoadedSuccessfully = _useState4[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
+      setLoadedSuccessfully = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      hasTimedOut = _useState6[0],
+      setHasTimedOut = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
   // https://github.com/facebook/react/issues/14010#issuecomment-433788147
 
 
@@ -63,11 +68,17 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
     isLoadingRef.current = newState;
   };
 
-  var _useState5 = useState(fallbackImage || src),
-      _useState6 = _slicedToArray(_useState5, 2),
-      imgSrc = _useState6[0],
-      setImgSrc = _useState6[1];
+  var setImgSrc = function setImgSrc() {
+    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || hasTimedOut) {
+      return fallbackImage;
+    }
+
+    return src;
+  };
 
+  var imgSrc = useMemo(function () {
+    return setImgSrc();
+  }, [src, isLoading, hasTimedOut]);
   var imgRef = useRef();
   /* istanbul ignore next */
 
@@ -90,20 +101,18 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   var onImageLoad = function onImageLoad() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setImgSrc(src);
       setLoadedSuccessfully(true);
     }
   };
 
   var onImageError = function onImageError() {
     setIsLoadingWithRef(false);
-    setImgSrc(fallbackImage || null);
   };
 
   var onFallbackTimeout = function onFallbackTimeout() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setImgSrc(fallbackImage || null);
+      setHasTimedOut(true);
     }
   };
 

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

@@ -1,9 +1,11 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React from 'react';
+import React, { useState } from 'react';
 import isChromatic from 'chromatic/isChromatic';
 import Image from '.';
 import { chiefIdentityChampions, pingImg } from './imageConstants';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
+import { Box, Button } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Image',
@@ -90,4 +92,30 @@ export var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
       height: '150px'
     }
   });
+};
+export var UpdatingImageSrc = function UpdatingImageSrc() {
+  var _useState = useState(chiefIdentityChampions),
+      _useState2 = _slicedToArray(_useState, 2),
+      image = _useState2[0],
+      setImage = _useState2[1];
+
+  var handleButtonPress = function handleButtonPress() {
+    var src = image === pingImg ? chiefIdentityChampions : pingImg;
+    setImage(src);
+  };
+
+  return ___EmotionJSX(Box, {
+    sx: {
+      width: '200px'
+    }
+  }, ___EmotionJSX(Button, {
+    onPress: handleButtonPress
+  }, "Change Image"), ___EmotionJSX(Image, {
+    src: image,
+    sx: {
+      width: '200px',
+      height: '200px',
+      mt: '25px'
+    }
+  }));
 };

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

@@ -29,7 +29,12 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(Image, _extends({}, defaultProps, props)));
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
+
+  return renderFn(___EmotionJSX(Image, _extends({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -71,6 +76,26 @@ test('image shows disabled status', function () {
   var img = screen.getByRole('img');
   expect(img).toHaveClass('is-disabled');
 });
+test('image source is able to be changed', function () {
+  var src2 = 'second-src';
+
+  var _getComponent = getComponent(),
+      rerender = _getComponent.rerender;
+
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
+  getComponent({
+    src: src2
+  }, {
+    renderFn: rerender
+  });
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(screen.getByRole('img')).toHaveAttribute('src', src2);
+});
 describe('test Image component with useFallbackImage hook', function () {
   test('image component will use src if loaded correctly', function () {
     getComponent();

package/lib/components/Menu/Menu.js

@@ -27,6 +27,7 @@ import { MenuContext } from '../../context/MenuContext';
 import { usePropWarning } from '../../hooks';
 import MenuItem from '../MenuItem';
 import Box from '../Box';
+import ORIENTATION from '../../utils/devUtils/constants/orientation';
 /**
  * Menu component intended to be used as a wrapper for MenuItem.
  * This component is typically used alongside others such as PopoverMenu.
@@ -71,7 +72,8 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(Box, _extends({
     as: "ul",
     ref: menuRef,
-    variant: "menu"
+    variant: "menu",
+    "aria-orientation": ORIENTATION.VERTICAL
   }, others, mergeProps(focusProps, menuProps)), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(MenuItem, {
       key: item.key,

package/lib/components/Menu/Menu.test.js

@@ -7,6 +7,7 @@ import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
 import { Menu, Item } from '../../index';
+import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testTitle = 'Test Title';
 var defaultProps = {
@@ -41,6 +42,7 @@ test('should render basic menu with children', function () {
   expect(menu).toBeInTheDocument();
   var menuItems = screen.queryAllByRole('menuitem');
   expect(menuItems).toHaveLength(3);
+  expect(menu).toHaveAttribute('aria-orientation', ORIENTATION.VERTICAL);
 });
 test('should render items when selectionMode is set to single', function () {
   getComponent({

package/package.json

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