Update @ariakit/react to 0.4.13 #65907
Open
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
|
Size Change: +546 B (+0.03%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
ciampo
force-pushed
the
update/ariakit-0-4-12
branch
from
7b4345a
to
c462f05
Compare
ciampo
force-pushed
the
update/ariakit-0-4-12
branch
from
c462f05
to
358b229
Compare
An error occurred while trying to automatically change base from
update/npm-dedupe
to
trunk
October 7, 2024 13:27
ciampo
force-pushed
the
update/ariakit-0-4-12
branch
from
358b229
to
9564d6f
Compare
|
After investigating the unit test failures, it seems like it could be a regression coming from ariakit. I've opened ariakit/ariakit#4180 to confirm whether that's the case. |
ciampo
force-pushed
the
update/ariakit-0-4-12
branch
from
62aa1f8
to
cf400cb
Compare
ciampo
added
[Type] Enhancement
That was indeed an ariakit regression that we caught on our end. A new version with the fix ( There are still some Otherwise, folks can already start to review the code changes and smoke test affected components |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
That's an interesting case to look into. Somehow the change to make composite items tabbable on invalid gutenberg/test/e2e/specs/editor/various/navigable-toolbar.spec.js Lines 197 to 203 in 5c51436 It appears that I think this highlights a broader issue with Adding something like gutenberg/packages/block-editor/src/components/block-controls/slot.js Lines 21 to 32 in e89e988 |
|
@diegohaz it sounds like the correct fix would be to somehow trigger a re-render when the toolbar is moved from inline to fixed (and vice-versa)? |
I'm curious why it did't manifest before, while now it fails consistently. What might have changed in the latest couple of ariakit versions? |
Here's my theory: Ariakit now makes composite items (including toolbar items) tabbable when the Those block controls apparently were already receiving a stale store, but since they weren't tabbable before, pressing Shift+Tab would move focus to the first item in the toolbar (which is not in a Slot/Fill). Somehow, this triggered a rerender on I didn't test this thoroughly, but it's not making sense to me that BlockControlsSlot doesn't automatically rerenders when the store changes despite having |
|
ariakit/ariakit#4202 may help with this specific failing test in the next version of Ariakit, but I believe there's still an underlying issue with slots or elements inside fills not receiving the correct context value, so this might just be sweeping the problem under the rug. This is especially concerning to me:
|
ciampo
force-pushed
the
update/ariakit-0-4-12
branch
from
cf400cb
to
b61a2d3
Compare
ciampo
force-pushed
the
update/ariakit-0-4-12
branch
from
b61a2d3
to
0d43fd4
Compare
oandregal
reviewed
Oct 21, 2024
| @@ -28,7 +28,7 @@ | |||
| "types": "build-types", | |||
| "sideEffects": false, | |||
| "dependencies": { | |||
| "@ariakit/react": "^0.4.10", | |||
There was a problem hiding this comment.
For DataViews, I tested that list view's keyboard interactions still work as expected. Then, I also did some smoke testing of other places where I've seen it in use (modals, filters) and have nothing to report.
|
I pushed a fix for the The I'll file this fix also as a separate PR. |
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.
What?
@ariakit/reactfrom0.4.10to0.4.13@ariakit/testfrom0.4.2to0.4.5DropdownMenuandCompositethat are now provided directly byariakitWhy?
How?
package.jsonfiles, remove all references to the target dependenciesnpm cache clean --force && npm run distclean && npm installto update thepackage-lock.jsonfilepackage.jsonfiles, re-adding the target dependencies with the latest versionsnpm cache clean --force && npm run distclean && npm installto update thepackage-lock.jsonfileTesting Instructions
Composite,Tabs,TabPanel,DropdownMenuV2,CustomSelectControl,Toolbar,Disclosure,Divider,RadioGroup,ToggleGroupControl,TooltipLooking at the release notes, here are the changes that could affect us:
data-focus-visibleattribute applied synchronously — which should fix a couple of bugs that we noticed in the past (DropdownMenuV2: fix active and focus-visible item glitches #64942, Tabs: unify vertical tabs styles #65387 (comment)). I removed the custom workaround on our side.Composite-based components have their elements tabbable if the id of the active composite item doesn't correspond to an element in the DOM. I removed the custom workaround added in Composite: make items tabbable if active element gets removed #65720Full changelog
`@ariakit/react` release notes
@ariakit/react@0.4.13
Accessible composite widgets with invalid
activeIdWe've improved the logic for composite widgets such as Tabs and Toolbar when the
activeIdstate points to an element that is disabled or missing from the DOM. This can happen if an item is dynamically removed, disabled, or lazily rendered, potentially making the composite widget inaccessible to keyboard users.Now, when the
activeIdstate is invalid, all composite items will remain tabbable, enabling users to Tab into the composite widget. Once a composite item receives focus or the element referenced by theactiveIdstate becomes available, the roving tabindex behavior is restored.Other updates
focusShift.onChangefrom triggering on radios that are already checked.DisclosureContentsetting an incorrectanimatingstate value during enter animations.@ariakit/react-core@0.4.13@ariakit/react@0.4.12
Tab panels with scroll restoration
Ariakit now supports scroll restoration for the
TabPanelcomponent. This allows you to control whether and how the scroll position is restored when switching tabs.To enable scroll restoration, use the new
scrollRestorationprop:By default, the scroll position is restored when switching tabs. You can set it to
"reset"to return the scroll position to the top of the tab panel when changing tabs. Use thescrollElementprop to specify a different scrollable element:Full height dialogs and on-screen virtual keyboards
A new
--dialog-viewport-heightCSS variable has been added to the Dialog component. This variable exposes the height of the visual viewport, considering the space taken by virtual keyboards on mobile devices. Use this CSS variable when you have input fields in your dialog to ensure it always fits within the visual viewport:Overriding composite state for specific methods
The
next,previous,up, anddownmethods of the composite store now accept an object as the first argument to override the composite state for that specific method. For example, you can pass a differentactiveIdvalue to thenextmethod so it returns the next item based on that value rather than the current active item in the composite store:It's important to note that the composite state is not modified when using this feature. The state passed to these methods is used solely for that specific method call.
Other updates
Tabto pass therowIdprop when used with other composite widgets.@ariakit/react-core@0.4.12@ariakit/react@0.4.11
Tabs inside animated Combobox or Select
When rendering Tab inside Combobox or Select, it now waits for the closing animation to finish before restoring the tab with the selected item. This should prevent an inconsistent UI where the tab is restored immediately while the content is still animating out. See Select with Combobox and Tabs.
Other updates
activeIdupon closing the popover.data-focus-visibleattribute.MenuButtonhiding the menu on Safari.@ariakit/react-core@0.4.11`@ariakit/test` release notes
@ariakit/test@0.4.5
@ariakit/core@0.4.12@ariakit/test@0.4.4
pointerTypevalue ofmouse.@ariakit/core@0.4.11@ariakit/test@0.4.3
@ariakit/core@0.4.10