docs(react-keytips): add specification #228
Merged
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
mainframev
force-pushed
the
docs/keytips-spec
branch
from
5cb0149 to
5d689d4
Compare
Co-authored-by: Valentyna <[email protected]>
mainframev
force-pushed
the
docs/keytips-spec
branch
from
e820e46 to
4eb9ad8
Compare
mainframev
force-pushed
the
docs/keytips-spec
branch
from
4eb9ad8 to
92fec86
Compare
mainframev
force-pushed
the
docs/keytips-spec
branch
from
325a730 to
ef270d2
Compare
ValentinaKozlova
approved these changes
Sep 4, 2024
mainframev
commented
Sep 4, 2024
Comment on lines
+193
to
+203
| ## Accessibility | ||
|
|
||
| In terms of accessibility, `Keytip` component is very similar to `Tooltip` - it's a small popup that displays information related to an element, with difference, that `Keytip` can't be displayed by mouse hover over target element. Multiple keytips can be visible at the same time. | ||
|
|
||
| - Each `Keytip` is assigned the role `"tooltip"`. | ||
| - The `Keytip` target element references the corresponding keytip element using the `"aria-describedby"` attribute, providing a clear association between the target and the keytip (tooltip). | ||
| - `Keytips` component has `content` prop, which is responsible for adding the `"aria-describedby"` for default start key sequence. | ||
| - `Keytip` is not focusable. | ||
| - `Keytip` adds `"aria-keyshortcuts"` attribute to the target element, which contains the key sequence that will trigger the keytip. | ||
| - Unlike Tooltip, pressing `Escape` does not always hide the `Keytip`. By default, `Keytip` is configured to use `Escape` as a return sequence. Therefore, if there are ancestor keytips, pressing it will not hide the current `Keytip` but will instead display the ancestor keytips. | ||
| - Focus stays on the trigger element while `Keytip` is displayed. |
There was a problem hiding this comment.
@smhigley 👋🏻
Here are a couple of a11y things I am not sure about:
- Can
Keytiphave role"tooltip"? (in the previous version there was no role for Keytip) - In
v8Keytip was adding aaria-describedbyon the target element with id of the root layer and current keytip (so it's announcing start sequence and sequence of current keytip). - In the current draft implementation I added both (aria-describedby and aria-keyshortcuts), so after the
aria-describedbyannounced it will announceshortcuts availableofaria-keyshortcuts. So, question if we can have both? or if not, which way is better in your opinion?
I'd be very grateful if you could take a look on this :)
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.
Initial specification for
Keytips, might be adjusted after further implementation changes.Design spec in Figma