docs: fix dynamic group story accessibility concerns

[gavinbarron]

Closes #3125 #3126 #3127

PR Type

• Bugfix

Description of the changes

Reworks the dynamic groupid story for people picker to address a11y concerns

PR checklist

• Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
• All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
• Stories have been added and existing stories have been tested
• Added appropriate documentation. Docs PR:
• Accessibility tested and approved
• License header has been added to all new source files (yarn setLicense)
• Contains NO breaking changes

Other information

[microsoft-github-policy-service]

Thank you for creating a Pull Request @gavinbarron.

This is a checklist for the PR reviewer(s) to complete before approving and merging this PR:

• I have verified a documentation PR has been linked and is approved (or not applicable)
• I have ran this PR locally and have tested the fix/feature
• I have verified that stories have been added to storybook (or not applicable)
• I have tested existing stories in storybook to verify no regression has occured
• I have tested the solution in at least two browsers (Edge + 1 non-Chromium based browser)

[github-actions]

📖 The updated storybook is available here

[github-actions]

📖 The updated storybook is available here

[gavinbarron]

@Raisul123 I've re-worked the story to try to address the linked a11y issues. Could you please validate these changes and if there are problems with the proposed fix give us feedback and guidance as to how we should address them.

[vagpt]

Hi @gavinbarron

We have taken action on the #3125 #3126 #3127

And for the bug #3109, issue is still repro at our end. Please refer to the below snippet for the reference.

Snippet:

[github-actions]

📖 The updated storybook is available here

[github-actions]

Package	Line Rate	Branch Rate	Complexity	Health
mgt-components.src.components	86%	75%	0	✔
mgt-components.src.components.mgt-contact	68%	83%	0	➖
mgt-components.src.components.mgt-file	62%	100%	0	➖
mgt-components.src.components.mgt-file-list	46%	100%	0	❌
mgt-components.src.components.mgt-file-list.mgt-file-upload	49%	86%	0	❌
mgt-components.src.components.mgt-get	22%	100%	0	❌
mgt-components.src.components.mgt-messages	68%	100%	0	➖
mgt-components.src.components.mgt-organization	47%	100%	0	❌
mgt-components.src.components.mgt-person	82%	100%	0	✔
mgt-components.src.components.mgt-person-card	77%	49%	0	✔
mgt-components.src.components.mgt-picker	80%	100%	0	✔
mgt-components.src.components.mgt-profile	40%	100%	0	❌
mgt-components.src.components.mgt-tasks-base	87%	100%	0	✔
mgt-components.src.components.mgt-theme-toggle	100%	100%	0	✔
mgt-components.src.components.mgt-todo	79%	100%	0	✔
mgt-components.src.components.sub-components.mgt-flyout	78%	53%	0	✔
mgt-components.src.components.sub-components.mgt-spinner	100%	100%	0	✔
mgt-components.src.graph	38%	78%	0	❌
mgt-components.src.styles	92%	80%	0	✔
mgt-components.src.utils	79%	27%	0	✔
mgt-element.dist.es6.components.src.components	72%	73%	0	➖
mgt-element.dist.es6.mock.src.mock	91%	73%	0	✔
mgt-element.dist.es6.providers.src.providers	85%	76%	0	✔
mgt-element.dist.es6.src	91%	80%	0	✔
mgt-element.dist.es6.utils.src.utils	67%	71%	0	➖
mgt-element.src	93%	40%	0	✔
mgt-element.src.components	78%	100%	0	✔
mgt-element.src.mock	81%	56%	0	✔
mgt-element.src.providers	83%	100%	0	✔
mgt-element.src.utils	71%	90%	0	➖
Summary	67% (14504 / 21520)	74% (514 / 694)	0	➖

[Mnickii]

I believe this can be merged as all the issues have been addressed, except #3109 which is already addressed in PR #3114

[vagpt]

Hi @Mnickii and @gavinbarron,

This issue is still repro on the updated URL as of now it is looks like a selected text and we have seen this behavior at Fluent side as well so could you please suggest us whether do we need to follow the external process and route this bug to Fluent team or not?