RAC Pending Button #6435
RAC Pending Button #6435
Conversation
# Conflicts: # packages/react-aria-components/stories/Button.stories.tsx
| /** | ||
| * What to render as children while pending state is true. | ||
| */ | ||
| renderPendingState?: (props: ButtonRenderProps) => ReactNode |
There was a problem hiding this comment.
As per your questions in the description:
I think this naming and passing in the render props is fine. No need to set a default pending state renderer too IMO, we can just make that the user's responsibility IMO.
# Conflicts: # packages/react-aria-components/package.json
| <div | ||
| style={{display: 'contents'}} | ||
| id={containerId} | ||
| aria-atomic> | ||
| {renderProps.children} | ||
| </div> |
There was a problem hiding this comment.
As a user of RAC I'm a bit concerned about the overhead of 1 additional HTML element within each button. No matter if isPending is ever used or not. Buttons are a very frequently used component and it should be as slim as possible IMO.
There was a problem hiding this comment.
What are you worried about with the addition of one more HTML element? Is there a concrete issue? Buttons are already not what I would consider slim, see this three part blog series on building a button https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
I'd love not to need these extra elements, but I haven't found a good way to handle the announcements without it so far.
Theoretically, buttons should just re-announce when you have focus on them and the contents change. However, this isn't true in practice. https://a11ysupport.io/tests/tech__html__button-name-change and even the ones that say they have support have different kinds of support.
When the button enters the pending state, we want that to be the first thing read. For an element which can appear and disappear, I think it makes more sense to keep it as the second sibling though so it doesn't push the original label out of the way if someone wants to keep the original label visible.
Someone could still visually change that with flex order, however, I didn't want to impose that on all buttons unexpectedly.
In order to get everything announced in the right order without double announcing, we use aria-atomic so the screen reader doesn't read off anything past the content except what we wish by joining together aria-labelledby.
We'll keep thinking on it and thanks for the feedback.
There was a problem hiding this comment.
I just remember that you should keep the amount of DOM nodes as low as possible. I think that's especially important in such a base building block like a component library/design system so you have room on application-level.
|
## API Changes
unknown top level export { type: 'any' } |
Closes
I've opted to re-implement it in RAC as opposed to pushing it down into the hooks because the hacks we use to work around AT require a bunch of dom nodes, which either leads to a lot of oddly named collections of element props being returned by the useButton hook, or a new hook which handles it. Either way results in API additions which would be not great to maintain.
Reminder, in Safari, you must use VO+space to click the button in order to get the announcement.
API questions:
Do we want to give renderProps to the pending state?
Default pending state? or make pending props an object such that we can require the pending ReactNode if isPending is set true.
Names of props, not sure what to call
renderPendingState, I structured it afterrenderEmptyState.✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: