Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CustomSelectControl: Restore describedBy functionality #63957

Merged
merged 3 commits into from
Jul 26, 2024

Conversation

mirka
Copy link
Member

@mirka mirka commented Jul 25, 2024

Fixes #63568

What?

Restores the describedBy functionality in CustomSelectControl (v1) that was broken when we switched the underlying implementation in #63258.

How?

See code comments.

Testing Instructions

New unit tests should pass. You can also manually inspect the rendered HTML in Storybook.

@mirka mirka added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components labels Jul 25, 2024
@mirka mirka self-assigned this Jul 25, 2024
Comment on lines +195 to +199
<VisuallyHidden>
<span id={ descriptionId }>
{ getDescribedBy( currentValue, describedBy ) }
</span>
</VisuallyHidden>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The original implementation passed the describedBy prop down to Button. Therefore, we want to replicate how Button rendered the describedBy text.

<VisuallyHidden>
<span id={ descriptionId }>{ description }</span>
</VisuallyHidden>

Comment on lines +45 to +52
function getDescribedBy( currentValue: string, describedBy?: string ) {
if ( describedBy ) {
return describedBy;
}

// translators: %s: The selected option.
return sprintf( __( 'Currently selected: %s' ), currentValue );
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function copies the original logic, which looked like this:

function getDescribedBy() {
if ( describedBy ) {
return describedBy;
}
if ( ! selectedItem ) {
return __( 'No selection' );
}
// translators: %s: The selected option.
return sprintf( __( 'Currently selected: %s' ), selectedItem.name );
}

I removed the case for no selection, because that won't happen in this Ariakit-based version.

// Forward props + store from v2 implementation
const store = Ariakit.useSelectStore( {
const store = Ariakit.useSelectStore< string >( {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Ariakit store allows string | string[] because it can handle multiple selection. Since this v1 never supported multiple selection, let's narrow the type to just string. (This has the effect of narrowing the type of store.getState().value to string.)

@mirka mirka marked this pull request as ready for review July 25, 2024 19:01
@mirka mirka requested a review from ajitbohra as a code owner July 25, 2024 19:01
Copy link

github-actions bot commented Jul 25, 2024

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: mirka <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: afercia <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@mirka mirka requested review from afercia and a team July 25, 2024 19:03
@mirka mirka added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Jul 25, 2024
@afercia afercia added [Type] Regression Related to a regression in the latest release and removed [Type] Bug An existing feature does not function as intended labels Jul 26, 2024
Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Code looks good, and this tests well:

Without describedBy With describedBy
Screenshot 2024-07-26 at 13 00 42 Screenshot 2024-07-26 at 13 01 03

@afercia
Copy link
Contributor

afercia commented Jul 26, 2024

Please remember to manually add props to @rohitmathur-7 for the alternative PR at #63884

@mirka mirka merged commit c2bf14f into trunk Jul 26, 2024
74 checks passed
@mirka mirka deleted the fix/custom-select-describedby branch July 26, 2024 15:57
@github-actions github-actions bot added this to the Gutenberg 19.0 milestone Jul 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Type] Regression Related to a regression in the latest release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CustomSelectControl: fix describedBy implementation and docs
3 participants