@elastic/eui 90.0.0 → 91.1.0

package/src/components/datagrid/_data_grid_data_row.scss

@@ -3,15 +3,23 @@
 }
 
 @include euiDataGridRowCell {
-  @include euiFontSizeS;
-
-  padding: $euiDataGridCellPaddingM;
+  position: relative; // Needed for .euiDataGridRowCell__actions
   border-right: $euiDataGridVerticalBorder;
   border-bottom: $euiBorderThin;
-  overflow: hidden;
+
+  .euiDataGridRowCell__content {
+    @include euiFontSizeS;
+    padding: $euiDataGridCellPaddingM;
+    height: 100%;
+    overflow: hidden;
+
+    &--autoHeight {
+      height: auto;
+    }
+  }
 
   // Hack to allow focus trap to still stretch to full row height on defined heights
-  > * {
+  > [data-focus-lock-disabled] {
     height: 100%;
   }
 
@@ -23,39 +31,46 @@
     border-right-color: $euiBorderColor;
   }
 
-  &:focus {
-    position: relative;
+  --euiDataGridCellOutlineColor: #{$euiColorPrimary};
+
+  &:hover,
+  &:focus,
+  &.euiDataGridRowCell--open {
     @include euiDataGridCellFocus;
   }
 
-  // Only add the transition effect on hover, so that it is instantaneous on focus
-  // Long delays on hover to mitigate the accordion effect
-  &:hover {
-    .euiDataGridRowCell__actionButtonIcon {
-      animation-duration: $euiAnimSpeedExtraFast;
-      animation-name: euiDataGridCellActionsSlideIn;
-      animation-iteration-count: 1;
-      animation-delay: $euiAnimSpeedNormal;
-      animation-fill-mode: forwards;
+  // On hover
+  &:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) {
+    // Color the actions and focus ring grayscale on hover
+    // (Actions look odd without the ring on grids without cell borders)
+    --euiDataGridCellOutlineColor: #{$euiColorDarkShade};
+
+    .euiDataGridRowCell__actions {
+      // Delay the actions showing on hover
+      // (Note: the focus ring show instantly on hover & the actions show instantly on focus)
+      animation-delay: $euiAnimSpeedSlow;
     }
   }
 
-  // On focus, directly show action buttons (without animation)
+  // On hover & focus, show cell action buttons
+  &:hover,
   &:focus,
-  // Prevent the animation from flickering after cell popover close when focus is restored the expansion button
   &:focus-within,
   // Always make the cell actions visible when the cell popover is open
-  &.euiDataGridRowCell--open {
-    .euiDataGridRowCell__actionButtonIcon {
-      animation: none;
-      margin-left: $euiDataGridCellPaddingM;
-      width: $euiSizeM;
+  &.euiDataGridRowCell--open,
+  // Prevents the animation from replaying when keyboard focus is moved from the popover back to the cell
+  &[data-keyboard-closing] {
+    .euiDataGridRowCell__actions {
+      animation-duration: $euiAnimSpeedExtraFast;
+      animation-name: euiDataGridCellActionsSlideIn;
+      animation-iteration-count: 1;
+      animation-fill-mode: forwards;
     }
   }
 
   // if a cell is not hovered nor focused nor open via popover, don't show buttons in general
-  &:not(:hover):not(:focus):not(.euiDataGridRowCell--open) {
-    .euiDataGridRowCell__actionButtonIcon {
+  &:not(:hover):not(:focus):not(.euiDataGridRowCell--open):not([data-keyboard-closing]) {
+    .euiDataGridRowCell__actions {
       display: none;
     }
   }
@@ -84,95 +99,123 @@
 .euiDataGridRowCell__popover {
   @include euiScrollBar;
   overflow: auto;
-  // stylelint-disable declaration-no-important
-  max-width: 400px !important;
-  max-height: 400px !important;
-  z-index: $euiZDataGridCellPopover !important;
-  // stylelint-enable declaration-no-important
+  z-index: $euiZDataGridCellPopover !important; // stylelint-disable-line declaration-no-important
   // Workaround for a Safari CSS bug when using both `overflow: auto` & `filter: drop-shadow`
   // (see https://github.com/elastic/eui/issues/6151)
   // Disables the default EuiPopover filter drop-shadow and uses box-shadow instead,
   // since we don't use the popover arrow in any case for cell popovers
   filter: none;
   @include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion
-}
 
-.euiDataGridRowCell__contentWrapper {
-  position: relative; // Needed for .euiDataGridRowCell__actions--overlay
-  height: 100%;
+  // For some reason, the normal popover opacity transition doesn't work for datagrid popovers
+  // so we'll force it via an animation. If we don't, cells constrained by the inline max-width
+  // style that we set will see a flash of unwanted content before repositioning
+  animation-duration: $euiAnimSpeedNormal;
+  animation-name: euiDataGridCellPopover;
 }
 
-.euiDataGridRowCell__defaultHeight {
+.euiDataGridRowCell--controlColumn .euiDataGridRowCell__content {
+  max-height: 100%;
+  height: auto;
   display: flex;
-  align-items: baseline;
-  max-width: 100%;
-
-  .euiDataGridRowCell__content {
-    flex-grow: 1;
-  }
+  align-items: center;
+}
 
-  .euiDataGridRowCell__actions {
-    flex-grow: 0;
-  }
+// Positioning for cell actions & the cell expansion popover
+.euiDataGridRowCell__actions,
+.euiDataGridRowCell__actions + [data-euiportal] > .euiPopover {
+  position: absolute;
+  bottom: 100%;
 
-  .euiDataGridRowCell--controlColumn & {
-    height: 100%;
-    align-items: center;
+  .euiDataGridRowCell--alignLeft & {
+    left: 0;
   }
-}
 
-.euiDataGridRowCell__numericalHeight {
-  // Without this rule, popover anchors content that overflows off the page
-  [data-euiportal],
-  .euiPopover,
-  .euiPopover__anchor {
-    height: 100%;
+  .euiDataGridRowCell--alignRight & {
+    right: 0;
   }
 }
 
-// Cell actions
 .euiDataGridRowCell__actions {
+  z-index: $euiZDataGridCellPopover - 2; // Sit below sticky column headers
+  margin-bottom: -$euiBorderWidthThin; // Vertical alignment
   display: flex;
+  gap: $euiSizeXS / 2;
+  padding-inline: $euiSizeXS / 2;
+  background-color: var(--euiDataGridCellOutlineColor);
+  color: $euiColorEmptyShade;
+  border: $euiBorderWidthThin solid var(--euiDataGridCellOutlineColor);
+  border-top-left-radius: $euiBorderRadius / 2;
+  border-top-right-radius: $euiBorderRadius / 2;
+  transform: scaleY(0);
+  transform-origin: bottom;
+
+  // The first row of cell actions need to be visible above the cell headers,
+  // but other cell actions that scroll past the sticky headers should not
+  .euiDataGridRowCell[data-gridcell-visible-row-index='0'] > & {
+    z-index: $euiZDataGridCellPopover - 1;
+  }
+
+  .euiDataGridRowCell--alignLeft & {
+    border-bottom-right-radius: $euiBorderRadius / 2;
+  }
 
-  &--overlay {
+  .euiDataGridRowCell--alignRight & {
+    border-bottom-left-radius: $euiBorderRadius / 2;
+  }
+
+  // Visual trickery - fill in the gap between the cell outline border-radius & the actions
+  &::after {
+    content: '';
     position: absolute;
-    right: 0;
-    top: 0;
-    padding: $euiDataGridCellPaddingM 0;
-    background-color: $euiColorEmptyShade;
+    top: 100%;
+    height: $euiBorderWidthThick;
+    width: $euiBorderWidthThick;
+    background-color: var(--euiDataGridCellOutlineColor);
+
+    .euiDataGridRowCell--alignLeft & {
+      left: -$euiBorderWidthThin;
+    }
+
+    .euiDataGridRowCell--alignRight & {
+      right: -$euiBorderWidthThin;
+    }
   }
 }
 
 .euiDataGridRowCell__actionButtonIcon {
-  height: $euiSizeM;
-  border-radius: $euiBorderRadius / 2;
-  width: 0;
-  overflow: hidden;
-  // Have to take out the generic transition so it is instaneous on focus
-  transition: none;
-  // Disable filled button box-shadows on legacy theme - they're unnecessary when this small in a datagrid
-  box-shadow: none !important; // stylelint-disable-line declaration-no-important
-  // Remove filled button borders on legacy theme - this way we don't need to animate the border
-  border: none;
+  height: $euiSize + $euiSizeXS;
+  width: $euiSize;
+  border-radius: 0;
+
+  /* Force all cell action buttons to match EUI colors */
+  &,
+  svg {
+    // stylelint-disable declaration-no-important
+    background-color: transparent !important;
+    color: currentColor !important;
+    fill: currentColor !important;
+    // stylelint-enable declaration-no-important
+  }
+
+  /* Manually increase the size of the expand cell icon - it's a bit small by default */
+  &.euiDataGridRowCell__expandCell .euiIcon {
+    width: 120%;
+    height: 100%;
+  }
 }
 
 // Row stripes
 @include euiDataGridStyles(stripes) {
   .euiDataGridRow--striped {
-    &,
-    .euiDataGridRowCell__actions--overlay {
-      background-color: $euiColorLightestShade;
-    }
+    background-color: $euiColorLightestShade;
   }
 }
 
 // Row highlights
 @include euiDataGridStyles(rowHoverHighlight) {
   .euiDataGridRow:hover {
-    &,
-    .euiDataGridRowCell__actions--overlay {
-      background-color: $euiColorHighlight;
-    }
+    background-color: $euiColorHighlight;
   }
 }
 
@@ -193,48 +236,43 @@
 // Font alternates
 @include euiDataGridStyles(fontSizeSmall) {
   @include euiDataGridRowCell {
-    @include euiFontSizeXS;
+    .euiDataGridRowCell__content {
+      @include euiFontSizeXS;
+    }
   }
 }
 
 @include euiDataGridStyles(fontSizeLarge) {
   @include euiDataGridRowCell {
-    @include euiFontSize;
+    .euiDataGridRowCell__content {
+      @include euiFontSize;
+    }
   }
 }
 
 // Padding alternates
 @include euiDataGridStyles(paddingSmall) {
   @include euiDataGridRowCell {
-    padding: $euiDataGridCellPaddingS;
+    .euiDataGridRowCell__content {
+      padding: $euiDataGridCellPaddingS;
+    }
   }
 }
 
 @include euiDataGridStyles(paddingLarge) {
   @include euiDataGridRowCell {
-    padding: $euiDataGridCellPaddingL;
-  }
-}
-
-// Compressed density grids - height tweaks
-@include euiDataGridStyles(fontSizeSmall, paddingSmall) {
-  .euiDataGridRowCell__actions--overlay {
-    padding: ($euiDataGridCellPaddingS / 2) 0;
-  }
-
-  .euiDataGridRowCell__defaultHeight .euiDataGridRowCell__actions {
-    transform: translateY(1px);
+    .euiDataGridRowCell__content {
+      padding: $euiDataGridCellPaddingL;
+    }
   }
 }
 
 @keyframes euiDataGridCellActionsSlideIn {
-  from {
-    margin-left: 0;
-    width: 0;
-  }
+  from { transform: scaleY(0); }
+  to { transform: scaleY(1); }
+}
 
-  to {
-    margin-left: $euiDataGridCellPaddingM;
-    width: $euiSizeM;
-  }
+@keyframes euiDataGridCellPopover {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }

package/src/components/datagrid/_mixins.scss

@@ -64,8 +64,8 @@ $euiDataGridStyles: (
     position: absolute;
     top: 0;
     left: 0;
-    border: $euiBorderWidthThick solid $euiFocusRingColor;
-    border-radius: $euiBorderRadiusSmall;
+    border: $euiBorderWidthThick solid var(--euiDataGridCellOutlineColor, $euiFocusRingColor);
+    border-radius: $euiBorderRadius / 2;
     z-index: 2; // We want this to be on top of all the content
     pointer-events: none; // Because we put it with a higher z-index we don't want to make it clickable this way we allow selecting the content behind
   }

package/src/components/datagrid/body/header/_data_grid_header_row.scss

@@ -1,6 +1,6 @@
 .euiDataGridHeader {
   display: flex;
-  z-index: 3; // Needs to sit above the content and focused cells
+  z-index: $euiZDataGridCellPopover - 1; // Needs to sit above the content and focused cells
   background: $euiColorEmptyShade;
   position: sticky;
   top: 0;
@@ -17,14 +17,6 @@
   align-items: center;
   display: flex;
 
-  &.euiDataGridHeaderCell--numeric {
-    text-align: right;
-  }
-
-  &.euiDataGridHeaderCell--currency {
-    text-align: right;
-  }
-
   &:focus {
     @include euiDataGridCellFocus;
     border-top: none;
@@ -37,38 +29,54 @@
       border-top: none;
     }
 
-    .euiDataGridHeaderCell__sortingArrow {
-      margin-right: $euiSizeXS;
-    }
-
     .euiDataGridHeaderCell__button {
-      flex: 0 0 auto;
       position: relative;
-      align-items: center;
       display: flex;
+      align-items: center;
+      gap: $euiSizeXS;
       width: 100%;
       font-weight: $euiFontWeightBold;
       outline: none;
-
-      .euiDataGridHeaderCell__sortingArrow {
-        flex-grow: 0;
-      }
     }
 
     .euiDataGridHeaderCell__content {
       @include euiTextTruncate;
-      overflow: hidden;
-      white-space: nowrap;
-      text-align: left;
-      flex-grow: 1;
-      align-self: baseline;
+    }
+
+    .euiDataGridHeaderCell__sortingArrow {
+      flex: 0 0 auto; // Ensure icon doesn't shrink
     }
 
     .euiDataGridHeaderCell__icon {
-      flex-grow: 0;
-      flex-basis: auto;
-      width: auto;
-      padding-left: $euiSizeXS;
+      flex: 0 0 auto; // Ensure icon doesn't shrink
+      margin-left: auto; // Aligns the icon to the right
+      // Center the icon
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: $euiSize;
+      overflow: hidden;
+      width: 0;
+      opacity: 0;
+      transition: width $euiAnimSpeedFast ease-in, opacity $euiAnimSpeedSlow ease-in;
+    }
+
+    &:focus-within,
+    &:hover,
+    .euiPopover-isOpen {
+      .euiDataGridHeaderCell__icon {
+        width: $euiSize;
+        opacity: 1;
+      }
+    }
+  }
+
+  // Align numeric and currency schemas to the right
+  &.euiDataGridHeaderCell--numeric,
+  &.euiDataGridHeaderCell--currency {
+    .euiDataGridHeaderCell__content {
+      flex-grow: 1;
+      text-align: right;
     }
   }
 }

package/src/components/datagrid/controls/_data_grid_toolbar.scss

@@ -31,11 +31,6 @@
   }
 }
 
-.euiDataGrid__controlBtn--active,
-.euiDataGrid__controlBtn--active:focus {
-  font-weight: $euiFontWeightSemiBold;
-}
-
 @include euiDataGridStyles(bordersNone) {
   .euiDataGrid__controls {
     border: none;

package/src/components/date_picker/super_date_picker/date_popover/_absolute_tab.scss

@@ -1,3 +1,24 @@
 .euiSuperDatePicker__absoluteDateFormRow {
   padding: 0 $euiSizeS $euiSizeS;
+
+  /* A bit of a visual trickery to make the format "hint" become an "error" text.
+     NOTE: Normally reordering visually (vs DOM) isn't super great for screen reader users,
+     but as the help text is already read out via `aria-describedby`, and the error text
+     is read out immediately via `aria-live`, we can fairly safely prioritize visuals instead */
+  .euiFormRow__fieldWrapper {
+    display: flex;
+    flex-direction: column;
+  };
+
+  .euiFormControlLayout {
+    order: 0;
+  }
+
+  .euiFormHelpText {
+    order: 1;
+  }
+
+  .euiFormErrorText {
+    order: 2;
+  }
 }

package/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss

@@ -29,10 +29,6 @@
   gap: $euiSizeXS;
 }
 
-.euiQuickSelectPopover__anchor {
-  height: 100%;
-}
-
 .euiQuickSelectPopover__sectionItem {
   font-size: $euiFontSizeS;
   line-height: $euiFontSizeS;

package/src/components/form/form_control_layout/_form_control_layout.scss

@@ -49,7 +49,6 @@
 
   // Force the stretch of any children so they expand the full height of the control
   > *,
-  .euiPopover__anchor,
   .euiButtonEmpty,
   .euiText,
   .euiFormLabel,

package/src/components/form/form_row/_form_row.scss

@@ -18,7 +18,7 @@
 }
 
 .euiFormRow--hasEmptyLabelSpace {
-  margin-top: floor($euiFontSize * $euiBodyLineHeight) + $euiSizeXS; /* 2 */
+  margin-top: $euiSize + $euiSizeXS; /* 2 */
   // the following ensure that contents that aren't inherently the same height
   // as inputs will align to the vertical center
   min-height: $euiFormControlHeight;

package/src/components/table/_responsive.scss

@@ -99,6 +99,25 @@
         }
       }
 
+      // Custom actions
+      &:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child {
+        width: 100%;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          height: $euiBorderWidthThin;
+          background-color: $euiTableActionsBorderColor;
+        }
+
+        .euiTableCellContent {
+          position: relative;
+          top: $euiSizeXS;
+        }
+      }
+
       &.euiTableRow-hasActions.euiTableRow-isExpandable {
         .euiTableRowCell--isExpander {
           top: auto;

package/src/components/table/_table.scss

@@ -206,20 +206,15 @@
       transition: opacity $euiAnimSpeedNormal $euiAnimSlightResistance, filter $euiAnimSpeedNormal $euiAnimSlightResistance;
     }
 
-    .expandedItemActions__completelyHide,
-    .expandedItemActions__completelyHide:disabled,
-    .expandedItemActions__completelyHide:disabled:hover,
-    .expandedItemActions__completelyHide:disabled:focus,
-    .euiTableRow:hover & .expandedItemActions__completelyHide:disabled {
+    .expandedItemActions__completelyHide {
       filter: grayscale(0%);
       opacity: 0;
     }
   }
 
-  &:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem:not(:disabled) {
-    &,
-    &:hover,
-    &:focus {
+  &:hover .euiTableCellContent--showOnHover,
+  .euiTableCellContent--showOnHover:focus-within {
+    .euiTableCellContent__hoverItem {
       opacity: 1;
       filter: grayscale(0%);
     }

package/src/global_styling/variables/_typography.scss

@@ -1,6 +1,6 @@
 // Families
-$euiFontFamily: 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-$euiCodeFontFamily: 'Roboto Mono', Consolas, Menlo, Courier, monospace !default;
+$euiFontFamily: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif !default;
+$euiCodeFontFamily: 'Roboto Mono', Menlo, Courier, monospace !default;
 
 // Careful using ligatures. Code editors like ACE will often error because of width calculations
 $euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;

package/test-env/components/accordion/accordion.a11y.js

@@ -32,9 +32,7 @@ describe('EuiAccordion', function () {
     it('has zero violations when expanded', function () {
       cy.mount((0, _react2.jsx)(_index.EuiAccordion, noArrowProps, (0, _react2.jsx)(_panel.EuiPanel, {
         color: "subdued"
-      }, "Any content inside of ", (0, _react2.jsx)("strong", null, "EuiAccordion"), " will appear here. We will include ", (0, _react2.jsx)("a", {
-        href: "#"
-      }, "a link"), " to confirm focus.")));
+      }, "Any content inside of ", (0, _react2.jsx)("strong", null, "EuiAccordion"), " will appear here.")));
       cy.get('button.euiAccordion__button').click();
       cy.checkAxe();
     });

package/test-env/components/accordion/accordion.js

@@ -24,7 +24,7 @@ var _accordion_trigger = require("./accordion_trigger");
 var _accordion_children = require("./accordion_children");
 var _accordion = require("./accordion.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "id", "element", "buttonElement", "buttonProps", "buttonClassName", "buttonContentClassName", "buttonContent", "arrowDisplay", "arrowProps", "extraAction", "paddingSize", "borders", "initialIsOpen", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "theme"];
+var _excluded = ["children", "className", "id", "role", "element", "buttonElement", "buttonProps", "buttonClassName", "buttonContentClassName", "buttonContent", "arrowDisplay", "arrowProps", "extraAction", "paddingSize", "borders", "initialIsOpen", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "theme"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -106,6 +106,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         children = _this$props3.children,
         className = _this$props3.className,
         id = _this$props3.id,
+        role = _this$props3.role,
         _this$props3$element = _this$props3.element,
         Element = _this$props3$element === void 0 ? 'div' : _this$props3$element,
         buttonElement = _this$props3.buttonElement,
@@ -151,6 +152,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         onToggle: this.onToggle,
         extraAction: isLoading ? (0, _react2.jsx)(_loading.EuiLoadingSpinner, null) : extraAction
       }), (0, _react2.jsx)(_accordion_children.EuiAccordionChildren, {
+        role: role,
         id: id,
         "aria-labelledby": buttonId,
         paddingSize: paddingSize,
@@ -173,7 +175,8 @@ exports.EuiAccordionClass = EuiAccordionClass;
   isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
-  buttonElement: 'button'
+  buttonElement: 'button',
+  role: 'group'
 });
 EuiAccordionClass.propTypes = {
   className: _propTypes.default.string,
@@ -186,6 +189,14 @@ EuiAccordionClass.propTypes = {
        * When using `fieldset`, it will enforce `buttonElement = legend` as well.
        */
   element: _propTypes.default.oneOf(["div", "fieldset"]),
+  /**
+       * Defaults to the [group role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role).
+       *
+       * If your accordion contains significant enough content to be a document
+       * [landmark role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role#accessibility_concerns), consider using the `region` role instead.
+       * @default group
+       */
+  role: _propTypes.default.any,
   /**
        * Class that will apply to the trigger for the accordion.
        */

package/test-env/components/accordion/accordion_children/accordion_children.js

@@ -17,7 +17,7 @@ var _resize_observer = require("../../observer/resize_observer");
 var _accordion_children_loading = require("./accordion_children_loading");
 var _accordion_children = require("./accordion_children.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "accordionChildrenRef", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
+var _excluded = ["role", "children", "accordionChildrenRef", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -28,7 +28,8 @@ var _excluded = ["children", "accordionChildrenRef", "paddingSize", "isLoading",
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
-  var children = _ref.children,
+  var role = _ref.role,
+    children = _ref.children,
     accordionChildrenRef = _ref.accordionChildrenRef,
     paddingSize = _ref.paddingSize,
     isLoading = _ref.isLoading,
@@ -73,7 +74,7 @@ var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
     css: wrapperCssStyles,
     style: heightInlineStyle,
     ref: accordionChildrenRef,
-    role: "region",
+    role: role,
     tabIndex: -1
     // @ts-expect-error - inert property not yet available in React TS defs. TODO: Remove this once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822 is merged
     ,