"OK" and "Cancel" buttons present in the dialog is not adopting the Text Spacing

[ManishaC1]

Githubs Tags: #A11ySev2; #DesktopWeb; #A11yMAS; #A11yTCS; #Win11; #WCAG1.4.12; #FTP; #ChromiumEdge; #Closed; #A11yFixed;

"Please do not close this bug. This bug should only be closed by TCS, C+AI Accessibility after verification of the bug".

Environment Details:

Application Name: Fluent UI Blazor
Page URL: https://www.fluentui-blazor.net/Dialog
Chromium Edge Version 135.0.3179.73 (Official build) (64-bit)

Pre-Requisites:

Install Stylus Extension: Stylus (google.com)
Include below lines of code and save it.

* {line-height: 1.5 !important;
letter-spacing: 0.12em !important; 
word-spacing: 0.16em !important;
}
p {margin-bottom: 2em !important;}

Repro Steps:

1. Launch #URL: https://www.fluentui-blazor.net/Dialog
2. Tab to "Open Dialog" present in "Customized Dialog" and press enter to open.
3. Apply Text Spacing and Refresh.
4. Observe "Save" and "Cancel" button are not adapting to Text Spacing.

Actual Result:

"OK" and "Cancel" buttons present in the dialog is not adopting the Text Spacing.

Similar issue is observed in below scenario:

• Placeholder text in text input field: https://www.fluentui-blazor.net/TextArea

Expected Results:

"OK" and "Cancel" buttons present in the dialog must adapt to the Text Spacing.

User Impact:

Increased text spacing helps users with dyslexia by reducing visual crowding and improving readability. Failure to adopt text spacing can make it difficult for these users to navigate and use the dialog effectively.

WCAG Reference:

https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html

Attachments:

[vnbaaij]

Hi @ManishaC1. Are you from Microsoft? If so, please reach out internally.

[MarvinKlein1508]

This doesn't work for FluentButton in general. I try to fix it :)

[ManishaC1]

Issue is fixed