@pingux/astro 2.200.1-alpha.0 → 2.200.3-alpha.0

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

@@ -117,8 +117,9 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
   }, isOnyx && {
     size: 'sm'
   }, {
+    "aria-hidden": "true",
     title: {
-      name: isSelected ? 'Menu Up Icon' : 'Menu Down Icon'
+      name: ''
     }
   })))));
 });

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

@@ -102,13 +102,15 @@ var AccordionItem = function AccordionItem(props) {
     sx: accordionHoveredState
   }, item.props.label), (0, _react2.jsx)(_index.Box, {
     as: "span",
-    ml: accordionItemMarginLeft
+    ml: accordionItemMarginLeft,
+    role: "presentation"
   }, (0, _react2.jsx)(_index.Icon, {
     color: "font.base",
     icon: isOpen ? MenuUp : MenuDown,
     size: "sm",
+    "aria-hidden": "true",
     title: {
-      name: isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
+      name: ''
     }
   }))), ((_item$props$slots = item.props.slots) === null || _item$props$slots === void 0 ? void 0 : _item$props$slots.postHeading) && ((_item$props$slots2 = item.props.slots) === null || _item$props$slots2 === void 0 ? void 0 : _item$props$slots2.postHeading)), isOpen && (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "accordion.body"

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

@@ -136,8 +136,8 @@ test('renders detailed button preview mode correctly', function () {
   expect(_testWrapper.screen.getByText(testLabel)).toBeInTheDocument();
   expect(_testWrapper.screen.getByText(testColor1.toLocaleUpperCase())).toBeInTheDocument();
 });
-test('renders MenuUp / MenuDown icon correctly', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-  var button;
+test('renders MenuUp / MenuDown icon with aria-hidden="true" so screen readers skip it', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+  var button, closedIcon, openIcon;
   return _regeneratorRuntime().wrap(function _callee3$(_context3) {
     while (1) switch (_context3.prev = _context3.next) {
       case 0:
@@ -145,16 +145,20 @@ test('renders MenuUp / MenuDown icon correctly', /*#__PURE__*/(0, _asyncToGenera
           mode: 'detailed-button-preview',
           value: testColor1
         });
-        button = _testWrapper.screen.getByRole('button');
-        _context3.next = 4;
-        return _userEvent["default"].click(button);
-      case 4:
-        expect(_testWrapper.screen.getByTitle('menu-up')).toBeInTheDocument();
+        button = _testWrapper.screen.getByRole('button'); // Before opening: the closed-state icon (MenuDown) is rendered inside a
+        // role="presentation" box and must carry aria-hidden="true".
+        closedIcon = document.querySelector('[role="presentation"] svg[aria-hidden="true"]');
+        expect(closedIcon).toBeInTheDocument();
+        expect(closedIcon).toHaveAttribute('aria-hidden', 'true');
         _context3.next = 7;
         return _userEvent["default"].click(button);
       case 7:
-        expect(_testWrapper.screen.getByTitle('menu-down')).toBeInTheDocument();
-      case 8:
+        // After opening: the open-state icon (MenuUp) replaces MenuDown and must also
+        // carry aria-hidden="true".
+        openIcon = document.querySelector('[role="presentation"] svg[aria-hidden="true"]');
+        expect(openIcon).toBeInTheDocument();
+        expect(openIcon).toHaveAttribute('aria-hidden', 'true');
+      case 10:
       case "end":
         return _context3.stop();
     }

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

@@ -52,15 +52,18 @@ var ColorFieldPreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     sx: {
       ml: 'auto'
     },
-    flexGrow: "1"
+    flexGrow: "1",
+    role: "presentation"
   }, (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     ml: "auto",
     title: {
-      name: isOpen ? 'menu-up' : 'menu-down'
+      name: ''
     },
     icon: isOpen ? MenuUp : MenuDown
   }, isOnyx && {
     size: 'sm'
+  }, {
+    "aria-hidden": "true"
   })))));
 });
 var _default = exports["default"] = ColorFieldPreviewButton;

package/lib/cjs/components/DataTable/DataTable.js

@@ -294,18 +294,24 @@ var TableColumnHeader = function TableColumnHeader(props) {
     columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
   var columnProps = column.props;
   var iconSize = isOnyx ? 16 : 24;
+  // Sort-direction icons are purely presentational; aria-sort on the <th> conveys
+  // sort state to screen readers. Pass aria-hidden="true" to remove the SVG from
+  // the accessibility tree, and title={{ name: '' }} to suppress the browser-native
+  // hover tooltip that the MDI icon package would otherwise generate.
   var arrowIcon = ((_state$sortDescriptor = state.sortDescriptor) === null || _state$sortDescriptor === void 0 ? void 0 : _state$sortDescriptor.direction) === 'ascending' && column.key === ((_state$sortDescriptor2 = state.sortDescriptor) === null || _state$sortDescriptor2 === void 0 ? void 0 : _state$sortDescriptor2.column) ? (0, _react2.jsx)(_index.Icon, {
     size: iconSize,
     icon: Ascending,
+    "aria-hidden": "true",
     title: {
-      name: 'Menu Up Icon'
+      name: ''
     }
   }) : (0, _react2.jsx)(_index.Icon, {
     size: iconSize,
     icon: Descending,
     color: "active",
+    "aria-hidden": "true",
     title: {
-      name: 'Menu Down Icon'
+      name: ''
     }
   });
   var allProps = [columnHeaderProps];

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -260,10 +260,11 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   }), selectedItem, (0, _react2.jsx)(_index.Icon, {
     icon: popoverState.isOpen ? MenuUp : MenuDown,
     title: {
-      name: popoverState.isOpen ? 'Arrow Drop Up Icon' : 'Arrow Drop Down Icon'
+      name: ''
     },
     size: "xs",
-    ml: "xs"
+    ml: "xs",
+    "aria-hidden": "true"
   })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, (0, _reactAria.mergeProps)(overlayProps, positionProps, popoverProps), {
     ref: overlayRef,
     isOpen: popoverState.isOpen,

package/lib/cjs/components/Icon/IconDefault.js

@@ -44,6 +44,21 @@ var IconDefault = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     sizeProps = _useTShirtSize.sizeProps;
   var defaultIconColor = theme.defaultIconColor,
     isOnyx = theme.themeState.isOnyx;
+
+  // `role="img"` below is intentional for non-hidden icons: it exposes the icon
+  // to the accessibility tree with a meaningful name derived from `resolvedTitle`.
+  //
+  // Callers that render a purely presentational icon (e.g. a decorative arrow)
+  // must pass BOTH props together:
+  //   aria-hidden="true"   — removes the element from the accessibility tree so
+  //                          screen readers skip it entirely.
+  //   title={{ name: '' }} — renders an empty SVG <title> element, suppressing
+  //                          the browser-native tooltip that the MDI icon package
+  //                          would otherwise produce from its auto-generated UUID
+  //                          title string.
+  // `aria-hidden` alone is sufficient for screen readers, but without the empty
+  // title prop the SVG <title> can still surface as a tooltip on hover in some
+  // browsers, so both props are needed for a complete presentational treatment.
   var resolvedTitle = title !== null && title !== void 0 ? title : (0, _typeof2["default"])(IconComponent) === 'object' && 'type' in IconComponent ? {
     name: IconComponent.type.name
   } : '';

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -83,7 +83,7 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     variant: "loader.withinInput"
   }), (0, _react2.jsx)(_.Box, {
     as: "span",
-    "aria-hidden": "true",
+    role: "presentation",
     variant: "forms.select.arrow"
   }, (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
     icon: MenuDown,
@@ -91,7 +91,8 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       name: ''
     },
     color: isOnyx ? 'font.link' : 'active',
-    size: linkSelectFieldIcon
+    size: linkSelectFieldIcon,
+    "aria-hidden": "true"
   }, iconProps, {
     sx: _objectSpread({
       transform: state.isOpen ? 'rotate(180deg)' : 'rotate(0deg)',

package/lib/cjs/components/ListView/ListViewExpandableItem.js

@@ -83,8 +83,9 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
     icon: isExpanded ? MenuUp : MenuDown,
     variant: "listViewItem.expandIcon",
     title: {
-      name: "".concat(key, " expand icon button")
-    }
+      name: ''
+    },
+    "aria-hidden": "true"
   }, isOnyx && {
     size: 'sm'
   })))), (0, _react2.jsx)(_index.Box, expandableItemState.gridCellProps, isExpanded && (0, _react2.jsx)(_ListViewFocusWrapper["default"], {

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

@@ -394,14 +394,15 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     sx: {
       border: 'none'
     },
-    title: {
-      name: ''
-    }
+    "aria-label": isOpen ? 'Close menu' : 'Open menu'
   }, (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
     icon: isOpen ? MenuUp : MenuDown
   }, isOnyx && {
     size: 'sm'
   }, {
+    title: {
+      name: ''
+    },
     "aria-hidden": "true"
   }))));
   return (0, _react2.jsx)(_MultivaluesContext.MultivaluesContext.Provider, {
@@ -519,10 +520,10 @@ CondensedMultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread(
    */
   onKeyDown: _propTypes["default"].func,
   /**
-  * Handler that is called when a key is released.
-  *
-  * `(e: KeyboardEvent) => void`
-  */
+   * Handler that is called when a key is released.
+   *
+   * `(e: KeyboardEvent) => void`
+   */
   onKeyUp: _propTypes["default"].func,
   /**
    * Method that is called when the open state of the menu changes.

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

@@ -44,8 +44,8 @@ var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
-var _BadgeLabelTooltip = _interopRequireDefault(require("./BadgeLabelTooltip"));
 var _ListBox = _interopRequireDefault(require("../ListBox"));
+var _BadgeLabelTooltip = _interopRequireDefault(require("./BadgeLabelTooltip"));
 var _react2 = require("@emotion/react");
 var _excluded = ["items"],
   _excluded2 = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isFilteringDisabled", "isNotFlippable", "isReadOnly", "isRequired", "label", "loadingState", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "readOnlyKeys", "selectedKeys", "scrollBoxProps", "status"];
@@ -617,10 +617,10 @@ DefaultMultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
    */
   onKeyDown: _propTypes["default"].func,
   /**
-  * Handler that is called when a key is released.
-  *
-  * `(e: KeyboardEvent) => void`
-  */
+   * Handler that is called when a key is released.
+   *
+   * `(e: KeyboardEvent) => void`
+   */
   onKeyUp: _propTypes["default"].func,
   /**
    * Method that is called when the open state of the menu changes.

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

@@ -2060,4 +2060,28 @@ test('hovering delete button does not show tooltip for long label badge', functi
   testValue: items[0].name,
   testLabel: defaultProps.label,
   componentType: 'MultivaluesField'
+});
+test('in condensed mode, arrow icon SVG has aria-hidden="true" to be hidden from screen readers', function () {
+  getComponent({
+    mode: 'condensed'
+  });
+  // The presentational arrow icon (MenuDown/MenuUp) in the condensed mode trigger
+  // button receives aria-hidden="true" via props, making it invisible to screen
+  // readers. Scope the query to the trigger button (tabIndex=-1) to avoid
+  // accidentally matching any other aria-hidden SVG added in future.
+  var arrowIconSvg = document.querySelector('button[tabindex="-1"] svg[aria-hidden="true"]');
+  expect(arrowIconSvg).toBeInTheDocument();
+  expect(arrowIconSvg).toHaveAttribute('aria-hidden', 'true');
+});
+test('in condensed mode, arrow icon SVG has an empty title element so no tooltip is shown', function () {
+  getComponent({
+    mode: 'condensed'
+  });
+  // title={{ name: '' }} renders an empty SVG <title> element, suppressing
+  // the browser-native tooltip that would otherwise appear on hover.
+  var arrowIconSvg = document.querySelector('button[tabindex="-1"] svg[aria-hidden="true"]');
+  expect(arrowIconSvg).toBeInTheDocument();
+  var titleElement = arrowIconSvg.querySelector('title');
+  expect(titleElement).toBeInTheDocument();
+  expect(titleElement).toHaveTextContent('');
 });

package/lib/cjs/components/NavBarSection/NavBarItemBody.test.js

@@ -14,6 +14,7 @@ var SUBTITLE = 'subtitle';
 var TEXT = 'text';
 var data = [{
   key: 'Dashboard',
+  heading: 'Dashboard',
   children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles', 'Dashboard Unique']
 }];
 var NavBarWithItemBody = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -104,8 +104,9 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
       fill: getIconColor()
     },
     title: {
-      name: isExpanded ? 'Menu up' : 'Menu down'
-    }
+      name: ''
+    },
+    "aria-hidden": "true"
   })));
 };
 var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref3) {

package/lib/cjs/components/NavSideBar/NavSideBarSectionHeader.js

@@ -92,9 +92,9 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
     variant: variant,
     mr: "0",
     title: {
-      name: isExpanded ? 'Menu up' : 'Menu down'
+      name: ''
     },
-    "aria-label": isExpanded ? 'menu up' : 'menu down'
+    "aria-hidden": "true"
   }))));
 };
 var _default = exports["default"] = NavSideBarSectionHeader;

package/lib/cjs/components/NavigationHeader/HeaderAccountMenu.js

@@ -38,8 +38,9 @@ var HeaderAccountMenu = function HeaderAccountMenu(props) {
     icon: MenuDown,
     size: "16px",
     title: {
-      name: 'Menu Up Icon'
+      name: ''
     },
+    "aria-hidden": "true",
     color: "text.primary"
   }))), (0, _react2.jsx)(_.Menu, {
     p: "sm",

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -84,14 +84,15 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   };
   var buttonRendered = !(hasClearButton && state.selectedKey) && (0, _react2.jsx)(_.Box, {
     as: "span",
-    "aria-hidden": "true",
+    role: "presentation",
     variant: "forms.select.arrow"
   }, (0, _react2.jsx)(_.Icon, {
     icon: state.isOpen ? MenuUp : MenuDown,
     title: {
       name: ''
     },
-    size: isOnyx ? 'sm' : 'md'
+    size: isOnyx ? 'sm' : 'md',
+    "aria-hidden": "true"
   }));
   var clearButton = hasClearButton && state.selectedKey && (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
     tabIndex: 0,

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

@@ -640,4 +640,23 @@ test('should have call onClear function', /*#__PURE__*/(0, _asyncToGenerator2["d
         return _context13.stop();
     }
   }, _callee13);
-})));
+})));
+test('arrow icon SVG has aria-hidden="true" to be hidden from screen readers', function () {
+  getComponent();
+  // The presentational arrow icon (MenuDown/MenuUp) is rendered inside a
+  // role="presentation" span. The Icon component renders as an SVG element
+  // and receives aria-hidden="true" via props, making it invisible to screen readers.
+  var arrowIconSvg = document.querySelector('[role="presentation"] svg[aria-hidden="true"]');
+  expect(arrowIconSvg).toBeInTheDocument();
+  expect(arrowIconSvg).toHaveAttribute('aria-hidden', 'true');
+});
+test('arrow icon SVG has an empty title element so no tooltip is shown', function () {
+  getComponent();
+  // title={{ name: '' }} renders an empty SVG <title> element, suppressing
+  // the browser-native tooltip that would otherwise appear on hover.
+  var arrowIconSvg = document.querySelector('[role="presentation"] svg[aria-hidden="true"]');
+  expect(arrowIconSvg).toBeInTheDocument();
+  var titleElement = arrowIconSvg.querySelector('title');
+  expect(titleElement).toBeInTheDocument();
+  expect(titleElement).toHaveTextContent('');
+});

package/lib/cjs/components/TabPicker/TabPicker.js

@@ -180,8 +180,9 @@ var TabPicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     color: isTabFocused || (0, _includes["default"])(classNames).call(classNames, 'is-hovered') ? 'active' : 'neutral.40',
     icon: isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"],
     title: {
-      name: isOpen ? 'Arrow Drop Up Icon' : 'Arrow Drop Down Icon'
-    }
+      name: ''
+    },
+    "aria-hidden": "true"
   }))), (0, _react2.jsx)(_.Menu, {
     onAction: setSelectedItem,
     selectionMode: "single",

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

@@ -222,8 +222,9 @@ var CustomPopover = function CustomPopover() {
     mr: "sm",
     size: "sm",
     title: {
-      name: state.isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
-    }
+      name: ''
+    },
+    "aria-hidden": "true"
   }))), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, {
     isOpen: state.isOpen,
     hasNoArrow: true,

package/lib/cjs/styles/templates/Nav/HeaderBar.js

@@ -36,8 +36,9 @@ var CustomPopoverMenu = function CustomPopoverMenu() {
       transform: 'rotate(180deg)'
     } : null,
     title: {
-      name: 'Menu Down Icon'
-    }
+      name: ''
+    },
+    "aria-hidden": "true"
   })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_index.Item, {
     key: "option1"
   }, "First Option"), (0, _react2.jsx)(_index.Item, {

package/lib/cjs/styles/themes/next-gen/variants/input.js

@@ -81,7 +81,7 @@ var fieldControlWrapper = exports.fieldControlWrapper = {
   '> textarea': {
     borderRadius: _onyxTokens.astroTokens.radius.input,
     border: '1px solid',
-    borderColor: 'border.input !important',
+    borderColor: 'border.input',
     outline: 'none'
   },
   '&.is-disabled': {

package/lib/cjs/utils/testUtils/universalFormSubmitTest.js

@@ -332,27 +332,17 @@ var universalFieldComponentTests = exports.universalFieldComponentTests = functi
             _context.next = 13;
             return _userEvent["default"].hover(helpHintButton);
           case 13:
-            if (!(componentType === 'DatePicker')) {
-              _context.next = 18;
-              break;
-            }
-            _context.next = 16;
+            _context.next = 15;
             return (0, _react2.waitFor)(function () {
-              expect(_react2.screen.queryAllByRole('presentation')[1]).toHaveAttribute('data-popover-placement', 'left');
-            }, {
-              timeout: 100
-            });
-          case 16:
-            _context.next = 20;
-            break;
-          case 18:
-            _context.next = 20;
-            return (0, _react2.waitFor)(function () {
-              expect(_react2.screen.queryByRole('presentation')).toHaveAttribute('data-popover-placement', 'left');
+              var presentationEls = _react2.screen.queryAllByRole('presentation');
+              var popover = (0, _find["default"])(presentationEls).call(presentationEls, function (el) {
+                return el.hasAttribute('data-popover-placement');
+              });
+              expect(popover).toHaveAttribute('data-popover-placement', 'left');
             }, {
               timeout: 100
             });
-          case 20:
+          case 15:
           case "end":
             return _context.stop();
         }

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -105,8 +105,9 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   }, isOnyx && {
     size: 'sm'
   }, {
+    "aria-hidden": "true",
     title: {
-      name: isSelected ? 'Menu Up Icon' : 'Menu Down Icon'
+      name: ''
     }
   })))));
 });

package/lib/components/AccordionItem/AccordionItem.js

@@ -90,13 +90,15 @@ var AccordionItem = function AccordionItem(props) {
     sx: accordionHoveredState
   }, item.props.label), ___EmotionJSX(Box, {
     as: "span",
-    ml: accordionItemMarginLeft
+    ml: accordionItemMarginLeft,
+    role: "presentation"
   }, ___EmotionJSX(Icon, {
     color: "font.base",
     icon: isOpen ? MenuUp : MenuDown,
     size: "sm",
+    "aria-hidden": "true",
     title: {
-      name: isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
+      name: ''
     }
   }))), ((_item$props$slots = item.props.slots) === null || _item$props$slots === void 0 ? void 0 : _item$props$slots.postHeading) && ((_item$props$slots2 = item.props.slots) === null || _item$props$slots2 === void 0 ? void 0 : _item$props$slots2.postHeading)), isOpen && ___EmotionJSX(Box, _extends({
     variant: "accordion.body"

package/lib/components/ColorField/ColorField.test.js

@@ -133,8 +133,8 @@ test('renders detailed button preview mode correctly', function () {
   expect(screen.getByText(testLabel)).toBeInTheDocument();
   expect(screen.getByText(testColor1.toLocaleUpperCase())).toBeInTheDocument();
 });
-test('renders MenuUp / MenuDown icon correctly', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-  var button;
+test('renders MenuUp / MenuDown icon with aria-hidden="true" so screen readers skip it', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+  var button, closedIcon, openIcon;
   return _regeneratorRuntime().wrap(function _callee3$(_context3) {
     while (1) switch (_context3.prev = _context3.next) {
       case 0:
@@ -142,16 +142,20 @@ test('renders MenuUp / MenuDown icon correctly', /*#__PURE__*/_asyncToGenerator(
           mode: 'detailed-button-preview',
           value: testColor1
         });
-        button = screen.getByRole('button');
-        _context3.next = 4;
-        return userEvent.click(button);
-      case 4:
-        expect(screen.getByTitle('menu-up')).toBeInTheDocument();
+        button = screen.getByRole('button'); // Before opening: the closed-state icon (MenuDown) is rendered inside a
+        // role="presentation" box and must carry aria-hidden="true".
+        closedIcon = document.querySelector('[role="presentation"] svg[aria-hidden="true"]');
+        expect(closedIcon).toBeInTheDocument();
+        expect(closedIcon).toHaveAttribute('aria-hidden', 'true');
         _context3.next = 7;
         return userEvent.click(button);
       case 7:
-        expect(screen.getByTitle('menu-down')).toBeInTheDocument();
-      case 8:
+        // After opening: the open-state icon (MenuUp) replaces MenuDown and must also
+        // carry aria-hidden="true".
+        openIcon = document.querySelector('[role="presentation"] svg[aria-hidden="true"]');
+        expect(openIcon).toBeInTheDocument();
+        expect(openIcon).toHaveAttribute('aria-hidden', 'true');
+      case 10:
       case "end":
         return _context3.stop();
     }

package/lib/components/ColorField/ColorFieldPreviewButton.js

@@ -40,15 +40,18 @@ var ColorFieldPreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: {
       ml: 'auto'
     },
-    flexGrow: "1"
+    flexGrow: "1",
+    role: "presentation"
   }, ___EmotionJSX(Icon, _extends({
     ml: "auto",
     title: {
-      name: isOpen ? 'menu-up' : 'menu-down'
+      name: ''
     },
     icon: isOpen ? MenuUp : MenuDown
   }, isOnyx && {
     size: 'sm'
+  }, {
+    "aria-hidden": "true"
   })))));
 });
 export default ColorFieldPreviewButton;

package/lib/components/DataTable/DataTable.js

@@ -284,18 +284,24 @@ var TableColumnHeader = function TableColumnHeader(props) {
     columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
   var columnProps = column.props;
   var iconSize = isOnyx ? 16 : 24;
+  // Sort-direction icons are purely presentational; aria-sort on the <th> conveys
+  // sort state to screen readers. Pass aria-hidden="true" to remove the SVG from
+  // the accessibility tree, and title={{ name: '' }} to suppress the browser-native
+  // hover tooltip that the MDI icon package would otherwise generate.
   var arrowIcon = ((_state$sortDescriptor = state.sortDescriptor) === null || _state$sortDescriptor === void 0 ? void 0 : _state$sortDescriptor.direction) === 'ascending' && column.key === ((_state$sortDescriptor2 = state.sortDescriptor) === null || _state$sortDescriptor2 === void 0 ? void 0 : _state$sortDescriptor2.column) ? ___EmotionJSX(Icon, {
     size: iconSize,
     icon: Ascending,
+    "aria-hidden": "true",
     title: {
-      name: 'Menu Up Icon'
+      name: ''
     }
   }) : ___EmotionJSX(Icon, {
     size: iconSize,
     icon: Descending,
     color: "active",
+    "aria-hidden": "true",
     title: {
-      name: 'Menu Down Icon'
+      name: ''
     }
   });
   var allProps = [columnHeaderProps];

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -248,10 +248,11 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
   }), selectedItem, ___EmotionJSX(Icon, {
     icon: popoverState.isOpen ? MenuUp : MenuDown,
     title: {
-      name: popoverState.isOpen ? 'Arrow Drop Up Icon' : 'Arrow Drop Down Icon'
+      name: ''
     },
     size: "xs",
-    ml: "xs"
+    ml: "xs",
+    "aria-hidden": "true"
   })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, mergeProps(overlayProps, positionProps, popoverProps), {
     ref: overlayRef,
     isOpen: popoverState.isOpen,

package/lib/components/Icon/IconDefault.js

@@ -34,6 +34,21 @@ var IconDefault = /*#__PURE__*/forwardRef(function (props, ref) {
     sizeProps = _useTShirtSize.sizeProps;
   var defaultIconColor = theme.defaultIconColor,
     isOnyx = theme.themeState.isOnyx;
+
+  // `role="img"` below is intentional for non-hidden icons: it exposes the icon
+  // to the accessibility tree with a meaningful name derived from `resolvedTitle`.
+  //
+  // Callers that render a purely presentational icon (e.g. a decorative arrow)
+  // must pass BOTH props together:
+  //   aria-hidden="true"   — removes the element from the accessibility tree so
+  //                          screen readers skip it entirely.
+  //   title={{ name: '' }} — renders an empty SVG <title> element, suppressing
+  //                          the browser-native tooltip that the MDI icon package
+  //                          would otherwise produce from its auto-generated UUID
+  //                          title string.
+  // `aria-hidden` alone is sufficient for screen readers, but without the empty
+  // title prop the SVG <title> can still surface as a tooltip on hover in some
+  // browsers, so both props are needed for a complete presentational treatment.
   var resolvedTitle = title !== null && title !== void 0 ? title : _typeof(IconComponent) === 'object' && 'type' in IconComponent ? {
     name: IconComponent.type.name
   } : '';

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -73,7 +73,7 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "loader.withinInput"
   }), ___EmotionJSX(Box, {
     as: "span",
-    "aria-hidden": "true",
+    role: "presentation",
     variant: "forms.select.arrow"
   }, ___EmotionJSX(Icon, _extends({
     icon: MenuDown,
@@ -81,7 +81,8 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
       name: ''
     },
     color: isOnyx ? 'font.link' : 'active',
-    size: linkSelectFieldIcon
+    size: linkSelectFieldIcon,
+    "aria-hidden": "true"
   }, iconProps, {
     sx: _objectSpread({
       transform: state.isOpen ? 'rotate(180deg)' : 'rotate(0deg)',

package/lib/components/ListView/ListViewExpandableItem.js

@@ -71,8 +71,9 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
     icon: isExpanded ? MenuUp : MenuDown,
     variant: "listViewItem.expandIcon",
     title: {
-      name: "".concat(key, " expand icon button")
-    }
+      name: ''
+    },
+    "aria-hidden": "true"
   }, isOnyx && {
     size: 'sm'
   })))), ___EmotionJSX(Box, expandableItemState.gridCellProps, isExpanded && ___EmotionJSX(ListViewFocusWrapper, {

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -383,14 +383,15 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: {
       border: 'none'
     },
-    title: {
-      name: ''
-    }
+    "aria-label": isOpen ? 'Close menu' : 'Open menu'
   }, ___EmotionJSX(Icon, _extends({
     icon: isOpen ? MenuUp : MenuDown
   }, isOnyx && {
     size: 'sm'
   }, {
+    title: {
+      name: ''
+    },
     "aria-hidden": "true"
   }))));
   return ___EmotionJSX(MultivaluesContext.Provider, {
@@ -508,10 +509,10 @@ CondensedMultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread(
    */
   onKeyDown: PropTypes.func,
   /**
-  * Handler that is called when a key is released.
-  *
-  * `(e: KeyboardEvent) => void`
-  */
+   * Handler that is called when a key is released.
+   *
+   * `(e: KeyboardEvent) => void`
+   */
   onKeyUp: PropTypes.func,
   /**
    * Method that is called when the open state of the menu changes.

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -38,8 +38,8 @@ import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
-import BadgeLabelTooltip from './BadgeLabelTooltip';
 import ListBox from '../ListBox';
+import BadgeLabelTooltip from './BadgeLabelTooltip';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context0, _listBoxRef$current2;
@@ -606,10 +606,10 @@ DefaultMultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
    */
   onKeyDown: PropTypes.func,
   /**
-  * Handler that is called when a key is released.
-  *
-  * `(e: KeyboardEvent) => void`
-  */
+   * Handler that is called when a key is released.
+   *
+   * `(e: KeyboardEvent) => void`
+   */
   onKeyUp: PropTypes.func,
   /**
    * Method that is called when the open state of the menu changes.

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -2054,4 +2054,28 @@ universalFieldComponentTests({
   testValue: items[0].name,
   testLabel: defaultProps.label,
   componentType: 'MultivaluesField'
+});
+test('in condensed mode, arrow icon SVG has aria-hidden="true" to be hidden from screen readers', function () {
+  getComponent({
+    mode: 'condensed'
+  });
+  // The presentational arrow icon (MenuDown/MenuUp) in the condensed mode trigger
+  // button receives aria-hidden="true" via props, making it invisible to screen
+  // readers. Scope the query to the trigger button (tabIndex=-1) to avoid
+  // accidentally matching any other aria-hidden SVG added in future.
+  var arrowIconSvg = document.querySelector('button[tabindex="-1"] svg[aria-hidden="true"]');
+  expect(arrowIconSvg).toBeInTheDocument();
+  expect(arrowIconSvg).toHaveAttribute('aria-hidden', 'true');
+});
+test('in condensed mode, arrow icon SVG has an empty title element so no tooltip is shown', function () {
+  getComponent({
+    mode: 'condensed'
+  });
+  // title={{ name: '' }} renders an empty SVG <title> element, suppressing
+  // the browser-native tooltip that would otherwise appear on hover.
+  var arrowIconSvg = document.querySelector('button[tabindex="-1"] svg[aria-hidden="true"]');
+  expect(arrowIconSvg).toBeInTheDocument();
+  var titleElement = arrowIconSvg.querySelector('title');
+  expect(titleElement).toBeInTheDocument();
+  expect(titleElement).toHaveTextContent('');
 });

package/lib/components/NavBarSection/NavBarItemBody.test.js

@@ -11,6 +11,7 @@ var SUBTITLE = 'subtitle';
 var TEXT = 'text';
 var data = [{
   key: 'Dashboard',
+  heading: 'Dashboard',
   children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles', 'Dashboard Unique']
 }];
 var NavBarWithItemBody = /*#__PURE__*/React.forwardRef(function (props, ref) {

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -92,8 +92,9 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
       fill: getIconColor()
     },
     title: {
-      name: isExpanded ? 'Menu up' : 'Menu down'
-    }
+      name: ''
+    },
+    "aria-hidden": "true"
   })));
 };
 var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref3) {

package/lib/components/NavSideBar/NavSideBarSectionHeader.js

@@ -80,9 +80,9 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
     variant: variant,
     mr: "0",
     title: {
-      name: isExpanded ? 'Menu up' : 'Menu down'
+      name: ''
     },
-    "aria-label": isExpanded ? 'menu up' : 'menu down'
+    "aria-hidden": "true"
   }))));
 };
 export default NavSideBarSectionHeader;

package/lib/components/NavigationHeader/HeaderAccountMenu.js

@@ -30,8 +30,9 @@ var HeaderAccountMenu = function HeaderAccountMenu(props) {
     icon: MenuDown,
     size: "16px",
     title: {
-      name: 'Menu Up Icon'
+      name: ''
     },
+    "aria-hidden": "true",
     color: "text.primary"
   }))), ___EmotionJSX(Menu, {
     p: "sm",

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -75,14 +75,15 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   var buttonRendered = !(hasClearButton && state.selectedKey) && ___EmotionJSX(Box, {
     as: "span",
-    "aria-hidden": "true",
+    role: "presentation",
     variant: "forms.select.arrow"
   }, ___EmotionJSX(Icon, {
     icon: state.isOpen ? MenuUp : MenuDown,
     title: {
       name: ''
     },
-    size: isOnyx ? 'sm' : 'md'
+    size: isOnyx ? 'sm' : 'md',
+    "aria-hidden": "true"
   }));
   var clearButton = hasClearButton && state.selectedKey && ___EmotionJSX(IconButton, _extends({
     tabIndex: 0,

package/lib/components/SelectFieldBase/SelectFieldBase.test.js

@@ -634,4 +634,23 @@ test('should have call onClear function', /*#__PURE__*/_asyncToGenerator(/*#__PU
         return _context13.stop();
     }
   }, _callee13);
-})));
+})));
+test('arrow icon SVG has aria-hidden="true" to be hidden from screen readers', function () {
+  getComponent();
+  // The presentational arrow icon (MenuDown/MenuUp) is rendered inside a
+  // role="presentation" span. The Icon component renders as an SVG element
+  // and receives aria-hidden="true" via props, making it invisible to screen readers.
+  var arrowIconSvg = document.querySelector('[role="presentation"] svg[aria-hidden="true"]');
+  expect(arrowIconSvg).toBeInTheDocument();
+  expect(arrowIconSvg).toHaveAttribute('aria-hidden', 'true');
+});
+test('arrow icon SVG has an empty title element so no tooltip is shown', function () {
+  getComponent();
+  // title={{ name: '' }} renders an empty SVG <title> element, suppressing
+  // the browser-native tooltip that would otherwise appear on hover.
+  var arrowIconSvg = document.querySelector('[role="presentation"] svg[aria-hidden="true"]');
+  expect(arrowIconSvg).toBeInTheDocument();
+  var titleElement = arrowIconSvg.querySelector('title');
+  expect(titleElement).toBeInTheDocument();
+  expect(titleElement).toHaveTextContent('');
+});

package/lib/components/TabPicker/TabPicker.js

@@ -169,8 +169,9 @@ var TabPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     color: isTabFocused || _includesInstanceProperty(classNames).call(classNames, 'is-hovered') ? 'active' : 'neutral.40',
     icon: isOpen ? ArrowDropUpIcon : ArrowDropDownIcon,
     title: {
-      name: isOpen ? 'Arrow Drop Up Icon' : 'Arrow Drop Down Icon'
-    }
+      name: ''
+    },
+    "aria-hidden": "true"
   }))), ___EmotionJSX(Menu, {
     onAction: setSelectedItem,
     selectionMode: "single",

package/lib/recipes/MultipagePopup.stories.js

@@ -212,8 +212,9 @@ var CustomPopover = function CustomPopover() {
     mr: "sm",
     size: "sm",
     title: {
-      name: state.isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
-    }
+      name: ''
+    },
+    "aria-hidden": "true"
   }))), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, {
     isOpen: state.isOpen,
     hasNoArrow: true,

package/lib/styles/templates/Nav/HeaderBar.js

@@ -24,8 +24,9 @@ var CustomPopoverMenu = function CustomPopoverMenu() {
       transform: 'rotate(180deg)'
     } : null,
     title: {
-      name: 'Menu Down Icon'
-    }
+      name: ''
+    },
+    "aria-hidden": "true"
   })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
     key: "option1"
   }, "First Option"), ___EmotionJSX(Item, {

package/lib/styles/themes/next-gen/variants/input.js

@@ -74,7 +74,7 @@ export var fieldControlWrapper = {
   '> textarea': {
     borderRadius: astroTokens.radius.input,
     border: '1px solid',
-    borderColor: 'border.input !important',
+    borderColor: 'border.input',
     outline: 'none'
   },
   '&.is-disabled': {

package/lib/utils/testUtils/universalFormSubmitTest.js

@@ -322,27 +322,17 @@ export var universalFieldComponentTests = function universalFieldComponentTests(
             _context.next = 13;
             return userEvent.hover(helpHintButton);
           case 13:
-            if (!(componentType === 'DatePicker')) {
-              _context.next = 18;
-              break;
-            }
-            _context.next = 16;
+            _context.next = 15;
             return waitFor(function () {
-              expect(screen.queryAllByRole('presentation')[1]).toHaveAttribute('data-popover-placement', 'left');
-            }, {
-              timeout: 100
-            });
-          case 16:
-            _context.next = 20;
-            break;
-          case 18:
-            _context.next = 20;
-            return waitFor(function () {
-              expect(screen.queryByRole('presentation')).toHaveAttribute('data-popover-placement', 'left');
+              var presentationEls = screen.queryAllByRole('presentation');
+              var popover = _findInstanceProperty(presentationEls).call(presentationEls, function (el) {
+                return el.hasAttribute('data-popover-placement');
+              });
+              expect(popover).toHaveAttribute('data-popover-placement', 'left');
             }, {
               timeout: 100
             });
-          case 20:
+          case 15:
           case "end":
             return _context.stop();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.200.1-alpha.0",
+  "version": "2.200.3-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",