Implement roving tabindex on the Image block #22696
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
diegohaz
added
[Focus] Accessibility (a11y)
|
Size Change: +62 B (0%) Total Size: 1.12 MB
ℹ️ View Unchanged
|
diegohaz
requested review from
ajitbohra,
jorgefilipecosta,
Soean and
talldan
as code owners
diegohaz
commented
Jun 4, 2020
Comment on lines
+213
to
+248
| <ToolbarItem> | ||
| { ( toggleProps ) => ( | ||
| <DropdownMenu | ||
| icon={ <RotateLeftIcon /> } | ||
| label={ __( 'Rotate' ) } | ||
| popoverProps={ POPOVER_PROPS } | ||
| toggleProps={ toggleProps } | ||
| controls={ [ | ||
| { | ||
| icon: <RotateLeftIcon />, | ||
| title: __( 'Rotate left' ), | ||
| isDisabled: inProgress, | ||
| onClick: () => | ||
| this.adjustImage( | ||
| 'rotate', | ||
| { | ||
| angle: -ROTATE_STEP, | ||
| } | ||
| ), | ||
| }, | ||
| { | ||
| icon: <RotateRightIcon />, | ||
| title: __( 'Rotate right' ), | ||
| isDisabled: inProgress, | ||
| onClick: () => | ||
| this.adjustImage( | ||
| 'rotate', | ||
| { | ||
| angle: ROTATE_STEP, | ||
| } | ||
| ), | ||
| }, | ||
| ] } | ||
| /> | ||
| ) } | ||
| </ToolbarItem> |
There was a problem hiding this comment.
The diff got messed up. But this is basically wrapping <DropdownMenu> with <ToolbarItem> and passing the toolbar item props to toggleProps:
<ToolbarItem>
{ ( toggleProps ) => (
<DropdownMenu
...
toggleProps={ toggleProps }
/>
) }
</ToolbarItem>
gziolo
approved these changes
Jun 4, 2020
There was a problem hiding this comment.
There is this features that hide whitespace changes:
It isn't perfect but it helps to review PRs that contain indentation changes like in here.
It seems like the sooner we add deprecation message the better. #21024 introduced some code that uses the old approach.
ajlende
approved these changes
Jun 4, 2020
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.
This PR is part of #18619, whose main goal is to implement roving tabindex on the
@wordpress/components'Toolbarcomponent and to use it on the header and block toolbars so they become a single tab stop as recommended by the WAI-ARIA Toolbar Pattern. Related issues are #15331 and #3383.This PR continues the work done in #20008, but specifically for the Image, Cover and Media & Text blocks.
How to test
Check Image, Cover and Media & Text blocks toolbars. Use Tab and arrow keys to move focus.