&
export const EuiAccordionChildren: FunctionComponent<
_EuiAccordionChildrenProps
> = ({
+ role,
children,
accordionChildrenRef,
paddingSize,
@@ -90,7 +91,7 @@ export const EuiAccordionChildren: FunctionComponent<
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
inert={!isOpen ? '' : undefined} // Can't pass a boolean currently, Jest throws errors
diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index 9c7a4bfde42..d60f9fd81de 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -254,7 +254,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro
class="euiAccordion__childWrapper emotion-euiAccordion__childWrapper-isClosed"
id="id"
inert=""
- role="region"
+ role="group"
style="block-size: 0;"
tabindex="-1"
>
@@ -319,7 +319,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accord
class="euiAccordion__childWrapper emotion-euiAccordion__childWrapper-isClosed"
id="id"
inert=""
- role="region"
+ role="group"
style="block-size: 0;"
tabindex="-1"
>
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index debc4a82780..dd82c4d6852 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`EuiCollapsibleNavGroup renders 1`] = `
aria-label="aria-label"
class="euiCollapsibleNavLink euiCollapsibleNavItem emotion-euiCollapsibleNavLink-isTopItem-isNotAccordion-euiCollapsibleNavGroup__title"
data-test-subj="test subject string"
+ id="generated-id"
>
{isCollapsed && isPush ? (
@@ -72,10 +74,16 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
) : (
<>
-
+
>
)}
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap
index 293ba2b0a01..9a05ff15881 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`EuiCollapsibleNavAccordion renders as a sub item 1`] = `
class="euiAccordion__childWrapper emotion-euiAccordion__childWrapper-isClosed"
id="generated-id"
inert=""
- role="region"
+ role="group"
style="block-size: 0;"
tabindex="-1"
>
@@ -113,7 +113,7 @@ exports[`EuiCollapsibleNavAccordion renders as a top level item 1`] = `
class="euiAccordion__childWrapper emotion-euiAccordion__childWrapper-isClosed"
id="generated-id"
inert=""
- role="region"
+ role="group"
style="block-size: 0;"
tabindex="-1"
>
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_group.test.tsx.snap
index 55fa4548a06..1cd58f934fb 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -6,11 +6,14 @@ exports[`EuiCollapsibleNavGroup renders as a sub item 1`] = `
>
Header
Header
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.tsx
index ebc9cdeb190..b63ac6e82f7 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.tsx
@@ -9,7 +9,7 @@
import React, { FunctionComponent, ReactNode } from 'react';
import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
import {
EuiCollapsibleNavSubItems,
@@ -63,10 +63,13 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
}
: undefined; // Prevents Emotion from generating a selector if no styles need to be applied
+ const labelledById = useGeneratedHtmlId();
+
return (
);
diff --git a/src/components/notification/__snapshots__/notification_event.test.tsx.snap b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
index 31c0724e804..2d2a2009c54 100644
--- a/src/components/notification/__snapshots__/notification_event.test.tsx.snap
+++ b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
@@ -516,7 +516,7 @@ exports[`EuiNotificationEvent props multiple messages are rendered 1`] = `
class="euiAccordion__childWrapper emotion-euiAccordion__childWrapper-isClosed"
id="euiNotificationEventMessagesAccordion_generated-id"
inert=""
- role="region"
+ role="group"
style="block-size: 0;"
tabindex="-1"
>
diff --git a/upcoming_changelogs/7326.md b/upcoming_changelogs/7326.md
new file mode 100644
index 00000000000..cd8b7a759b2
--- /dev/null
+++ b/upcoming_changelogs/7326.md
@@ -0,0 +1,5 @@
+- Added a configurable `role` prop to `EuiAccordion`
+
+**Accessibility**
+
+- `EuiAccordion` now defaults to a less screenreader-noisy `group` role instead of `region`. If your accordion contains significant enough content to be a document landmark role, you may re-configure it back to `region`.