revert commit

kiwicom · Nov 27, 2024 · ff46eb7 · ff46eb7
1 parent 36ee31f
commit ff46eb7
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 100 deletions.
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
@@ -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
 <Tooltip
@@ -34,63 +23,25 @@ The `aria-labelledby` prop can reference multiple ids, separated by a space. The
       <p>Lorem ipsum dolor sit amet.</p>
     </div>
   }
-  aria-label="More information"
 >
   <Text>Learn more.</Text>
 </Tooltip>
 ```
 
-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
-<Tooltip
-  content={
-    <div>
-      <p>Lorem ipsum dolor sit amet</p>
-    </div>
-  }
-  aria-label="More information"
-  aria-labelledby="tooltip-labelledby"
->
-  <Icons.AlertCircle />
-</Tooltip>
-```
-
-The screen reader will announce: `More information. Lorem ipsum dolor sit amet.`.
-
-3. Prop `id` in `<Text>` 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
-<Tooltip
-  content={
-    <div>
-      <p>Lorem ipsum dolor sit amet</p>
-    </div>
-  }
-  aria-label="More information"
-  aria-labelledby="tooltip-labelledby"
->
-  <Icons.AlertCircle />
-</Tooltip>
-<Text id="tooltip-labelledby">Learn more.</Text>
-```
-
 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
 <Tooltip
   content={
     <div>
-      <p>Lorem ipsum dolor sit amet</p>
+      <p>Lorem ipsum dolor sit amet.</p>
     </div>
   }
 >
-  <Text>Learn more.</Text>
+  <Icons.Airplane ariaLabel="More information" />
 </Tooltip>
 ```
 
-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
@@ -46,7 +46,7 @@ export const Default: Story = {
   render: args => (
     <Stack justify="center">
       <Tooltip {...args}>
-        <Icons.Airplane />
+        <Icons.Airplane ariaLabel="More information" />
       </Tooltip>
     </Stack>
   ),
@@ -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 = {
         </Stack>
       }
     >
-      <Icons.Airplane />
+      <Icons.Airplane ariaLabel="More information" />
     </Tooltip>
   ),
 
@@ -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 }) => (
     <Alert icon title="Lorem ipsum dolor sit amet" type="success">
       <Stack spacing="none">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate
@@ -204,10 +202,9 @@ export const Playground: Story = {
               <div>{content}</div>
             </div>
           }
-          aria-labelledby={ariaLabelledby}
           {...args}
         >
-          <Text id={ariaLabelledby}>{children}</Text>
+          <Text>{children}</Text>
         </Tooltip>
       </Stack>
     </Alert>
@@ -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
@@ -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}
     </TooltipPrimitive>
@@ -60,8 +56,6 @@ const Tooltip = ({
       removeUnderlinedText={removeUnderlinedText}
       stopPropagation={stopPropagation}
       block={block}
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledby}
     >
       {children}
     </MobileDialog>

diff --git 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/...s/orbit-components/src/primitives/MobileDialogPrimitive/MobileDialogPrimitive.stories.tsx b/...s/orbit-components/src/primitives/MobileDialogPrimitive/MobileDialogPrimitive.stories.tsx
@@ -30,21 +30,19 @@ const meta: Meta<typeof MobileDialogPrimitive> = {
     removeUnderlinedText: false,
     block: false,
     lockScrolling: false,
-    "aria-label": "Mobile Dialog Primitive label",
-    "aria-labelledby": "tooltip-labelledby",
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof MobileDialogPrimitive>;
 
 export const Playground: Story = {
-  render: ({ "aria-labelledby": ariaLabelledby, ...args }) => (
+  render: ({ ...args }) => (
     <Alert icon title="Lorem ipsum dolor sit amet" type="warning">
       <Stack spacing="none">
         Excepteur sint occaecat cupidatat non proident.{" "}
-        <MobileDialogPrimitive aria-labelledby={ariaLabelledby} {...args}>
-          <Text id={ariaLabelledby}>Aliquam erat volutpat.</Text>
+        <MobileDialogPrimitive {...args}>
+          <Text>Aliquam erat volutpat.</Text>
         </MobileDialogPrimitive>
       </Stack>
     </Alert>

diff --git 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<boolean>(false, 200);
@@ -78,8 +76,6 @@ const MobileDialog = ({
         enabled={enabled}
         removeUnderlinedText={removeUnderlinedText}
         block={block}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledby}
       >
         {children}
       </TooltipWrapper>

diff --git 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
@@ -42,7 +42,7 @@ export const Default: Story = {
   render: args => (
     <Stack justify="center">
       <TooltipPrimitive {...args}>
-        <Icons.Airplane />
+        <Icons.Airplane ariaLabel="More information" />
       </TooltipPrimitive>
     </Stack>
   ),
@@ -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 = {
         </Stack>
       }
     >
-      <Icons.Airplane />
+      <Icons.Airplane ariaLabel="More information" />
     </TooltipPrimitive>
   ),
 
@@ -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 }) => (
     <Alert icon title="Lorem ipsum dolor sit amet" type="warning">
       <Stack spacing="none">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate
@@ -203,10 +201,9 @@ export const Playground: Story = {
               <div>{content}</div>
             </div>
           }
-          aria-labelledby={ariaLabelledby}
           {...args}
         >
-          <Text id={ariaLabelledby}>{children}</Text>
+          <Text>{children}</Text>
         </TooltipPrimitive>
       </Stack>
     </Alert>
@@ -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
@@ -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<HTMLSpanElement | null>(null);
@@ -135,8 +133,6 @@ const TooltipPrimitive = ({
         enabled={enabled}
         removeUnderlinedText={removeUnderlinedText}
         block={block}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledby}
       >
         {children}
       </TooltipWrapper>

diff --git 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;
 }