Skip to content
This repository was archived by the owner on Jun 5, 2025. It is now read-only.

Conversation

@bbonaby
Copy link
Contributor

@bbonaby bbonaby commented Sep 11, 2024

Summary of the pull request

The last page for every machine configuration flow (except QuickStart Playground) is the summary page. The page contains 4 hyperlink buttons that either leads the user to another page in Dev Home or the For Developers Windows settings page. There are two accessibility issue with this link:

  1. Hyperlinks without an underline violates MAS 1.4.1 (See W3 orgs description here. Basically, we shouldn't only use color to convey information. The underline helps to convey that the text is a HyperLink.
  2. When a user increases their display scaling or text size scaling to 200%+ the hyperlink for the text "Change developer settings in windows" is cut off.

Changes:

  • Added a new HyperlinkButton style that allows the text within the HyperlinkButton to be wrapped and underlined.
  • Removed the ms-resource part of the x:Uid strings in the HyperlinkButtons on the summary page as they are not needed.

BEFORE CHANGES
Video of showing scaling at 200% (Notice the hyperlinks have not underline and the "Change developer settings in windows" text is cut off. I start off the video using scaling at 200%:

before.changes.mp4

AFTER CHANGES
Video showing scaling at text scaling at 200% - Links are now underlined and the "Change developer settings in windows" text is now wrapped:

After.changes.mp4

video showing text scaling at 225%

After.changes.with.text.scalling.at.225.mp4

References and relevant issues

Fixes:
https://task.ms/50454382
https://task.ms/52330843

Detailed description of the pull request / Additional comments

When looking at the summary page, it looks like the elements are strictly contained in the uniform grid used for the entire page. So, that's why when resizing the page in the "After changes" video the text wraps even though from the users perspective it looks like there is still a lot of space for the text to flow without needing to wrap. I looked into this, and there needs to be a bigger change in how the summary page works in order to allow this to happen. Instead of strictly placing different user controls in quadrants of the uniformed grid we should be allowing these quadrants to freely expand and be resized based on the available space around them. I'll create an issue for this.

Validation steps performed

PR checklist

  • Closes #xxx
  • Tests added/passed
  • Documentation updated

@bbonaby bbonaby merged commit 9754d3f into main Sep 20, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants