Adding support for defined IDs in `TextControl` component by andrewhayward · Pull Request #52028 · WordPress/gutenberg

andrewhayward · 2023-06-28T10:19:20Z

What?

This PR adds support to the TextControl component to accept an optional id prop. It currently ignores them, and generates its own.

Why?

As per #24749, it is sometimes useful to provide components with a defined ID (for example, if you need to reference the control with an aria-* attribute elsewhere). Ideally all components would work this way (but that is outside the scope of this patch).

How?

Currently, TextControl uses useInstanceId to generate an ID. As with other components (see SelectControl, for example), this is now only used if an id prop is not passed in. This retains backwards compatibility, and for most use-cases will have minimal impact; IDs will continue to be generated and applied.

Testing Instructions

Unit tests have been added to verify the expected behaviour:

Confirms that IDs are generated and applied, is previously
Confirms that ID is used if provided
Confirms that the <label> receives the ID and has a correct for attribute

This can also be confirmed manually:

Create an instance of a TextControl, providing both id and label props
Check that the id and for attributes match on the generated <input> and <label> respectively
Additionally, clicking on the <label> should put focus on the <input>

Testing Instructions for Keyboard

Although this does not impact first-line keyboard access, similar manual testing can be done using a screen reader:

Create an instance of a TextControl, providing both id and label props
Navigate to the generated <label> and action it (⌃ Control + ⌥ Option + Space with VoiceOver, for example); focus should move to the <input>
Navigate to the generated <input> and confirm that it has a label matching the label prop

This patch adds support for custom IDs in the `TextControl` component. Currently any passed ID prop is ignored, and a auto-generated value is used instead. --- Resolves WordPress#24749

github-actions · 2023-06-28T10:19:46Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @andrewhayward! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

chad1008

Pending a changelog entry, this LGTM 🚀 🚢

mirka

Congrats on your first PR, and thank you for adding tests! 💛

mirka · 2023-06-29T20:59:19Z

packages/components/src/text-control/test/text-control.tsx

+		const textbox = screen.getByRole( 'textbox' );
+		const label = screen.getByText( labelValue );
+		expect( textbox ).toHaveAttribute( 'id', label.getAttribute( 'for' ) );


Nit: Not that this is inherently wrong, but I find it more idiomatic/robust within the testing-library context to simply assert that the textbox is accessibly labeled, rather than assert the implementation details.

Suggested change

const textbox = screen.getByRole( 'textbox' );

const label = screen.getByText( labelValue );

expect( textbox ).toHaveAttribute( 'id', label.getAttribute( 'for' ) );

expect( screen.getByRole( 'textbox', { name: labelValue } ) ).toBeVisible();

☝️ Something like that. What do you think?

I don't have much experience with testing-library, and I didn't know you could do this! That makes much more sense.

mirka · 2023-06-29T21:01:28Z

packages/components/src/text-control/index.tsx

+function useUniqueId( idProp?: string ) {
+	const instanceId = useInstanceId( TextControl );


FYI we can pass the id prefix and the idProp directly into the useInstanceId() function to avoid this custom code ✨

gutenberg/packages/compose/src/hooks/use-instance-id/index.ts

Lines 40 to 48 in 10d927c

/**

* Provides a unique instance ID.

*

* @param object Object reference to create an id for.

* @param [prefix] Prefix for the unique id.

* @param [preferredId] Default ID to use.

* @return The unique instance id.

*/

function useInstanceId(

I noticed this, and strongly considered using it. But the useUniqueId pattern seemed to be in quite a few places already, which made me second guess myself.

I'm quite happy to apply useInstanceId "properly" here though, if that's actually the more appropriate direction.

I'm quite happy to apply useInstanceId "properly" here though, if that's actually the more appropriate direction.

Yes, I think it is. I have a feeling that the existing useUniqueId patterns were written before useInstanceId was expanded to take three arguments.

Changing the test setup for labels to be more `testing-library` idiomatic.

Adding line item under Enhancements to include `TextControl` changes.

…s_contains_an_id

Dropping the old `useUniqueId` pattern in favour of the more succinct and complete `useInstanceId` usage.

mirka

Great work, thank you! 🎉

github-actions · 2023-07-12T17:24:56Z

Congratulations on your first merged pull request, @andrewhayward! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

…dd/defer-script-loading-strategy * 'trunk' of https://github.com/WordPress/gutenberg: Update Changelog for 16.2.0 Adding support for defined IDs in `TextControl` component (#52028) Bump plugin version to 16.2.0 Revert "Bump plugin version to 16.2.0" Bump plugin version to 16.2.0 Add maxLength to LinkControl search items (#52523) [RNMobile] Update Editor block inserter button styles and default text input placeholder/selection styles (#52269) Site Editor: Reset device preview type when exiting the editing mode (#52566) Trim footnote anchors from excerpts (#52518) Add back old Navigation and File blocks JavaScript implementation when Gutenberg is not installed (#52553) Block Editor: Ensure synced patterns are accounted for in 'getAllowedBlocks' (#52546) Fix md5 class messed up with new block key (#52557) Fix entity cache misses for single posts due to string as recordKey (#52338) Make "My patterns" permanently visible (#52531) Hide site hub when resizing frame upwards to avoid overlap (#52180) Fix "Manage all patterns" link appearance (#52532) Update navigation menu title size & weight in detail panels (#52477) Site Editor Patterns: Ensure sidebar does not shrink when long pattern titles are used (#52547) Site Editor: Restore quick inserter 'Browse all' button (#52529) Patterns: update the title of Pattern block in the block inspector card (#52010)

Adding support for defined IDs in TextControl

4eefca5

This patch adds support for custom IDs in the `TextControl` component. Currently any passed ID prop is ignored, and a auto-generated value is used instead. --- Resolves WordPress#24749

andrewhayward requested a review from ajitbohra as a code owner June 28, 2023 10:19

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jun 28, 2023

ciampo requested review from ciampo and mirka June 28, 2023 11:11

mirka assigned andrewhayward Jun 28, 2023

ciampo requested a review from chad1008 June 28, 2023 14:25

chad1008 approved these changes Jun 29, 2023

View reviewed changes

mirka reviewed Jun 29, 2023

View reviewed changes

mirka linked an issue Jul 3, 2023 that may be closed by this pull request

TextControl: label not connecting to input if props contains an id #24749

Closed

Andrew Hayward added 4 commits July 11, 2023 16:49

Updating tests

47f6089

Changing the test setup for labels to be more `testing-library` idiomatic.

Updating CHANGELOG

7f14443

Adding line item under Enhancements to include `TextControl` changes.

Merge branch 'trunk' into 24749/label_not_connecting_to_input_if_prop…

2f1f2a5

…s_contains_an_id

Fixing use of useInstanceId

9da368d

Dropping the old `useUniqueId` pattern in favour of the more succinct and complete `useInstanceId` usage.

mirka approved these changes Jul 12, 2023

View reviewed changes

mirka merged commit 357afa8 into WordPress:trunk Jul 12, 2023

github-actions bot added this to the Gutenberg 16.3 milestone Jul 12, 2023

mburridge added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels Jul 18, 2023

properlypurple mentioned this pull request Oct 11, 2023

6.4 Dev Note Tracking Issue #54998

Closed

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding support for defined IDs in `TextControl` component#52028

Adding support for defined IDs in `TextControl` component#52028
mirka merged 5 commits intoWordPress:trunkfrom
andrewhayward:24749/label_not_connecting_to_input_if_props_contains_an_id

andrewhayward commented Jun 28, 2023

Uh oh!

github-actions bot commented Jun 28, 2023

Uh oh!

chad1008 left a comment •

edited

Loading

Uh oh!

mirka left a comment

Uh oh!

mirka Jun 29, 2023

Uh oh!

andrewhayward Jul 4, 2023

Uh oh!

mirka Jun 29, 2023

Uh oh!

andrewhayward Jul 4, 2023

Uh oh!

mirka Jul 11, 2023

Uh oh!

mirka left a comment

Uh oh!

github-actions bot commented Jul 12, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		function useUniqueId( idProp?: string ) {
		const instanceId = useInstanceId( TextControl );

	/**
	* Provides a unique instance ID.
	*
	* @param object Object reference to create an id for.
	* @param [prefix] Prefix for the unique id.
	* @param [preferredId] Default ID to use.
	* @return The unique instance id.
	*/
	function useInstanceId(

Conversation

andrewhayward commented Jun 28, 2023

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Uh oh!

github-actions bot commented Jun 28, 2023

Uh oh!

chad1008 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mirka left a comment

Choose a reason for hiding this comment

Uh oh!

mirka Jun 29, 2023

Choose a reason for hiding this comment

Uh oh!

andrewhayward Jul 4, 2023

Choose a reason for hiding this comment

Uh oh!

mirka Jun 29, 2023

Choose a reason for hiding this comment

Uh oh!

andrewhayward Jul 4, 2023

Choose a reason for hiding this comment

Uh oh!

mirka Jul 11, 2023

Choose a reason for hiding this comment

Uh oh!

mirka left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 12, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

chad1008 left a comment •

edited

Loading