@elastic/eui 107.0.0 → 107.0.1

package/es/components/badge/beta_badge/beta_badge.js

@@ -106,6 +106,7 @@ export var EuiBetaBadge = function EuiBetaBadge(_ref) {
         anchorProps: anchorProps
       }, ___EmotionJSX("span", _extends({
         tabIndex: 0,
+        role: "button",
         css: cssStyles,
         className: classes
       }, rest), icon || label));

package/es/components/basic_table/basic_table.styles.js

@@ -10,11 +10,13 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css, keyframes } from '@emotion/react';
-import { logicalCSS, euiCantAnimate } from '../../global_styling';
+import { logicalCSS, euiCantAnimate, highContrastModeStyles, preventForcedColors } from '../../global_styling';
 var tableLoadingLine = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    ", "\n    ", "\n  }\n\n  20% {\n    ", "\n    ", "\n  }\n\n  80% {\n    ", "\n    ", "\n  }\n\n  100% {\n    ", "\n    ", "\n  }\n"])), logicalCSS('left', 0), logicalCSS('width', 0), logicalCSS('left', 0), logicalCSS('width', '40%'), logicalCSS('left', '60%'), logicalCSS('width', '40%'), logicalCSS('left', '100%'), logicalCSS('width', 0));
-export var euiBasicTableBodyLoading = function euiBasicTableBodyLoading(_ref) {
-  var euiTheme = _ref.euiTheme;
-  return /*#__PURE__*/css("position:relative;overflow:hidden;&::before{position:absolute;content:'';", logicalCSS('width', '100%'), " ", logicalCSS('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", euiCantAnimate, "{animation-duration:2s;}};label:euiBasicTableBodyLoading;");
+export var euiBasicTableBodyLoading = function euiBasicTableBodyLoading(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return /*#__PURE__*/css("position:relative;overflow:hidden;&::before{position:absolute;content:'';", logicalCSS('width', '100%'), " ", logicalCSS('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", euiCantAnimate, "{animation:none;background:repeating-linear-gradient(\n          -45deg,\n          ", euiTheme.colors.backgroundBasePlain, ",\n          ", euiTheme.colors.backgroundBasePlain, " ", euiTheme.size.xs, ",\n          ", euiTheme.colors.primary, " ", euiTheme.size.xs, ",\n          ", euiTheme.colors.primary, " ", euiTheme.size.s, "\n        );", highContrastModeStyles(euiThemeContext, {
+    forced: "\n              ".concat(preventForcedColors(euiThemeContext), "\n            ")
+  }), ";}};label:euiBasicTableBodyLoading;");
 };
 
 // Fix to make the loading indicator position correctly in Safari

package/es/components/code/code_syntax.styles.js

@@ -50,7 +50,7 @@ export var euiCodeSyntaxVariables = function euiCodeSyntaxVariables(euiThemeCont
     selectorClassColor: euiTheme.components.codeSelectorClassColor,
     selectorIdColor: euiTheme.components.codeSelectorIdColor,
     get tokensCss() {
-      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: ".concat(highContrastMode ? '1' : '.7', ";\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ").concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
+      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: ".concat(highContrastMode ? '1' : '.7', ";\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ").concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.key.atrule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
     }
   };
 };

package/es/components/icon/icon.js

@@ -1,4 +1,4 @@
-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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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; }
@@ -183,9 +183,12 @@ export var 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 = _objectWithoutProperties(_this$props, _excluded);
       var _this$state = this.state,
         isLoading = _this$state.isLoading,
@@ -210,41 +213,55 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
       var styles = stylesMemoizer(euiIconStyles);
       var cssStyles = [styles.euiIcon, styles[size], color && 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;
+      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 ___EmotionJSX("img", _extends({
-          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 ___EmotionJSX(Svg, _extends({
           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/es/components/icon/icon_map.js

@@ -501,7 +501,7 @@ export var 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/es/components/table/table_row.styles.js

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

package/eui.d.ts

@@ -25418,7 +25418,7 @@ declare module '@elastic/eui/src/components/basic_table/expanded_item_actions' {
 }
 declare module '@elastic/eui/src/components/basic_table/basic_table.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiBasicTableBodyLoading: ({ euiTheme }: UseEuiTheme) => import("@emotion/react").SerializedStyles;
+	export const euiBasicTableBodyLoading: (euiThemeContext: UseEuiTheme) => import("@emotion/react").SerializedStyles;
 	export const safariLoadingWorkaround: import("@emotion/react").SerializedStyles;
 
 }

package/lib/components/badge/beta_badge/beta_badge.js

@@ -112,6 +112,7 @@ var EuiBetaBadge = exports.EuiBetaBadge = function EuiBetaBadge(_ref) {
         anchorProps: anchorProps
       }, (0, _react2.jsx)("span", _extends({
         tabIndex: 0,
+        role: "button",
         css: cssStyles,
         className: classes
       }, rest), icon || label));

package/lib/components/basic_table/basic_table.styles.js

@@ -16,9 +16,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 var tableLoadingLine = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    ", "\n    ", "\n  }\n\n  20% {\n    ", "\n    ", "\n  }\n\n  80% {\n    ", "\n    ", "\n  }\n\n  100% {\n    ", "\n    ", "\n  }\n"])), (0, _global_styling.logicalCSS)('left', 0), (0, _global_styling.logicalCSS)('width', 0), (0, _global_styling.logicalCSS)('left', 0), (0, _global_styling.logicalCSS)('width', '40%'), (0, _global_styling.logicalCSS)('left', '60%'), (0, _global_styling.logicalCSS)('width', '40%'), (0, _global_styling.logicalCSS)('left', '100%'), (0, _global_styling.logicalCSS)('width', 0));
-var euiBasicTableBodyLoading = exports.euiBasicTableBodyLoading = function euiBasicTableBodyLoading(_ref) {
-  var euiTheme = _ref.euiTheme;
-  return /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;&::before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", _global_styling.euiCantAnimate, "{animation-duration:2s;}};label:euiBasicTableBodyLoading;");
+var euiBasicTableBodyLoading = exports.euiBasicTableBodyLoading = function euiBasicTableBodyLoading(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;&::before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", _global_styling.euiCantAnimate, "{animation:none;background:repeating-linear-gradient(\n          -45deg,\n          ", euiTheme.colors.backgroundBasePlain, ",\n          ", euiTheme.colors.backgroundBasePlain, " ", euiTheme.size.xs, ",\n          ", euiTheme.colors.primary, " ", euiTheme.size.xs, ",\n          ", euiTheme.colors.primary, " ", euiTheme.size.s, "\n        );", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+    forced: "\n              ".concat((0, _global_styling.preventForcedColors)(euiThemeContext), "\n            ")
+  }), ";}};label:euiBasicTableBodyLoading;");
 };
 
 // Fix to make the loading indicator position correctly in Safari

package/lib/components/code/code_syntax.styles.js

@@ -56,7 +56,7 @@ var euiCodeSyntaxVariables = exports.euiCodeSyntaxVariables = function euiCodeSy
     selectorClassColor: euiTheme.components.codeSelectorClassColor,
     selectorIdColor: euiTheme.components.codeSelectorIdColor,
     get tokensCss() {
-      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: ".concat(highContrastMode ? '1' : '.7', ";\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ").concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
+      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: ".concat(highContrastMode ? '1' : '.7', ";\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ").concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.key.atrule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
     }
   };
 };

package/lib/components/icon/icon.js

@@ -21,7 +21,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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -201,9 +201,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 = _objectWithoutProperties(_this$props, _excluded);
       var _this$state = this.state,
         isLoading = _this$state.isLoading,
@@ -228,41 +231,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", _extends({
-          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, _extends({
           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/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/lib/components/table/table_row.styles.js

@@ -52,7 +52,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
        */
@@ -60,8 +60,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;")
     }
   };
 };

package/optimize/es/components/badge/beta_badge/beta_badge.js

@@ -104,6 +104,7 @@ export var EuiBetaBadge = function EuiBetaBadge(_ref) {
         anchorProps: anchorProps
       }, ___EmotionJSX("span", _extends({
         tabIndex: 0,
+        role: "button",
         css: cssStyles,
         className: classes
       }, rest), icon || label));

package/optimize/es/components/basic_table/basic_table.styles.js

@@ -10,11 +10,13 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css, keyframes } from '@emotion/react';
-import { logicalCSS, euiCantAnimate } from '../../global_styling';
+import { logicalCSS, euiCantAnimate, highContrastModeStyles, preventForcedColors } from '../../global_styling';
 var tableLoadingLine = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    ", "\n    ", "\n  }\n\n  20% {\n    ", "\n    ", "\n  }\n\n  80% {\n    ", "\n    ", "\n  }\n\n  100% {\n    ", "\n    ", "\n  }\n"])), logicalCSS('left', 0), logicalCSS('width', 0), logicalCSS('left', 0), logicalCSS('width', '40%'), logicalCSS('left', '60%'), logicalCSS('width', '40%'), logicalCSS('left', '100%'), logicalCSS('width', 0));
-export var euiBasicTableBodyLoading = function euiBasicTableBodyLoading(_ref) {
-  var euiTheme = _ref.euiTheme;
-  return /*#__PURE__*/css("position:relative;overflow:hidden;&::before{position:absolute;content:'';", logicalCSS('width', '100%'), " ", logicalCSS('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", euiCantAnimate, "{animation-duration:2s;}};label:euiBasicTableBodyLoading;");
+export var euiBasicTableBodyLoading = function euiBasicTableBodyLoading(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return /*#__PURE__*/css("position:relative;overflow:hidden;&::before{position:absolute;content:'';", logicalCSS('width', '100%'), " ", logicalCSS('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", euiCantAnimate, "{animation:none;background:repeating-linear-gradient(\n          -45deg,\n          ", euiTheme.colors.backgroundBasePlain, ",\n          ", euiTheme.colors.backgroundBasePlain, " ", euiTheme.size.xs, ",\n          ", euiTheme.colors.primary, " ", euiTheme.size.xs, ",\n          ", euiTheme.colors.primary, " ", euiTheme.size.s, "\n        );", highContrastModeStyles(euiThemeContext, {
+    forced: "\n              ".concat(preventForcedColors(euiThemeContext), "\n            ")
+  }), ";}};label:euiBasicTableBodyLoading;");
 };
 
 // Fix to make the loading indicator position correctly in Safari

package/optimize/es/components/code/code_syntax.styles.js

@@ -50,7 +50,7 @@ export var euiCodeSyntaxVariables = function euiCodeSyntaxVariables(euiThemeCont
     selectorClassColor: euiTheme.components.codeSelectorClassColor,
     selectorIdColor: euiTheme.components.codeSelectorIdColor,
     get tokensCss() {
-      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: ".concat(highContrastMode ? '1' : '.7', ";\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ").concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
+      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: ".concat(highContrastMode ? '1' : '.7', ";\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ").concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.key.atrule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
     }
   };
 };

package/optimize/es/components/icon/icon.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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) { _defineProperty(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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -175,9 +175,12 @@ export var 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 = _objectWithoutProperties(_this$props, _excluded);
       var _this$state = this.state,
         isLoading = _this$state.isLoading,
@@ -202,41 +205,55 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
       var styles = stylesMemoizer(euiIconStyles);
       var cssStyles = [styles.euiIcon, styles[size], color && 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;
+      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 ___EmotionJSX("img", _extends({
-          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 ___EmotionJSX(Svg, _extends({
           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/es/components/icon/icon_map.js

@@ -501,7 +501,7 @@ export var 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/es/components/table/table_row.styles.js

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

package/optimize/lib/components/badge/beta_badge/beta_badge.js

@@ -110,6 +110,7 @@ var EuiBetaBadge = exports.EuiBetaBadge = function EuiBetaBadge(_ref) {
         anchorProps: anchorProps
       }, (0, _react2.jsx)("span", (0, _extends2.default)({
         tabIndex: 0,
+        role: "button",
         css: cssStyles,
         className: classes
       }, rest), icon || label));

package/optimize/lib/components/basic_table/basic_table.styles.js

@@ -17,9 +17,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 var tableLoadingLine = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    ", "\n    ", "\n  }\n\n  20% {\n    ", "\n    ", "\n  }\n\n  80% {\n    ", "\n    ", "\n  }\n\n  100% {\n    ", "\n    ", "\n  }\n"])), (0, _global_styling.logicalCSS)('left', 0), (0, _global_styling.logicalCSS)('width', 0), (0, _global_styling.logicalCSS)('left', 0), (0, _global_styling.logicalCSS)('width', '40%'), (0, _global_styling.logicalCSS)('left', '60%'), (0, _global_styling.logicalCSS)('width', '40%'), (0, _global_styling.logicalCSS)('left', '100%'), (0, _global_styling.logicalCSS)('width', 0));
-var euiBasicTableBodyLoading = exports.euiBasicTableBodyLoading = function euiBasicTableBodyLoading(_ref) {
-  var euiTheme = _ref.euiTheme;
-  return /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;&::before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", _global_styling.euiCantAnimate, "{animation-duration:2s;}};label:euiBasicTableBodyLoading;");
+var euiBasicTableBodyLoading = exports.euiBasicTableBodyLoading = function euiBasicTableBodyLoading(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;&::before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", _global_styling.euiCantAnimate, "{animation:none;background:repeating-linear-gradient(\n          -45deg,\n          ", euiTheme.colors.backgroundBasePlain, ",\n          ", euiTheme.colors.backgroundBasePlain, " ", euiTheme.size.xs, ",\n          ", euiTheme.colors.primary, " ", euiTheme.size.xs, ",\n          ", euiTheme.colors.primary, " ", euiTheme.size.s, "\n        );", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+    forced: "\n              ".concat((0, _global_styling.preventForcedColors)(euiThemeContext), "\n            ")
+  }), ";}};label:euiBasicTableBodyLoading;");
 };
 
 // Fix to make the loading indicator position correctly in Safari

package/optimize/lib/components/code/code_syntax.styles.js

@@ -56,7 +56,7 @@ var euiCodeSyntaxVariables = exports.euiCodeSyntaxVariables = function euiCodeSy
     selectorClassColor: euiTheme.components.codeSelectorClassColor,
     selectorIdColor: euiTheme.components.codeSelectorIdColor,
     get tokensCss() {
-      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: ".concat(highContrastMode ? '1' : '.7', ";\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ").concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
+      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: ".concat(highContrastMode ? '1' : '.7', ";\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ").concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.key.atrule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
     }
   };
 };