diff --git a/docs/src/documentation/03-components/04-overlay/tooltip/03-accessibility.mdx b/docs/src/documentation/03-components/04-overlay/tooltip/03-accessibility.mdx
index 8fab52e940..12d0869ce7 100644
--- a/docs/src/documentation/03-components/04-overlay/tooltip/03-accessibility.mdx
+++ b/docs/src/documentation/03-components/04-overlay/tooltip/03-accessibility.mdx
@@ -8,24 +8,13 @@ redirect_from:
### Tooltip
-The Tooltip component has been designed with accessibility in mind.
+The Tooltip component has been designed with accessibility in mind. It can be used with keyboard navigation and includes properties that enhance the experience for users of assistive technologies.
-It can be used with keyboard navigation, and it includes the following properties that allow to improve the experience for users of assistive technologies:
-
-| Name | Type | Description |
-| :-------------- | :------- | :---------------------------------------------------------------------------------------- |
-| aria-label | `string` | Adds `aria-label` attribute to the rendered tooltip element. Announced by screen readers. |
-| aria-labelledby | `string` | Id(s) of elements that announce the component to screen readers. |
-
-The mentioned props are optional, but highly recommended to use to ensure the best accessibility experience for all users.
-
-The `aria-label` prop can be used to provide a label for the tooltip that is announced by screen readers, but is not visible on the screen.
-
-The `aria-labelledby` prop can reference multiple ids, separated by a space. The value of the attribute is not announced by the screen reader, but the content of the referred element(s) is.
+While the `aria-label` and `aria-labelledby` attributes are not needed for the Tooltip component itself, it is important to ensure that the components passed as children to the Tooltip have appropriate ARIA labels. This ensures that the content within the Tooltip is accessible and properly announced by screen readers.
#### Examples
-1. The following code snippet shows how the simple setup of `aria-label`. The value of `aria-label` is prioritized over the content of children components. The content of children component (`Learn more.`) is not read by screen reader.
+1. The content of children component is text, so it is read by screen reader.
```jsx
Lorem ipsum dolor sit amet.
}
- aria-label="More information"
>
Learn more.
```
-The screen reader will announce: `More information. Lorem ipsum dolor sit amet.`.
-
-2. In the following code snippet, the attribute `aria-labelled` is ignored as the value of this attribute is not in any component as a value of `id` attribute. The value of `aria-label` is read by a screen reader. Then the content inside the tooltip is read by the screen reader.
-
-```jsx
-
- Lorem ipsum dolor sit amet
-
- }
- aria-label="More information"
- aria-labelledby="tooltip-labelledby"
->
-
-
-```
-
-The screen reader will announce: `More information. Lorem ipsum dolor sit amet.`.
-
-3. Prop `id` in `` component is filled in with the same value passed to `aria-labelledby`. The content of that component (`Learn more.`) is read by the screen reader. The value of `aria-labelled` is prioritized over the value of `aria-label`, that is not read at all.
-
-```jsx
-
- Lorem ipsum dolor sit amet
-
- }
- aria-label="More information"
- aria-labelledby="tooltip-labelledby"
->
-
-
-Learn more.
-```
-
The screen reader will announce: `Learn more. Lorem ipsum dolor sit amet.`.
-4. There is not `aria-label`, nor `aria-labelledby` attribute. The content of children component is read by screen reader.
+2. The children element is an icon component. To achieve the accessibility of the Tooltip, adding an aria-label to the icon component.
```jsx
- Lorem ipsum dolor sit amet
+ Lorem ipsum dolor sit amet.
}
>
- Learn more.
+
```
-The screen reader will announce: `Learn more. Lorem ipsum dolor sit amet.`.
+The screen reader will announce: `More information`. After the user activates the icon, the screen reader will announce: `Lorem ipsum dolor sit amet.`.
diff --git a/packages/orbit-components/src/Tooltip/Tooltip.stories.tsx b/packages/orbit-components/src/Tooltip/Tooltip.stories.tsx
index 7fe6388488..9c56c0a172 100644
--- a/packages/orbit-components/src/Tooltip/Tooltip.stories.tsx
+++ b/packages/orbit-components/src/Tooltip/Tooltip.stories.tsx
@@ -46,7 +46,7 @@ export const Default: Story = {
render: args => (
-
+
),
@@ -69,7 +69,6 @@ export const Default: Story = {
args: {
content: "Write your text here.",
- "aria-label": "More information.",
},
};
@@ -148,7 +147,7 @@ export const WithImageInside: Story = {
}
>
-
+
),
@@ -163,7 +162,6 @@ export const WithImageInside: Story = {
"renderInPortal",
"stopPropagation",
"block",
- "aria-labelledby",
],
},
},
@@ -191,7 +189,7 @@ export const WithImageInside: Story = {
};
export const Playground: Story = {
- render: ({ children, content, "aria-labelledby": ariaLabelledby, ...args }) => (
+ render: ({ children, content, ...args }) => (
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate
@@ -204,10 +202,9 @@ export const Playground: Story = {
{content}
}
- aria-labelledby={ariaLabelledby}
{...args}
>
- {children}
+ {children}
@@ -233,8 +230,6 @@ export const Playground: Story = {
stopPropagation: false,
removeUnderlinedText: false,
block: false,
- "aria-label": "Tooltip label",
- "aria-labelledby": "tooltip-labelledby",
...WithImageInside.args,
},
@@ -278,7 +273,6 @@ export const Rtl: Story = {
"labelClose",
"renderInPortal",
"stopPropagation",
- "aria-labelledby",
],
},
},
diff --git a/packages/orbit-components/src/Tooltip/index.tsx b/packages/orbit-components/src/Tooltip/index.tsx
index f6b7a4cdcb..dda9b60cc8 100644
--- a/packages/orbit-components/src/Tooltip/index.tsx
+++ b/packages/orbit-components/src/Tooltip/index.tsx
@@ -24,8 +24,6 @@ const Tooltip = ({
stopPropagation = false,
removeUnderlinedText,
block = false,
- "aria-label": ariaLabel,
- "aria-labelledby": ariaLabelledby,
}: Props) => {
const { isLargeMobile } = useMediaQuery();
return isLargeMobile ? (
@@ -42,8 +40,6 @@ const Tooltip = ({
stopPropagation={stopPropagation}
removeUnderlinedText={removeUnderlinedText}
block={block}
- aria-label={ariaLabel}
- aria-labelledby={ariaLabelledby}
>
{children}
@@ -60,8 +56,6 @@ const Tooltip = ({
removeUnderlinedText={removeUnderlinedText}
stopPropagation={stopPropagation}
block={block}
- aria-label={ariaLabel}
- aria-labelledby={ariaLabelledby}
>
{children}
diff --git a/packages/orbit-components/src/Tooltip/types.d.ts b/packages/orbit-components/src/Tooltip/types.d.ts
index a3a6cdd7cf..2cc2ac94f0 100644
--- a/packages/orbit-components/src/Tooltip/types.d.ts
+++ b/packages/orbit-components/src/Tooltip/types.d.ts
@@ -23,6 +23,4 @@ export interface Props extends Common.Globals {
readonly placement?: Placement;
readonly noFlip?: boolean;
readonly offset?: [number, number];
- readonly "aria-label"?: string;
- readonly "aria-labelledby"?: string;
}
diff --git a/packages/orbit-components/src/primitives/MobileDialogPrimitive/MobileDialogPrimitive.stories.tsx b/packages/orbit-components/src/primitives/MobileDialogPrimitive/MobileDialogPrimitive.stories.tsx
index 078765cfec..b2a2bb602c 100644
--- a/packages/orbit-components/src/primitives/MobileDialogPrimitive/MobileDialogPrimitive.stories.tsx
+++ b/packages/orbit-components/src/primitives/MobileDialogPrimitive/MobileDialogPrimitive.stories.tsx
@@ -30,8 +30,6 @@ const meta: Meta = {
removeUnderlinedText: false,
block: false,
lockScrolling: false,
- "aria-label": "Mobile Dialog Primitive label",
- "aria-labelledby": "tooltip-labelledby",
},
};
@@ -39,12 +37,12 @@ export default meta;
type Story = StoryObj;
export const Playground: Story = {
- render: ({ "aria-labelledby": ariaLabelledby, ...args }) => (
+ render: ({ ...args }) => (
Excepteur sint occaecat cupidatat non proident.{" "}
-
- Aliquam erat volutpat.
+
+ Aliquam erat volutpat.
diff --git a/packages/orbit-components/src/primitives/MobileDialogPrimitive/index.tsx b/packages/orbit-components/src/primitives/MobileDialogPrimitive/index.tsx
index 4d6fa178b6..ca4a3531c6 100644
--- a/packages/orbit-components/src/primitives/MobileDialogPrimitive/index.tsx
+++ b/packages/orbit-components/src/primitives/MobileDialogPrimitive/index.tsx
@@ -20,8 +20,6 @@ const MobileDialog = ({
removeUnderlinedText,
block = false,
lockScrolling,
- "aria-label": ariaLabel,
- "aria-labelledby": ariaLabelledby,
}: Props) => {
const [render, setRender, setRenderWithTimeout, clearRenderTimeout] =
useStateWithTimeout(false, 200);
@@ -78,8 +76,6 @@ const MobileDialog = ({
enabled={enabled}
removeUnderlinedText={removeUnderlinedText}
block={block}
- aria-label={ariaLabel}
- aria-labelledby={ariaLabelledby}
>
{children}
diff --git a/packages/orbit-components/src/primitives/MobileDialogPrimitive/types.d.ts b/packages/orbit-components/src/primitives/MobileDialogPrimitive/types.d.ts
index c2dcb49b4b..c2ff5bc84e 100644
--- a/packages/orbit-components/src/primitives/MobileDialogPrimitive/types.d.ts
+++ b/packages/orbit-components/src/primitives/MobileDialogPrimitive/types.d.ts
@@ -17,6 +17,4 @@ export interface Props extends Common.Globals {
readonly stopPropagation?: boolean;
readonly removeUnderlinedText?: boolean;
readonly block?: boolean;
- readonly "aria-label"?: string;
- readonly "aria-labelledby"?: string;
}
diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx
index 6d31f79a01..7c4b852904 100644
--- a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx
+++ b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx
@@ -42,7 +42,7 @@ export const Default: Story = {
render: args => (
-
+
),
@@ -65,7 +65,6 @@ export const Default: Story = {
args: {
content:
"Write your text here. If it’s longer than three lines though, consider format your content in some more structured way.",
- "aria-label": "More information.",
},
};
@@ -147,7 +146,7 @@ export const WithImageInside: Story = {
}
>
-
+
),
@@ -162,7 +161,6 @@ export const WithImageInside: Story = {
"renderInPortal",
"stopPropagation",
"block",
- "aria-labelledby",
],
},
},
@@ -190,7 +188,7 @@ export const WithImageInside: Story = {
};
export const Playground: Story = {
- render: ({ children, content, "aria-labelledby": ariaLabelledby, ...args }) => (
+ render: ({ children, content, ...args }) => (
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate
@@ -203,10 +201,9 @@ export const Playground: Story = {
{content}
}
- aria-labelledby={ariaLabelledby}
{...args}
>
- {children}
+ {children}
@@ -235,8 +232,6 @@ export const Playground: Story = {
block: false,
noFlip: false,
offset: [0, 5],
- "aria-label": "More information.",
- "aria-labelledby": "tooltip-labelledby",
},
argTypes: {
diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/index.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/index.tsx
index b53cdc8a57..cdceffd3a7 100644
--- a/packages/orbit-components/src/primitives/TooltipPrimitive/index.tsx
+++ b/packages/orbit-components/src/primitives/TooltipPrimitive/index.tsx
@@ -52,8 +52,6 @@ const TooltipPrimitive = ({
placement,
noFlip,
offset,
- "aria-label": ariaLabel,
- "aria-labelledby": ariaLabelledby,
}: Props) => {
const [shown, setShown] = React.useState(false);
const [referenceElement, setReferenceElement] = React.useState(null);
@@ -135,8 +133,6 @@ const TooltipPrimitive = ({
enabled={enabled}
removeUnderlinedText={removeUnderlinedText}
block={block}
- aria-label={ariaLabel}
- aria-labelledby={ariaLabelledby}
>
{children}
diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/types.d.ts b/packages/orbit-components/src/primitives/TooltipPrimitive/types.d.ts
index bc5bc2f9bc..0350becc7b 100644
--- a/packages/orbit-components/src/primitives/TooltipPrimitive/types.d.ts
+++ b/packages/orbit-components/src/primitives/TooltipPrimitive/types.d.ts
@@ -25,6 +25,4 @@ export interface Props extends Common.Globals {
readonly placement?: Placement;
readonly noFlip?: boolean;
readonly offset?: [number, number];
- readonly "aria-label"?: string;
- readonly "aria-labelledby"?: string;
}