[Accessibility] [Microsoft Graph Toolkit Playground - mgt-file-list-Style-Dark Theme]: Ensures every form element has a label.[Sev3][WCAG1.3.1]

[SrujanaAnaganti]

Test Environment: OS Build: Windows 11 Version: 21H2 (OS Build 22000.318) Browser: Edge Version 96.0.1054.43 (Official build) (64-bit) URL: https://mgt.dev/next Screen reader: Narrator Tool: Accessibility insights for web

Repro Steps: Open the above URL and login with valid credentials. 'Microsoft Graph Toolkit Playground' Overview page will get displayed. Navigate to 'mgt-file-list > Style > Dark Theme , Now run AI tool and verify the issue that form element has label or not.

Actual Result: Form element in "mgt-file-list > Style > Dark Theme" does not have a label.

Expected Result: Ensure every form element has a label in "mgt-file-list > Style > Dark Theme".

User Impact: Labels are used to provide necessary information to the user to ensure that the component’s purpose is clear. In the absence of label information then user who are relying on screen reader may not be able to get the guidance on how to fill out the form edit field so the end users will get confused.

**Note:**Same issue is repro in below path also. mgt-file-list > Style >Custom CSS Properties Refer : WCAG1.3.1_mgt-file-list_Custom CSS Properties

WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

[ghost]

Hello SrujanaAnaganti, 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 🙌

[Mnickii]

Hi @Laxmidurga, I have a fix for this in the PR here

[Laxmidurga]

Hi @Mnickii, As verified issue does not repro in the below URL. Hence, closing. URL: https://mgt.dev/next/pr/1855/?path=/story/components-mgt-file-list-style--custom-css-properties