From 8e505a2d21b4249163e908a5e28dfb12dd5d63ff Mon Sep 17 00:00:00 2001 From: Daniel Sil Date: Tue, 28 Jan 2025 17:40:31 +0100 Subject: [PATCH 1/4] fix(Tile): heading level is no longer enforced in TileHeader --- .../orbit-components/src/Tile/components/TileHeader/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/orbit-components/src/Tile/components/TileHeader/index.tsx b/packages/orbit-components/src/Tile/components/TileHeader/index.tsx index a98011de0a..c821cebd91 100644 --- a/packages/orbit-components/src/Tile/components/TileHeader/index.tsx +++ b/packages/orbit-components/src/Tile/components/TileHeader/index.tsx @@ -84,9 +84,7 @@ const TileHeader = ({ {title && (
- - {title} - + {title}
)} {description && ( From c4911b26c706c974b27531262eb3cebe2c6d422d Mon Sep 17 00:00:00 2001 From: Daniel Sil Date: Tue, 28 Jan 2025 17:42:05 +0100 Subject: [PATCH 2/4] chore(Slide): apply default cursor instead of pointer --- packages/orbit-components/src/utils/Slide/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/orbit-components/src/utils/Slide/index.tsx b/packages/orbit-components/src/utils/Slide/index.tsx index b0c4a6c607..da3effa274 100644 --- a/packages/orbit-components/src/utils/Slide/index.tsx +++ b/packages/orbit-components/src/utils/Slide/index.tsx @@ -131,7 +131,7 @@ class Slide extends React.Component { // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
Date: Tue, 28 Jan 2025 17:42:31 +0100 Subject: [PATCH 3/4] chore: fix a11y in Tile and TileGroup stories --- packages/orbit-components/src/Tile/Tile.stories.tsx | 7 +++---- .../orbit-components/src/TileGroup/TileGroup.stories.tsx | 6 ++---- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/orbit-components/src/Tile/Tile.stories.tsx b/packages/orbit-components/src/Tile/Tile.stories.tsx index 36384dd73b..85f090030a 100644 --- a/packages/orbit-components/src/Tile/Tile.stories.tsx +++ b/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< - - Mr. Hot potato - - + Mr. Hot potato + 13/37/1337 diff --git a/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx b/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx index 526de45aa8..0370802bc6 100644 --- a/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx +++ b/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx @@ -42,10 +42,8 @@ export const Playground: Story = { - - Mr. Hot potato - - + Mr. Hot potato + 13/37/1337 From 95296c966bf7ad748589bb37fe1367b5101e76c8 Mon Sep 17 00:00:00 2001 From: Daniel Sil Date: Thu, 30 Jan 2025 12:28:36 +0100 Subject: [PATCH 4/4] docs: add accessibility docs to Tile and TileGroup --- .../02-structure/tile/03-accessibility.mdx | 34 +++++++++++++++++++ .../tilegroup/03-accessibility.mdx | 24 +++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 docs/src/documentation/03-components/02-structure/tile/03-accessibility.mdx create mode 100644 docs/src/documentation/03-components/02-structure/tilegroup/03-accessibility.mdx diff --git a/docs/src/documentation/03-components/02-structure/tile/03-accessibility.mdx b/docs/src/documentation/03-components/02-structure/tile/03-accessibility.mdx new file mode 100644 index 0000000000..21c14f0a35 --- /dev/null +++ b/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. diff --git a/docs/src/documentation/03-components/02-structure/tilegroup/03-accessibility.mdx b/docs/src/documentation/03-components/02-structure/tilegroup/03-accessibility.mdx new file mode 100644 index 0000000000..c20197b67c --- /dev/null +++ b/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 + + + + +```