Question about the PeoplePicker and the HTML rendered

[GarthMartin]

2-pronged question, but both about the HTML being rendered. I apologize if missing info, but I am new to React and these components.

We are building a SPFX web part to do correspondence tracking. I have one page where I need 2 peoplepickers on the page for different purposes.

When I try to validate the HTML rendered I get duplicate ID's on the <div id="people"> and <div id="pntp">, because of course have 2 pickers on the page.

The other thing I have noticed is that the label generated is not associated with the input control generated for the picker when using the options:

<PeoplePicker
                context={{
                  ...context,
                  absoluteUrl: context.pageContext.web.absoluteUrl,
                  msGraphClientFactory: context.msGraphClientFactory,
                  spHttpClient: context.spHttpClient,
                }}
                titleText={t('groups.selectOwner')}
                required={true}
                personSelectionLimit={1}
                groupName={""} // Leave this blank for no group
                showtooltip={true}
                principalTypes={[PrincipalType.User]}
                resolveDelay={1000}
                onChange={ownerSearchOnChange}
                defaultSelectedUsers={selectedUsers}
              />
        </div>

Both these items are going to trigger accessibility issues. Am I missing something?

On another note, the required=true does not seem to make the field mandatory if no user has been selected, but that's likely a subject for another post.

[github-actions]

Thank you for submitting your first issue to this project.

[michaelmaillot]

Hi @GarthMartin,

Thanks for raising this.

Regarding the IDs you're refering to, in the code there's indeed a static ID for both the div that wraps the picker and the Fluent UI TooltipHost which is used when showtooltip prop is true. These ones should be removed to avoid HTML identifiers conflict, as they're not used.

Regarding the label generated alongside the picker and the required prop, you're right. This was because, back in the days, the Fluent UI BasePicker (on which the NormalPeoplePicker is based, under the hood of PnP Control PeoplePicker) had neither the label nor the required attributes. But recently, there was an update on this component, so we should be able to update the PeoplePicker accordingly. But first, we have to update Fluent UI version.

So I see here two enhancements to declare as issues:

• One for removing the unused HTML IDs
• One for updating the control after Fluent UI's upgrade, to better integrate required & label props

Does it sound good to you?