[MGTP-Components-Samples-General-Localization-Add me]: Visual labels are not defined for the ‘Task name’ and ‘Add a Task date’ fields.

[Raisul123]

Test Environment: OS Build: Windows 11  Version: 22H2 (OS Build 25300.1000)  Browser: Edge dev  Browser Version 114.0.1807.5 (Official build) dev (64-bit) URL: Components / mgt-agenda / Properties - Preferred Timezone ⋅ Storybook Screen reader: Narrator

Repro Steps:

1. Open the above URL and login with valid credentials.
2. Turn on Narrator using ‘Ctrl+win+enter’ keys.
3. The ‘Microsoft Graph Toolkit Playground' Overview page will get displayed.
4. Navigate to the 'Components' button using tab key and expand it.
5. Navigate to 'Samples' button using tab key and expand it.
6. Navigate to 'General' button using arrow key and expand it.
7. Navigate to 'Localization' link using arrow key and activate it.
8. Navigate to ‘Add me’ button using tab key and activate it.
9. Navigate on the ‘Task name’ ,’Select Date’ fields using tab key.
10. Observe the issue with the screen reader announcement.

Actual Result: There is no visually label for ‘Task name’ and ‘Add a Task date’ fields.

Observation: Also, Asterisk symbol is not provided for ‘Task name’ text field to visually indicate the required field.

Expected Result: A visual label should be provided for the ‘Task name’ and ‘Add a Task date’ fields. The asterisk symbol should be defined for ‘Task name’ text field and the screen reader should announce the ‘Required’ information when focus lands on it.

Note:

1. Same issue reproduces for all fields throughout ‘Samples’ section where visual labels are not provided for the fields.
2. This issue will impact sighted users.

User Impact: Visual users will be affected if the visual label is not defined for the fields, they will not know the purpose of control.

WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions

"Have feedback to share on Bugs? Please help fill Trusted Tester Bug Feedback (office.com) “

Attachment:

[ghost]

Hello Raisul123, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[gavinbarron]

This needs a redesign of the component to include visual labels for the form inputs

[vagpt]

Hi @gavinbarron

Could you please let us know the ETA to fix this issue?

[sebastienlevert]

This still reproes. @yejuntak can you have a look and propose a quick design change for this one to include label?