[typings] add supported htmlFor prop to FormGroupLabelProps definition

[shiftkey]

FormGroup.Label supports a htmlFor prop in the docs to associated the label with a text input: https://primer.style/components/FormGroup#formgrouplabel

However the TS declarations do not indicate this is a supported prop:

Omitting this value causes axe to report accessibility violations, so I added in the missing value (optional, just to match the docs).

Screenshots

N/A

Merge checklist

• Added or updated TypeScript definitions (index.d.ts) if necessary
• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: e841e15

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-components/90fz93v37
✅ Preview: https://primer-components-git-fork-shiftkey-add-missing-prop.primer.now.sh

[colebemis]

Thanks for the PR, @shiftkey! I left a suggestion on how we can write the type definition without having to list HTML attributes by hand.

Also FYI, we're in the process of rewriting all of Primer React Components in TypeScript. So hopefully typing errors like this will soon be a thing of the past 😄 #970

[colebemis]

Hmm, it's strange that React.HTMLAttributes<HTMLLabelElement> doesn't include htmlFor. React.ComponentPropsWithRef<'label'> should do the trick though. I recently learned that ComponentPropsWithRef is the preferred way to get props of HTML elements anyway (link).

Suggested change

	export interface FormGroupLabelProps extends CommonProps, TypographyProps, Omit<React.HTMLAttributes<HTMLLabelElement>, 'color'> {
	htmlFor?: string
	}
	export interface FormGroupLabelProps extends CommonProps, TypographyProps, Omit<React.ComponentPropsWithRef<'label'>, 'color'> {}

[colebemis]

Oops, I just tried this locally and I'm getting errors. I'm fine with merging the PR as-is since we're about to replace this whole index.d.ts file very soon.

[shiftkey]

For extra context, I see the @types/react version of LabelHTMLAttributes has the field:

interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
    form?: string;
    htmlFor?: string;
}

However HTMLLabelElement in @types/react doesn't seem to have this information:

interface HTMLLabelElement extends HTMLElement { }

I think this would be the fix without duplicating htmlFor but that feels like a big hammer given the refactorings underway:

export interface FormGroupLabelProps extends CommonProps, TypographyProps, Omit<LabelHTMLAttributes, 'color'> {}