@pingux/astro 1.1.0-alpha.4 → 1.1.0-alpha.5

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0-alpha.5](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.4...@pingux/astro@1.1.0-alpha.5) (2022-01-21)
+
+
+### Bug Fixes
+
+* [UIP-5030] Components shouldn't have a default aria-label ([8927951](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8927951339ef49faa03f5654d9e8f357b136430a))
+
+
+
+
+
 # [1.1.0-alpha.4](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.3...@pingux/astro@1.1.0-alpha.4) (2022-01-21)
 
 

package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js

@@ -77,7 +77,7 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   }, mergedProps, {
     isSelected: isSelected,
     className: classNames,
-    "aria-label": ariaLabel || 'Grid Cell'
+    "aria-label": ariaLabel
   }), children);
 });
 AccordionGridItemBody.propTypes = {

package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -106,7 +106,7 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     isSelected: isSelected,
     className: classNames
   }, others, {
-    "aria-label": ariaLabel || 'Grid Cell'
+    "aria-label": ariaLabel
   }), (0, _react2.jsx)(_Box["default"], {
     isRow: true
   }, children, (0, _react2.jsx)(_Box["default"], {

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

@@ -32,15 +32,18 @@ var getComponent = function getComponent() {
   return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
     key: "first",
     textValue: "Duplicate",
-    "data-id": "first"
+    "data-id": "first",
+    label: "Accordion item"
   }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
     key: "second",
     textValue: "Duplicate",
-    "data-id": "second"
+    "data-id": "second",
+    label: "Accordion item"
   }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
     key: "third",
     textValue: "Duplicate",
-    "data-id": "third"
+    "data-id": "third",
+    label: "Accordion item"
   }, (0, _react2.jsx)(_Text["default"], null, "Render me!"))));
 }; // Need to be added to each test file to test accessibility using axe.
 

package/lib/cjs/components/AccordionItem/AccordionItem.js

@@ -100,12 +100,11 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       buttonClasses = _useStatusClasses2.classNames;
 
   var ariaLabel = props['aria-label'] || item.props.label;
-  (0, _hooks.useAriaLabelWarning)('AccordionItem', ariaLabel);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "accordion.accordion",
     className: itemClasses
   }, others, containerProps), (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
-    "aria-label": ariaLabel || 'Accordion',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     sx: {
       display: 'flex',

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

@@ -103,9 +103,8 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       classNames = _useStatusClasses.classNames;
 
   var ariaLabel = props['aria-label'];
-  (0, _hooks.useAriaLabelWarning)('Button', ariaLabel);
   return (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
-    "aria-label": ariaLabel || 'Button',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     className: classNames,
     role: "button",

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

@@ -93,7 +93,8 @@ exports.TextIconButton = TextIconButton;
 var TextButton = function TextButton() {
   return (0, _react2.jsx)(_["default"], {
     mb: "sm",
-    variant: "text"
+    variant: "text",
+    "aria-label": "Add option"
   }, (0, _react2.jsx)(_Text["default"], {
     variant: "label",
     color: "active"

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

@@ -18,7 +18,8 @@ var _react2 = require("@emotion/react");
 
 var testId = 'test-button';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'aria-label': 'Test button'
 };
 
 var getComponent = function getComponent() {

package/lib/cjs/components/ColorField/ColorField.js

@@ -149,6 +149,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = (0, _concat["default"])(_context4 = "rgba(".concat(colorValue === null || colorValue === void 0 ? void 0 : colorValue.red, ", ")).call(_context4, colorValue === null || colorValue === void 0 ? void 0 : colorValue.green, ", ")).call(_context3, colorValue === null || colorValue === void 0 ? void 0 : colorValue.blue, ", ")).call(_context2, colorValue === null || colorValue === void 0 ? void 0 : colorValue.alpha, ")");
   }, []);
   return (0, _react2.jsx)(_index.Box, fieldContainerProps, label && (0, _react2.jsx)(_index.Label, fieldLabelProps), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    "aria-label": "Select color",
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
     ref: triggerRef,

package/lib/cjs/components/IconButton/IconButton.js

@@ -115,7 +115,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabIndex: 0,
     ref: buttonRef,
     className: classNames,
-    "aria-label": ariaLabel || 'Icon Button',
+    "aria-label": ariaLabel,
     sx: chipBg && isHovered && {
       'path': {
         fill: chipBg

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

@@ -29,7 +29,8 @@ var Icon = function Icon(props) {
 var testId = 'test-button';
 var defaultProps = {
   'data-testid': testId,
-  icon: Icon
+  icon: Icon,
+  'aria-label': 'Create'
 };
 
 var getComponent = function getComponent() {
@@ -162,10 +163,8 @@ test('tooltip is not shown on hover or focus when prop is not passed', function
   expect(_testWrapper.screen.queryByRole('tooltip')).not.toBeInTheDocument();
 });
 test('the button should be getting aria label attribute', function () {
-  var testLabel = 'test label';
-  getComponent({
-    'aria-label': testLabel
-  });
+  var testLabel = defaultProps['aria-label'];
+  getComponent();
   expect(_testWrapper.screen.getByLabelText(testLabel)).toBeInTheDocument();
 });
 test('show button isDisabled status', function () {

package/lib/cjs/components/ImageUploadField/ImagePreviewButton.js

@@ -113,7 +113,8 @@ var ImagePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     ref: buttonRef,
     variant: "imageUpload",
     sx: widthHeightSx,
-    "data-testid": "image-preview-button"
+    "data-testid": "image-preview-button",
+    "aria-label": "Image preview"
   }, (0, _utils.mergeProps)(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
 });
 ImagePreviewButton.propTypes = {

package/lib/cjs/components/ListBox/ListBox.js

@@ -55,8 +55,6 @@ var _ListBoxContext = require("./ListBoxContext");
 
 var _index = require("./index.js");
 
-var _hooks = require("../../hooks");
-
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 
 var _Loader = _interopRequireDefault(require("../Loader"));
@@ -120,12 +118,11 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       selectedKeys = props.selectedKeys,
       selectionMode = props.selectionMode,
       state = props.state,
+      ariaLabel = props['aria-label'],
       ariaLabelledby = props['aria-labelledby'],
       ariaDescribedby = props['aria-describedby'],
       ariaDetails = props['aria-details'],
-      others = (0, _objectWithoutProperties2["default"])(props, ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-labelledby", "aria-describedby", "aria-details"]);
-  var ariaLabel = props['aria-label'];
-  (0, _hooks.useAriaLabelWarning)('ListBox', ariaLabel);
+      others = (0, _objectWithoutProperties2["default"])(props, ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"]);
   var focusStrategy = state.focusStrategy; // Object matching React Aria API with all options
 
   var listBoxOptions = {
@@ -149,7 +146,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     shouldFocusWrap: hasFocusWrap,
     shouldSelectOnPressUp: isSelectedOnPressUp,
     shouldUseVirtualFocus: hasVirtualFocus,
-    'aria-label': ariaLabel || 'ListBox',
+    'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     'aria-describedby': ariaDescribedby,
     'aria-details': ariaDetails

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

@@ -44,11 +44,13 @@ var itemsWithSections = [{
 }];
 var defaultProps = {
   'data-testid': testId,
+  'aria-label': 'listbox',
   'aria-labelledby': 'label',
   items: items
 };
 var defaultWithSectionsProps = {
   'data-testid': testId,
+  'aria-label': 'listbox',
   'aria-labelledby': 'label',
   items: itemsWithSections
 };

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -352,7 +352,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     hasAutoFocus: hasAutoFocus,
     hasVirtualFocus: true,
     hasNoEmptySelection: true,
-    state: state
+    state: state,
+    "aria-label": "List of options"
   })), (0, _react2.jsx)(_overlays.DismissButton, {
     onDismiss: close
   }));

package/lib/components/AccordionGridItem/AccordionGridItemBody.js

@@ -52,7 +52,7 @@ var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
   }, mergedProps, {
     isSelected: isSelected,
     className: classNames,
-    "aria-label": ariaLabel || 'Grid Cell'
+    "aria-label": ariaLabel
   }), children);
 });
 AccordionGridItemBody.propTypes = {

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -76,7 +76,7 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     isSelected: isSelected,
     className: classNames
   }, others, {
-    "aria-label": ariaLabel || 'Grid Cell'
+    "aria-label": ariaLabel
   }), ___EmotionJSX(Box, {
     isRow: true
   }, children, ___EmotionJSX(Box, {

package/lib/components/AccordionGroup/AccordionGroup.test.js

@@ -18,15 +18,18 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(AccordionGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
     key: "first",
     textValue: "Duplicate",
-    "data-id": "first"
+    "data-id": "first",
+    label: "Accordion item"
   }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
     key: "second",
     textValue: "Duplicate",
-    "data-id": "second"
+    "data-id": "second",
+    label: "Accordion item"
   }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
     key: "third",
     textValue: "Duplicate",
-    "data-id": "third"
+    "data-id": "third",
+    label: "Accordion item"
   }, ___EmotionJSX(Text, null, "Render me!"))));
 }; // Need to be added to each test file to test accessibility using axe.
 

package/lib/components/AccordionItem/AccordionItem.js

@@ -11,7 +11,7 @@ import { useAccordionItem } from '@react-aria/accordion';
 import { useButton } from '@react-aria/button';
 import { useFocusRing } from '@react-aria/focus';
 import { Text, Icon, Box } from '../../index';
-import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
+import { useStatusClasses } from '../../hooks';
 import { AccordionContext } from '../../context/AccordionContext';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -72,12 +72,11 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
       buttonClasses = _useStatusClasses2.classNames;
 
   var ariaLabel = props['aria-label'] || item.props.label;
-  useAriaLabelWarning('AccordionItem', ariaLabel);
   return ___EmotionJSX(Box, _extends({
     variant: "accordion.accordion",
     className: itemClasses
   }, others, containerProps), ___EmotionJSX(ThemeUIButton, _extends({
-    "aria-label": ariaLabel || 'Accordion',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     sx: {
       display: 'flex',

package/lib/components/Button/Button.js

@@ -21,7 +21,7 @@ import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
-import { useAriaLabelWarning, useStatusClasses, usePropWarning } from '../../hooks';
+import { useStatusClasses, usePropWarning } from '../../hooks';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -70,9 +70,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       classNames = _useStatusClasses.classNames;
 
   var ariaLabel = props['aria-label'];
-  useAriaLabelWarning('Button', ariaLabel);
   return ___EmotionJSX(ThemeUIButton, _extends({
-    "aria-label": ariaLabel || 'Button',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     className: classNames,
     role: "button",

package/lib/components/Button/Button.stories.js

@@ -62,7 +62,8 @@ export var TextIconButton = function TextIconButton() {
 export var TextButton = function TextButton() {
   return ___EmotionJSX(Button, {
     mb: "sm",
-    variant: "text"
+    variant: "text",
+    "aria-label": "Add option"
   }, ___EmotionJSX(Text, {
     variant: "label",
     color: "active"

package/lib/components/Button/Button.test.js

@@ -7,7 +7,8 @@ import Button from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-button';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'aria-label': 'Test button'
 };
 
 var getComponent = function getComponent() {

package/lib/components/ColorField/ColorField.js

@@ -108,6 +108,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     return _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "rgba(".concat(colorValue === null || colorValue === void 0 ? void 0 : colorValue.red, ", ")).call(_context4, colorValue === null || colorValue === void 0 ? void 0 : colorValue.green, ", ")).call(_context3, colorValue === null || colorValue === void 0 ? void 0 : colorValue.blue, ", ")).call(_context2, colorValue === null || colorValue === void 0 ? void 0 : colorValue.alpha, ")");
   }, []);
   return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Button, _extends({
+    "aria-label": "Select color",
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
     ref: triggerRef,

package/lib/components/IconButton/IconButton.js

@@ -83,7 +83,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     tabIndex: 0,
     ref: buttonRef,
     className: classNames,
-    "aria-label": ariaLabel || 'Icon Button',
+    "aria-label": ariaLabel,
     sx: chipBg && isHovered && {
       'path': {
         fill: chipBg

package/lib/components/IconButton/IconButton.test.js

@@ -17,7 +17,8 @@ var Icon = function Icon(props) {
 var testId = 'test-button';
 var defaultProps = {
   'data-testid': testId,
-  icon: Icon
+  icon: Icon,
+  'aria-label': 'Create'
 };
 
 var getComponent = function getComponent() {
@@ -115,10 +116,8 @@ test('tooltip is not shown on hover or focus when prop is not passed', function
   expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
 });
 test('the button should be getting aria label attribute', function () {
-  var testLabel = 'test label';
-  getComponent({
-    'aria-label': testLabel
-  });
+  var testLabel = defaultProps['aria-label'];
+  getComponent();
   expect(screen.getByLabelText(testLabel)).toBeInTheDocument();
 });
 test('show button isDisabled status', function () {

package/lib/components/ImageUploadField/ImagePreviewButton.js

@@ -92,7 +92,8 @@ var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: buttonRef,
     variant: "imageUpload",
     sx: widthHeightSx,
-    "data-testid": "image-preview-button"
+    "data-testid": "image-preview-button",
+    "aria-label": "Image preview"
   }, mergeProps(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
 });
 ImagePreviewButton.propTypes = {

package/lib/components/ListBox/ListBox.js

@@ -24,7 +24,6 @@ import { useCollator } from '@react-aria/i18n';
 import { ListLayout } from '@react-stately/layout';
 import { ListBoxContext } from './ListBoxContext';
 import { Option } from './index.js';
-import { useAriaLabelWarning } from '../../hooks';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Loader from '../Loader';
 import ListBoxSection from './ListBoxSection';
@@ -77,13 +76,12 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
       selectedKeys = props.selectedKeys,
       selectionMode = props.selectionMode,
       state = props.state,
+      ariaLabel = props['aria-label'],
       ariaLabelledby = props['aria-labelledby'],
       ariaDescribedby = props['aria-describedby'],
       ariaDetails = props['aria-details'],
-      others = _objectWithoutProperties(props, ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-labelledby", "aria-describedby", "aria-details"]);
+      others = _objectWithoutProperties(props, ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"]);
 
-  var ariaLabel = props['aria-label'];
-  useAriaLabelWarning('ListBox', ariaLabel);
   var focusStrategy = state.focusStrategy; // Object matching React Aria API with all options
 
   var listBoxOptions = {
@@ -107,7 +105,7 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
     shouldFocusWrap: hasFocusWrap,
     shouldSelectOnPressUp: isSelectedOnPressUp,
     shouldUseVirtualFocus: hasVirtualFocus,
-    'aria-label': ariaLabel || 'ListBox',
+    'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     'aria-describedby': ariaDescribedby,
     'aria-details': ariaDetails

package/lib/components/ListBox/ListBox.test.js

@@ -29,11 +29,13 @@ var itemsWithSections = [{
 }];
 var defaultProps = {
   'data-testid': testId,
+  'aria-label': 'listbox',
   'aria-labelledby': 'label',
   items: items
 };
 var defaultWithSectionsProps = {
   'data-testid': testId,
+  'aria-label': 'listbox',
   'aria-labelledby': 'label',
   items: itemsWithSections
 };

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -311,7 +311,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     hasAutoFocus: hasAutoFocus,
     hasVirtualFocus: true,
     hasNoEmptySelection: true,
-    state: state
+    state: state,
+    "aria-label": "List of options"
   })), ___EmotionJSX(DismissButton, {
     onDismiss: close
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.1.0-alpha.4",
+  "version": "1.1.0-alpha.5",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",