@pingux/astro 2.8.1-alpha.0 → 2.8.1-alpha.2

package/lib/cjs/components/Calendar/Calendar.js

@@ -121,14 +121,16 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     },
     mx: "sm",
     isDisabled: prevButtonProps.isDisabled,
-    "aria-label": "previous year navigation"
+    "aria-label": "Previous year navigation"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronDoubleLeftIcon["default"],
     size: 18,
     title: {
       name: 'Chevron Double Left Icon'
     }
-  })), (0, _react2.jsx)(_index.IconButton, prevButtonProps, (0, _react2.jsx)(_index.Icon, {
+  })), (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, prevButtonProps, {
+    "aria-label": "Previous month navigation"
+  }), (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronLeftIcon["default"],
     size: 18,
     title: {
@@ -139,7 +141,9 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     role: "heading",
     "aria-level": "3",
     fontWeight: 3
-  }, title), (0, _react2.jsx)(_index.IconButton, nextButtonProps, (0, _react2.jsx)(_index.Icon, {
+  }, title), (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, nextButtonProps, {
+    "aria-label": "Next month navigation"
+  }), (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronRightIcon["default"],
     size: 18,
     title: {
@@ -151,7 +155,7 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     },
     mx: "sm",
     isDisabled: nextButtonProps.isDisabled,
-    "aria-label": "next year navigation"
+    "aria-label": "Next year navigation"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronDoubleRightIcon["default"],
     size: 18,

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

@@ -47,8 +47,8 @@ test('renders calendar component', function () {
   var buttons = _testWrapper.screen.queryAllByRole('button');
   var previous = buttons[1];
   var next = buttons[2];
-  expect(previous).toHaveAttribute('aria-label', 'Previous');
-  expect(next).toHaveAttribute('aria-label', 'Next');
+  expect(previous).toHaveAttribute('aria-label', 'Previous month navigation');
+  expect(next).toHaveAttribute('aria-label', 'Next month navigation');
   expect(_testWrapper.screen.queryByRole('grid')).toHaveAttribute('aria-label', 'August 2022');
   var weeksInMonth = _testWrapper.screen.getAllByRole('row');
   expect(weeksInMonth).toHaveLength(5);
@@ -64,7 +64,7 @@ test('renders calendar component', function () {
   expect(gridCells.length).toBe(31);
   var hiddenButton = (0, _filter["default"])(_context2 = _testWrapper.screen.queryAllByRole('button')).call(_context2, function (button) {
     return button.getAttribute('aria-label') === 'Next';
-  })[1];
+  })[0];
   expect(hiddenButton).toHaveAttribute('tabindex', '-1');
   _userEvent["default"].click(hiddenButton);
   expect(heading).toHaveTextContent('September 2022');

package/lib/cjs/components/NumberField/NumberField.js

@@ -29,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
 var _hooks = require("../../hooks");
+var _useHiddenNumberFieldValue = _interopRequireDefault(require("../../hooks/useHiddenNumberFieldValue"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
@@ -48,7 +49,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var helperText = props.helperText,
-    status = props.status;
+    status = props.status,
+    formatOptions = props.formatOptions;
   var _useLocale = (0, _i18n.useLocale)(),
     locale = _useLocale.locale;
   var state = (0, _reactStately.useNumberFieldState)(_objectSpread(_objectSpread({}, props), {}, {
@@ -135,6 +137,10 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       inputProps.onChange(trimmedValueEvent);
     }
   };
+  var hiddenInputValue = (0, _useHiddenNumberFieldValue["default"])({
+    numberValue: state.numberValue,
+    isCurrency: formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.currency
+  });
   inputProps['aria-roledescription'] = null;
   var helperTextId = (0, _react.useMemo)(function () {
     return (0, _uuid.v4)();
@@ -152,7 +158,9 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onChange: onInputChange,
     "aria-describedby": helperText && helperTextId,
     role: "textbox"
-  })), ControlArrows), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  })), ControlArrows), (0, _react2.jsx)(_reactAria.VisuallyHidden, {
+    "aria-live": "assertive"
+  }, hiddenInputValue), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     id: helperTextId
   }, helperText)));

package/lib/cjs/hooks/useHiddenNumberFieldValue/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useHiddenNumberFieldValue["default"];
+  }
+});
+var _useHiddenNumberFieldValue = _interopRequireDefault(require("./useHiddenNumberFieldValue"));

package/lib/cjs/hooks/useHiddenNumberFieldValue/useHiddenNumberFieldValue.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+/**
+ * Returns integer or absolute value for screen reader announcement.
+*/
+
+var useHiddenNumberFieldValue = function useHiddenNumberFieldValue(_ref) {
+  var numberValue = _ref.numberValue,
+    isCurrency = _ref.isCurrency;
+  return (0, _react.useMemo)(function () {
+    if (!numberValue) return '';
+    if (!isCurrency) return numberValue;
+    return Math.abs(numberValue);
+  }, [numberValue, isCurrency]);
+};
+var _default = useHiddenNumberFieldValue;
+exports["default"] = _default;

package/lib/cjs/hooks/useHiddenNumberFieldValue/useHiddenNumberFieldValue.test.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _reactHooks = require("@testing-library/react-hooks");
+var _useHiddenNumberFieldValue = _interopRequireDefault(require("./useHiddenNumberFieldValue"));
+test('When number is not currency, negative values return negative values', function () {
+  var _renderHook = (0, _reactHooks.renderHook)(function () {
+      return (0, _useHiddenNumberFieldValue["default"])({
+        isCurrency: false,
+        numberValue: -1
+      });
+    }),
+    result = _renderHook.result;
+  expect(result.current).toBe(-1);
+});
+test('When number is currency, it always returns the absolute value', function () {
+  var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+      return (0, _useHiddenNumberFieldValue["default"])({
+        isCurrency: true,
+        numberValue: -1
+      });
+    }),
+    result = _renderHook2.result;
+  expect(result.current).toBe(1);
+});
+test('When number is not currency, positive values return positive numbers', function () {
+  var _renderHook3 = (0, _reactHooks.renderHook)(function () {
+      return (0, _useHiddenNumberFieldValue["default"])({
+        isCurrency: false,
+        numberValue: 2
+      });
+    }),
+    result = _renderHook3.result;
+  expect(result.current).toBe(2);
+});

package/lib/components/Calendar/Calendar.js

@@ -110,14 +110,16 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     mx: "sm",
     isDisabled: prevButtonProps.isDisabled,
-    "aria-label": "previous year navigation"
+    "aria-label": "Previous year navigation"
   }, ___EmotionJSX(Icon, {
     icon: ChevronDoubleLeftIcon,
     size: 18,
     title: {
       name: 'Chevron Double Left Icon'
     }
-  })), ___EmotionJSX(IconButton, prevButtonProps, ___EmotionJSX(Icon, {
+  })), ___EmotionJSX(IconButton, _extends({}, prevButtonProps, {
+    "aria-label": "Previous month navigation"
+  }), ___EmotionJSX(Icon, {
     icon: ChevronLeftIcon,
     size: 18,
     title: {
@@ -128,7 +130,9 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     role: "heading",
     "aria-level": "3",
     fontWeight: 3
-  }, title), ___EmotionJSX(IconButton, nextButtonProps, ___EmotionJSX(Icon, {
+  }, title), ___EmotionJSX(IconButton, _extends({}, nextButtonProps, {
+    "aria-label": "Next month navigation"
+  }), ___EmotionJSX(Icon, {
     icon: ChevronRightIcon,
     size: 18,
     title: {
@@ -140,7 +144,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     mx: "sm",
     isDisabled: nextButtonProps.isDisabled,
-    "aria-label": "next year navigation"
+    "aria-label": "Next year navigation"
   }, ___EmotionJSX(Icon, {
     icon: ChevronDoubleRightIcon,
     size: 18,

package/lib/components/Calendar/Calendar.test.js

@@ -44,8 +44,8 @@ test('renders calendar component', function () {
   var buttons = screen.queryAllByRole('button');
   var previous = buttons[1];
   var next = buttons[2];
-  expect(previous).toHaveAttribute('aria-label', 'Previous');
-  expect(next).toHaveAttribute('aria-label', 'Next');
+  expect(previous).toHaveAttribute('aria-label', 'Previous month navigation');
+  expect(next).toHaveAttribute('aria-label', 'Next month navigation');
   expect(screen.queryByRole('grid')).toHaveAttribute('aria-label', 'August 2022');
   var weeksInMonth = screen.getAllByRole('row');
   expect(weeksInMonth).toHaveLength(5);
@@ -61,7 +61,7 @@ test('renders calendar component', function () {
   expect(gridCells.length).toBe(31);
   var hiddenButton = _filterInstanceProperty(_context2 = screen.queryAllByRole('button')).call(_context2, function (button) {
     return button.getAttribute('aria-label') === 'Next';
-  })[1];
+  })[0];
   expect(hiddenButton).toHaveAttribute('tabindex', '-1');
   userEvent.click(hiddenButton);
   expect(heading).toHaveTextContent('September 2022');

package/lib/components/NumberField/NumberField.js

@@ -12,7 +12,7 @@ import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
-import { mergeProps, useNumberField } from 'react-aria';
+import { mergeProps, useNumberField, VisuallyHidden } from 'react-aria';
 import { useNumberFieldState } from 'react-stately';
 import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import MenuUp from '@pingux/mdi-react/MenuUpIcon';
@@ -22,6 +22,7 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../..';
 import { useField, usePropWarning } from '../../hooks';
+import useHiddenNumberFieldValue from '../../hooks/useHiddenNumberFieldValue';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
@@ -37,7 +38,8 @@ import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
-    status = props.status;
+    status = props.status,
+    formatOptions = props.formatOptions;
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
   var state = useNumberFieldState(_objectSpread(_objectSpread({}, props), {}, {
@@ -124,6 +126,10 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
       inputProps.onChange(trimmedValueEvent);
     }
   };
+  var hiddenInputValue = useHiddenNumberFieldValue({
+    numberValue: state.numberValue,
+    isCurrency: formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.currency
+  });
   inputProps['aria-roledescription'] = null;
   var helperTextId = useMemo(function () {
     return uuid();
@@ -141,7 +147,9 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange: onInputChange,
     "aria-describedby": helperText && helperTextId,
     role: "textbox"
-  })), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
+  })), ControlArrows), ___EmotionJSX(VisuallyHidden, {
+    "aria-live": "assertive"
+  }, hiddenInputValue), helperText && ___EmotionJSX(FieldHelperText, {
     status: status,
     id: helperTextId
   }, helperText)));

package/lib/hooks/useHiddenNumberFieldValue/index.js

@@ -0,0 +1 @@
+export { default } from './useHiddenNumberFieldValue';

package/lib/hooks/useHiddenNumberFieldValue/useHiddenNumberFieldValue.js

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+
+/**
+ * Returns integer or absolute value for screen reader announcement.
+*/
+
+var useHiddenNumberFieldValue = function useHiddenNumberFieldValue(_ref) {
+  var numberValue = _ref.numberValue,
+    isCurrency = _ref.isCurrency;
+  return useMemo(function () {
+    if (!numberValue) return '';
+    if (!isCurrency) return numberValue;
+    return Math.abs(numberValue);
+  }, [numberValue, isCurrency]);
+};
+export default useHiddenNumberFieldValue;

package/lib/hooks/useHiddenNumberFieldValue/useHiddenNumberFieldValue.test.js

@@ -0,0 +1,32 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useHiddenNumberFieldValue from './useHiddenNumberFieldValue';
+test('When number is not currency, negative values return negative values', function () {
+  var _renderHook = renderHook(function () {
+      return useHiddenNumberFieldValue({
+        isCurrency: false,
+        numberValue: -1
+      });
+    }),
+    result = _renderHook.result;
+  expect(result.current).toBe(-1);
+});
+test('When number is currency, it always returns the absolute value', function () {
+  var _renderHook2 = renderHook(function () {
+      return useHiddenNumberFieldValue({
+        isCurrency: true,
+        numberValue: -1
+      });
+    }),
+    result = _renderHook2.result;
+  expect(result.current).toBe(1);
+});
+test('When number is not currency, positive values return positive numbers', function () {
+  var _renderHook3 = renderHook(function () {
+      return useHiddenNumberFieldValue({
+        isCurrency: false,
+        numberValue: 2
+      });
+    }),
+    result = _renderHook3.result;
+  expect(result.current).toBe(2);
+});

package/package.json

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