@pingux/astro 1.28.2-alpha.1 → 1.28.2-alpha.2

package/lib/cjs/components/Messages/Message.js

@@ -14,7 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.icons = exports["default"] = void 0;
+exports.icons = exports["default"] = exports.ARIA_STATUSES = void 0;
 
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 
@@ -30,8 +30,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _liveAnnouncer = require("@react-aria/live-announcer");
-
 var _AlertCircleIcon = _interopRequireDefault(require("mdi-react/AlertCircleIcon"));
 
 var _CheckCircleIcon = _interopRequireDefault(require("mdi-react/CheckCircleIcon"));
@@ -69,6 +67,12 @@ var icons = {
   warning: _AlertIcon["default"]
 };
 exports.icons = icons;
+var ARIA_STATUSES = {
+  SUCCESS: 'Success Message',
+  ERROR: 'Error Message',
+  WARNING: 'Warning Message'
+};
+exports.ARIA_STATUSES = ARIA_STATUSES;
 
 var CloseButton = function CloseButton(_ref) {
   var color = _ref.color,
@@ -115,9 +119,6 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   };
 
-  (0, _react.useEffect)(function () {
-    (0, _liveAnnouncer.announce)(children, 'polite');
-  }, []);
   var innerRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(0),
@@ -134,13 +135,28 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       wrapperClasses = _useStatusClasses3.classNames;
 
+  var ariaStatus = function ariaStatus(ariaStatusClass) {
+    if (ariaStatusClass === 'is-success') {
+      return ARIA_STATUSES.SUCCESS;
+    } else if (ariaStatusClass === 'is-error') {
+      return ARIA_STATUSES.ERROR;
+    } else if (ariaStatusClass === 'is-warning') {
+      return ARIA_STATUSES.WARNING;
+    }
+
+    return '';
+  };
+
   return (0, _react2.jsx)(_Box["default"], {
     variant: "messages.transition",
     className: wrapperClasses,
     sx: {
       maxHeight: !isHidden ? innerHeight : 0
     },
-    "data-id": dataId
+    "data-id": dataId,
+    role: "status",
+    "aria-live": "polite",
+    "aria-label": ariaStatus(statusClasses)
   }, (0, _react2.jsx)(_Box["default"], {
     ref: innerRef
   }, (0, _react2.jsx)(_Box["default"], {

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

@@ -10,19 +10,15 @@ var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
 
-var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _liveAnnouncer = require("@react-aria/live-announcer");
+var _react = _interopRequireDefault(require("react"));
 
 var _collections = require("@react-stately/collections");
 
@@ -34,7 +30,7 @@ var _testWrapper = require("../../utils/testUtils/testWrapper");
 
 var _ = _interopRequireWildcard(require("."));
 
-var _Button = _interopRequireDefault(require("../Button"));
+var _Message = require("../Messages/Message");
 
 var _react2 = require("@emotion/react");
 
@@ -47,7 +43,6 @@ jest.mock('@react-aria/live-announcer', function () {
     announce: jest.fn()
   };
 });
-var mockAnnounce = _liveAnnouncer.announce;
 var testId = 'test-messages';
 var defaultProps = {
   'data-testid': testId
@@ -81,37 +76,6 @@ var getWithDynamicList = function getWithDynamicList() {
   return renderFn((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), function (item) {
     return (0, _react2.jsx)(_collections.Item, item, item.text);
   }));
-};
-
-var MessagesWithButton = function MessagesWithButton(props) {
-  var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      messages = _useState2[0],
-      setMessages = _useState2[1];
-
-  var addMessage = function addMessage() {
-    var _context;
-
-    setMessages((0, _concat["default"])(_context = []).call(_context, messages, [{
-      key: "message".concat(messages.length + 1),
-      text: "New message ".concat(messages.length + 1),
-      status: 'default'
-    }]));
-  };
-
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Button["default"], {
-    onPress: addMessage
-  }, "Click me!"), (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
-    items: messages
-  }, props), function (item) {
-    return (0, _react2.jsx)(_collections.Item, item, item.text);
-  }));
-};
-
-var getWithButton = function getWithButton() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var renderFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _testWrapper.render;
-  return renderFn((0, _react2.jsx)(MessagesWithButton, (0, _extends2["default"])({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -191,40 +155,31 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
 
   expect(firstMessage).toHaveAttribute('data-id', 'message1');
 });
-describe('announcements', function () {
-  // Live announcer is (mostly) only used on apple devices for VoiceOver.
-  // Mock navigator.platform so we take that codepath.
-  var platformMock;
-  beforeEach(function () {
-    platformMock = jest.spyOn(navigator, 'platform', 'get').mockImplementation(function () {
-      return 'MacIntel';
-    });
-  });
-  afterEach(function () {
-    jest.clearAllMocks();
-    platformMock.mockRestore();
-  });
-  test('should announce on render', function () {
-    getWithDynamicList({
-      items: items
-    });
-    (0, _forEach["default"])(items).call(items, function (item) {
-      return expect(mockAnnounce).toHaveBeenCalledWith(item.text, 'polite');
-    });
-  });
-  test('should announce on adding item', function () {
-    getWithButton();
+test('message has role and aria-live attributes', function () {
+  getComponent();
 
-    var messages = _testWrapper.screen.getByTestId(testId);
+  var _screen$getByTestId3 = _testWrapper.screen.getByTestId(testId),
+      firstMessage = _screen$getByTestId3.firstChild;
 
-    expect(messages.childElementCount).toBe(0);
+  expect(firstMessage).toHaveAttribute('role', 'status');
+  expect(firstMessage).toHaveAttribute('aria-live', 'polite');
+});
+test('messages with a status have an aria-label announcing the status', function () {
+  getComponent();
 
-    var button = _testWrapper.screen.getByText('Click me!');
+  var successMessage = _testWrapper.screen.getAllByRole('status')[1];
 
-    _userEvent["default"].click(button);
+  expect(successMessage).toHaveAttribute('aria-label', _Message.ARIA_STATUSES[0]);
+});
+test('messages without a status do not have an aria-label announcing the status', function () {
+  var _context;
 
-    expect(messages.childElementCount).toBe(1);
-    expect(mockAnnounce).toHaveBeenCalledWith('New message 1', 'polite');
+  getComponent();
+
+  var statusMessage = _testWrapper.screen.getAllByRole('status')[0];
+
+  (0, _map["default"])(_context = (0, _keys["default"])(_Message.ARIA_STATUSES)).call(_context, function (key) {
+    return expect(statusMessage).not.toHaveAttribute('aria-label', _Message.ARIA_STATUSES[key]);
   });
 });
 test('should render messages with messagesReducerStory', function () {

package/lib/cjs/recipes/RadioButtonsWithLinks.stories.js

@@ -110,7 +110,8 @@ var Default = function Default() {
         fontWeight: 2
       }
     }, "Permissions"), (0, _react2.jsx)(_index.IconButton, {
-      onPress: onPress
+      onPress: onPress,
+      "aria-label": "close icon button"
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _CloseIcon["default"]
     }))), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {

package/lib/components/Messages/Message.js

@@ -4,9 +4,8 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["color"];
-import React, { forwardRef, useEffect, useRef, useState, useLayoutEffect } from 'react';
+import React, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import { announce } from '@react-aria/live-announcer';
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
@@ -25,6 +24,11 @@ export var icons = {
   error: AlertCircleIcon,
   warning: AlertIcon
 };
+export var ARIA_STATUSES = {
+  SUCCESS: 'Success Message',
+  ERROR: 'Error Message',
+  WARNING: 'Warning Message'
+};
 
 var CloseButton = function CloseButton(_ref) {
   var color = _ref.color,
@@ -72,9 +76,6 @@ var Message = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
 
-  useEffect(function () {
-    announce(children, 'polite');
-  }, []);
   var innerRef = useRef(null);
 
   var _useState = useState(0),
@@ -91,13 +92,28 @@ var Message = /*#__PURE__*/forwardRef(function (props, ref) {
   }),
       wrapperClasses = _useStatusClasses3.classNames;
 
+  var ariaStatus = function ariaStatus(ariaStatusClass) {
+    if (ariaStatusClass === 'is-success') {
+      return ARIA_STATUSES.SUCCESS;
+    } else if (ariaStatusClass === 'is-error') {
+      return ARIA_STATUSES.ERROR;
+    } else if (ariaStatusClass === 'is-warning') {
+      return ARIA_STATUSES.WARNING;
+    }
+
+    return '';
+  };
+
   return ___EmotionJSX(Box, {
     variant: "messages.transition",
     className: wrapperClasses,
     sx: {
       maxHeight: !isHidden ? innerHeight : 0
     },
-    "data-id": dataId
+    "data-id": dataId,
+    role: "status",
+    "aria-live": "polite",
+    "aria-label": ariaStatus(statusClasses)
   }, ___EmotionJSX(Box, {
     ref: innerRef
   }, ___EmotionJSX(Box, {

package/lib/components/Messages/Messages.test.js

@@ -1,23 +1,20 @@
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React, { useState } from 'react';
-import { announce } from '@react-aria/live-announcer';
+import React from 'react';
 import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import Messages, { messagesReducerStory, multiMessagesReducerStory } from '.';
-import Button from '../Button';
+import { ARIA_STATUSES } from '../Messages/Message';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 jest.mock('@react-aria/live-announcer', function () {
   return {
     announce: jest.fn()
   };
 });
-var mockAnnounce = announce;
 var testId = 'test-messages';
 var defaultProps = {
   'data-testid': testId
@@ -51,37 +48,6 @@ var getWithDynamicList = function getWithDynamicList() {
   return renderFn(___EmotionJSX(Messages, _extends({}, defaultProps, props), function (item) {
     return ___EmotionJSX(Item, item, item.text);
   }));
-};
-
-var MessagesWithButton = function MessagesWithButton(props) {
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      messages = _useState2[0],
-      setMessages = _useState2[1];
-
-  var addMessage = function addMessage() {
-    var _context;
-
-    setMessages(_concatInstanceProperty(_context = []).call(_context, messages, [{
-      key: "message".concat(messages.length + 1),
-      text: "New message ".concat(messages.length + 1),
-      status: 'default'
-    }]));
-  };
-
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
-    onPress: addMessage
-  }, "Click me!"), ___EmotionJSX(Messages, _extends({
-    items: messages
-  }, props), function (item) {
-    return ___EmotionJSX(Item, item, item.text);
-  }));
-};
-
-var getWithButton = function getWithButton() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var renderFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : render;
-  return renderFn(___EmotionJSX(MessagesWithButton, _extends({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -147,36 +113,28 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
 
   expect(firstMessage).toHaveAttribute('data-id', 'message1');
 });
-describe('announcements', function () {
-  // Live announcer is (mostly) only used on apple devices for VoiceOver.
-  // Mock navigator.platform so we take that codepath.
-  var platformMock;
-  beforeEach(function () {
-    platformMock = jest.spyOn(navigator, 'platform', 'get').mockImplementation(function () {
-      return 'MacIntel';
-    });
-  });
-  afterEach(function () {
-    jest.clearAllMocks();
-    platformMock.mockRestore();
-  });
-  test('should announce on render', function () {
-    getWithDynamicList({
-      items: items
-    });
+test('message has role and aria-live attributes', function () {
+  getComponent();
 
-    _forEachInstanceProperty(items).call(items, function (item) {
-      return expect(mockAnnounce).toHaveBeenCalledWith(item.text, 'polite');
-    });
-  });
-  test('should announce on adding item', function () {
-    getWithButton();
-    var messages = screen.getByTestId(testId);
-    expect(messages.childElementCount).toBe(0);
-    var button = screen.getByText('Click me!');
-    userEvent.click(button);
-    expect(messages.childElementCount).toBe(1);
-    expect(mockAnnounce).toHaveBeenCalledWith('New message 1', 'polite');
+  var _screen$getByTestId3 = screen.getByTestId(testId),
+      firstMessage = _screen$getByTestId3.firstChild;
+
+  expect(firstMessage).toHaveAttribute('role', 'status');
+  expect(firstMessage).toHaveAttribute('aria-live', 'polite');
+});
+test('messages with a status have an aria-label announcing the status', function () {
+  getComponent();
+  var successMessage = screen.getAllByRole('status')[1];
+  expect(successMessage).toHaveAttribute('aria-label', ARIA_STATUSES[0]);
+});
+test('messages without a status do not have an aria-label announcing the status', function () {
+  var _context;
+
+  getComponent();
+  var statusMessage = screen.getAllByRole('status')[0];
+
+  _mapInstanceProperty(_context = _Object$keys(ARIA_STATUSES)).call(_context, function (key) {
+    return expect(statusMessage).not.toHaveAttribute('aria-label', ARIA_STATUSES[key]);
   });
 });
 test('should render messages with messagesReducerStory', function () {

package/lib/recipes/RadioButtonsWithLinks.stories.js

@@ -78,7 +78,8 @@ export var Default = function Default() {
         fontWeight: 2
       }
     }, "Permissions"), ___EmotionJSX(IconButton, {
-      onPress: onPress
+      onPress: onPress,
+      "aria-label": "close icon button"
     }, ___EmotionJSX(Icon, {
       icon: CloseIcon
     }))), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.28.2-alpha.1",
+  "version": "1.28.2-alpha.2",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",