[MGTP-Samples-General-Localization-Select user]: The language of part is not defined for the 'Select user', 'Select channel' combo edit fields.

[vagpt]

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: https://mgt.dev/next/v3/?path=/story/samples-general--localization User ID: V-id
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. 'Microsoft Graph Toolkit Playground' Overview page will get displayed.
4. Navigate to '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 'Select user' combo edit field using tab key.
9. Observe the issue with screen reader announcement.

Actual Result: Lang attribute is not defined for the 'Select user', 'Select channel' combo edit fields. When the screen reader focuses on 'Select user' combo edit field It's not announcing anything.

Expected Result: Lang attribute should be defined for the 'Select user', 'Select channel' combo edit fields which is presented in different language from the rest of the page. When focus lands on the combo edit fields, it should announce the control information.

Note:

1. Same issue is repro for 'sign out' button under 'User Profile flyout'(Navigation path: Samples>>General>>Localization>>Megan Bowen>>Sign out) (Note_1)
2. Same issue is repro with NVDA screen reader.

User Experience: If the language of part is not defined for the content defined in the list, then the user who depends upon Screen Reader for navigation might get affected and hence fail to proper information of the control present on page.

WCAG Reference Link: https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html

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

[ghost]

Hello vagpt, 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 is an example of how a developer can use the localization tools that the Toolkit exposes to change the provided text to match the page that they are using the components in.

The expectation is that the developer would ensure that the language they provide matches the lang attribute for the page used to host this content. These tools very deliberately don't know about the language in the content provided.

In the context of this example would you suggest that we wrap these controls with a div with the lang attribute expected? The reality here is that the content coming from the Graph tenant that this is connected to is in English, so we're always going to have mixed language and not have a mechanism for splitting them. We operate on the assumption these will be used in a context where the localization content and tenant context provide a heterogeneous language environment for a given page.

[gavinbarron]

@vagpt or @KarunaNarang can you please provide guidance here?

[gavinbarron]

ping @vagpt or @KarunaNarang we'd like to understand what if anything we can do given the constraints outlined above?

[gavinbarron]

ping @vagpt or @KarunaNarang can you please respond to this issue, there is a disconnect between the expectations and the reality of how things work here and we need clarification.

[vagpt]

Hi @gavinbarron,

Apology for the late response.

Here, if there are more than one languages are used in a page then for the second lang there should be lang of part define so that screen reader user did not face challenges. for example, **An HTML Web page includes links to versions of the page in other languages (e.g., Deutsch, Français, Nederland's, Catalan, etc.). The text of each link is the name of the language in that language. The language of each link is indicated via a lang attribute.

• Deutsch
• Italiano
• Français
...
• 繁體中文

**

Also, for more details please refer to the below guideline.

Reference: https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html

[gavinbarron]

@sebastienlevert the only way we can reasonably comply with this request is to use the localization feature to put in custom English language strings.