Tile + TileGroup Accessibility

docs/src/documentation/03-components/02-structure/tile/03-accessibility.mdx

@@ -0,0 +1,34 @@
+---
+title: Accessibility
+redirect_from:
+  - /components/tile/accessibility/
+---
+
+# Accessibility
+
+## Tile
+
+The Tile component has been designed with accessibility in mind.
+
+The component offers flexibility in terms of the HTML element used for the root node. By default, it will render a `div` element.
+
+### Expandable / Clickable
+
+The prop `expandable` makes the Tile clickable. In that case, assistive props like `ariaExpanded` are handled automatically.
+
+The component will render, by default, a `div` element with `role="button"` and `tabindex={0}`.
+
+This also happens when the `onClick` prop is defined.
+
+For that reason, one should refrain from using other interactive elements inside the Tile, like buttons or links, including on the `header` prop.
+
+### Href
+
+When the `href` prop is defined, the Tile will render an `a` element inside of the `div`.
+For the same reason as above, one should refrain from using other interactive elements inside the Tile.
+
+### HTML Title
+
+The `htmlTitle` prop can be used to add extra information to the Tile.
+
+It will be added as the `title` attribute to the root element (the `div` with `role="button"`) when the `expandable` is truthy or `onClick` is defined, or to the `a` element when the `href` prop is defined.

docs/src/documentation/03-components/02-structure/tilegroup/03-accessibility.mdx

@@ -0,0 +1,24 @@
+---
+title: Accessibility
+redirect_from:
+  - /components/tilegroup/accessibility/
+---
+
+# Accessibility
+
+## TileGroup
+
+The TileGroup component has been designed with accessibility in mind.
+
+The component offers flexibility in terms of the HTML element used for the root node. By default, it will render a `div` element.
+
+If needed, it can be rendered as a list by passing the `as` prop with the value `"ul"`.
+
+In that case, the `Tile` elements used as `children` should be rendered as `li`.
+
+```jsx
+<TileGroup as="ul">
+  <Tile title="Title" as="li" />
+  <Tile title="Title" as="li" />
+</TileGroup>
+```

packages/orbit-components/src/Tile/Tile.stories.tsx

@@ -95,6 +95,7 @@ export const DefaultWithHeaderPropsAsHref: Story = {
 
   args: {
     ...DefaultWithHeaderProps.args,
+    onClick: undefined,
     href: "https://www.kiwi.com/",
     external: true,
   },
@@ -114,10 +115,8 @@ export const ExpandableWithCustomDescription: StoryObj<
           <Stack justify="between" align="center" direction="row" shrink>
             <Stack spacing="none" direction="column" shrink>
               <Stack direction="row" align="center" spacing="200">
-                <Heading type="title4" as="h4">
-                  Mr. Hot potato
-                </Heading>
-                <CountryFlag code="cz" />
+                <Heading type="title4">Mr. Hot potato</Heading>
+                <CountryFlag code="cz" name="Czechia" />
               </Stack>
               <Text>13/37/1337</Text>
             </Stack>

packages/orbit-components/src/Tile/components/TileHeader/index.tsx

@@ -84,9 +84,7 @@ const TileHeader = ({
           <Stack spacing="none" direction="column" shrink>
             {title && (
               <div className="flex w-full items-center">
-                <Heading type="title4" as="h3">
-                  {title}
-                </Heading>
+                <Heading type="title4">{title}</Heading>
               </div>
             )}
             {description && (

packages/orbit-components/src/TileGroup/TileGroup.stories.tsx

@@ -42,10 +42,8 @@ export const Playground: Story = {
               <Stack justify="between" align="center" direction="row" shrink>
                 <Stack spacing="none" direction="column" shrink>
                   <Stack direction="row" align="center" spacing="200">
-                    <Heading type="title4" as="h4">
-                      Mr. Hot potato
-                    </Heading>
-                    <CountryFlag code="cz" />
+                    <Heading type="title4">Mr. Hot potato</Heading>
+                    <CountryFlag code="cz" name="Czechia" />
                   </Stack>
                   <Text>13/37/1337</Text>
                 </Stack>

packages/orbit-components/src/utils/Slide/index.tsx

@@ -131,7 +131,7 @@ class Slide extends React.Component<Props, State> {
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
       <div
         className={cx(
-          "orbit-slide relative w-full",
+          "orbit-slide relative w-full cursor-default",
           transitionDuration && "transition-[max-height] ease-linear",
           transitionDuration && getTransitionDurationClass(transitionDuration),
           !transitionFinished && "overflow-hidden",