Tile + TileGroup Accessibility #4606
Open
+65
−12
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Deploying orbit with
|
| Latest commit: |
95296c9
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://dc4a1d49.orbit.pages.dev |
| Branch Preview URL: | https://dsil-tile-accessibility.orbit.pages.dev |
|
Storybook staging is available at https://kiwicom-orbit-dsil-tile-accessibility.surge.sh Playroom staging is available at https://kiwicom-orbit-dsil-tile-accessibility.surge.sh/playroom |
|
Size Change: +1 B (0%) Total Size: 459 kB
ℹ️ View Unchanged
|
|
|
||
| ### Expandable / Clickable | ||
|
|
||
| The prop `expandable` makes the Tile clickable. In that case, assistive props like `ariaExpanded` are handled automatically. |
There was a problem hiding this comment.
I would maybe use aria-expanded here as that's the name and it's not a custom one, wdyt?
|
|
||
| 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. |
There was a problem hiding this comment.
It will be added as the
titleattribute to the root element (thedivwithrole="button") when theexpandableis truthy
Is this correct? When the expandable is truthy, we render TileExpandable which then passes htmlTitle to TileWrapper but then inside the TileWrapper, title with htmlTitle is set only on the a element, not also on WrapperComponent. Or maybe I am looking at the wrong place 🙈
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Heading level inside Tile is no longer enforced.
Accessibility documentation for the Tile and TileGroup components added.
Fixed some accessibility issues in Tile and TileGroup stories.
Fixed the cursor on the Slide component (used in Tile).
FEPLT-2232
✨
Description by Callstackai
This PR enhances accessibility for the Tile and TileGroup components, adds documentation, and fixes cursor issues in the Slide component.
Diagrams of code changes
sequenceDiagram participant User participant Tile participant TileGroup participant Accessibility User->>Tile: Interacts with Tile alt Expandable/Clickable Tile Tile->>Accessibility: Renders div with role="button" Accessibility->>Tile: Adds tabindex={0} else Tile with href Tile->>Accessibility: Renders anchor element Accessibility->>Tile: Adds href attributes end User->>TileGroup: Views TileGroup alt TileGroup as List TileGroup->>Accessibility: Renders as <ul> Tile->>Accessibility: Renders as <li> else Default TileGroup TileGroup->>Accessibility: Renders as <div> end Note over Tile,Accessibility: Both components enhanced with<br/>accessibility featuresFiles Changed
This PR includes files in programming languages that we currently do not support. We have not reviewed files with the extensions
.mdx. See list of supported languages.