@elastic/eui 107.0.0 → 107.0.1

package/optimize/lib/components/icon/icon.js

@@ -30,7 +30,7 @@ var _services = require("../../services");
 var _named_colors = require("./named_colors");
 var _icon = require("./icon.styles");
 var _react3 = require("@emotion/react");
-var _excluded = ["type", "size", "color", "className", "tabIndex", "title", "onIconLoad", "style", "stylesMemoizer"];
+var _excluded = ["type", "size", "color", "className", "tabIndex", "title", "role", "onIconLoad", "style", "stylesMemoizer", "aria-hidden", "titleId"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -194,9 +194,12 @@ var EuiIconClass = exports.EuiIconClass = /*#__PURE__*/function (_PureComponent)
         className = _this$props.className,
         tabIndex = _this$props.tabIndex,
         title = _this$props.title,
+        role = _this$props.role,
         onIconLoad = _this$props.onIconLoad,
         style = _this$props.style,
         stylesMemoizer = _this$props.stylesMemoizer,
+        ariaHidden = _this$props['aria-hidden'],
+        titleId = _this$props.titleId,
         rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       var _this$state = this.state,
         isLoading = _this$state.isLoading,
@@ -221,41 +224,55 @@ var EuiIconClass = exports.EuiIconClass = /*#__PURE__*/function (_PureComponent)
       var styles = stylesMemoizer(_icon.euiIconStyles);
       var cssStyles = [styles.euiIcon, styles[size], color && (0, _named_colors.isNamedColor)(color) && styles[color], isCustomColor && styles.customColor, isElasticLogoOutline && styles.logoElasticOutline, isAppIcon && !appIconHasColor && styles.app, isLoading && styles.isLoading, !isLoading && neededLoading && styles.isLoaded];
       var icon = this.state.icon || _empty.icon;
+      var isAriaHidden = [true, 'true'].includes(ariaHidden !== null && ariaHidden !== void 0 ? ariaHidden : false);
+      var isPresentationOnly = !(title || this.props['aria-label'] || this.props['aria-labelledby']) || ['none', 'presentation'].includes(role !== null && role !== void 0 ? role : '') || isAriaHidden;
+      var accessibleTitle = isPresentationOnly ? undefined : title;
+
+      // implicitly set the ARIA role for the icon only if:
+      // - The user did NOT provide a `role` prop
+      // - `aria-hidden` is NOT true
+      // This ensures user-supplied `role` and `aria-hidden` always take precedence.
+      // If set, role is:
+      // - 'presentation' for decorative icons
+      // - 'img' for meaningful icons
+      var accessibleRole = function () {
+        if (isAriaHidden) return undefined;
+        if (isPresentationOnly) return 'presentation';
+        return 'img';
+      }();
       if (typeof icon === 'string') {
         return (0, _react3.jsx)("img", (0, _extends2.default)({
-          alt: title ? title : '',
+          alt: accessibleTitle,
           src: icon,
           className: classes,
           css: cssStyles,
           style: style,
-          tabIndex: tabIndex
+          tabIndex: tabIndex,
+          role: role !== null && role !== void 0 ? role : accessibleRole,
+          "aria-hidden": ariaHidden
         }, rest));
       } else {
         var Svg = icon;
 
-        // If there is no aria-label, aria-labelledby, or title it gets aria-hidden true
-        var isAriaHidden = !(this.props['aria-label'] || this.props['aria-labelledby'] || this.props.title);
-
         // If no aria-label or aria-labelledby is provided but there's a title, a titleId is generated
         //  The svg aria-labelledby attribute gets this titleId
         //  The svg title element gets this titleId as an id
-        var titleId = !this.props['aria-label'] && !this.props['aria-labelledby'] && title ? {
-          titleId: generateId()
+        var accessibleTitleId = !this.props['aria-label'] && !this.props['aria-labelledby'] && title ? {
+          titleId: titleId || generateId()
         } : undefined;
         return (0, _react3.jsx)(Svg, (0, _extends2.default)({
           className: classes,
           style: optionalCustomStyles,
           css: cssStyles,
           tabIndex: tabIndex,
-          role: "img",
-          title: title
-        }, titleId, {
+          title: accessibleTitle,
+          role: role !== null && role !== void 0 ? role : accessibleRole,
+          "aria-hidden": ariaHidden
+        }, accessibleTitleId, {
           "data-icon-type": iconTitle,
           "data-is-loaded": isLoaded || undefined,
           "data-is-loading": isLoading || undefined
-        }, rest, {
-          "aria-hidden": isAriaHidden || rest['aria-hidden']
-        }));
+        }, rest));
       }
     }
   }]);

package/optimize/lib/components/icon/icon_map.js

@@ -507,7 +507,7 @@ var typeToPathMap = exports.typeToPathMap = {
   vulnerabilityManagementApp: 'app_vulnerability_management',
   warning: 'warning',
   warningFilled: 'warning',
-  // NOTE: To be deprecated in favor of `export`
+  // NOTE: To be deprecated in favor of `warning`
   watchesApp: 'app_watches',
   web: 'web',
   wordWrap: 'wordWrap',

package/optimize/lib/components/table/table_row.styles.js

@@ -53,7 +53,7 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
        * Right column styles + border
        * Used for cell actions and row expander arrow
        */
-      hasRightColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', mobileSizes.actions.width), " &::after{content:'';position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('right', mobileSizes.actions.width), " ", (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), ";};label:hasRightColumn;"),
+      hasRightColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', mobileSizes.actions.width), " &::before{content:'';position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('right', mobileSizes.actions.width), " ", (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), ";};label:hasRightColumn;"),
       /**
        * Bottom of card - expanded rows
        */
@@ -61,8 +61,8 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
       // On mobile, visually move the expanded row to join up with the
       // preceding table row via negative margins
       'margin-top', (0, _global_styling.mathWithUnits)([cellContentPadding, euiTheme.border.width.thin], function (x, y) {
-        return (x + y) * -1;
-      })), (0, _global_styling.logicalCSS)('padding-left', cellContentPadding), " ", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('border-top-left-radius', 0), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', 0), ">.euiTableRowCell{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
+        return (x + y * 2) * -1;
+      })), (0, _global_styling.logicalCSS)('padding-left', cellContentPadding), " ", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('border-top-left-radius', 0), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', 0), " &:after{", (0, _global_styling.logicalCSS)('border-top', 'none'), ";}clip-path:polygon(-50% 0, 150% 0, 150% 100vh, -50% 100vh);>.euiTableRowCell{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
     }
   };
 };