-
Notifications
You must be signed in to change notification settings - Fork 619
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Accessibility][Keyboard support] Add access keys & arrow keys docs and add clarify guidance #1271
Conversation
We should probably add examples of access keys to the menubar pages! |
WinUIGallery/ControlPages/DesignGuidance/AccessibilityKeyboardPage.xaml
Outdated
Show resolved
Hide resolved
WinUIGallery/ControlPages/DesignGuidance/AccessibilityKeyboardPage.xaml
Outdated
Show resolved
Hide resolved
WinUIGallery/ControlPages/DesignGuidance/AccessibilityKeyboardPage.xaml
Outdated
Show resolved
Hide resolved
WinUIGallery/ControlPages/DesignGuidance/AccessibilityKeyboardPage.xaml
Outdated
Show resolved
Hide resolved
WinUIGallery/ControlPages/DesignGuidance/AccessibilityKeyboardPage.xaml
Outdated
Show resolved
Hide resolved
WinUIGallery/ControlPages/DesignGuidance/AccessibilityKeyboardPage.xaml
Outdated
Show resolved
Hide resolved
WinUIGallery/ControlPages/DesignGuidance/AccessibilityScreenReaderPage.xaml
Outdated
Show resolved
Hide resolved
WinUIGallery/ControlPages/DesignGuidance/AccessibilityScreenReaderPage.xaml
Outdated
Show resolved
Hide resolved
WinUIGallery/ControlPages/DesignGuidance/AccessibilityScreenReaderPage.xaml
Outdated
Show resolved
Hide resolved
<Hyperlink | ||
NavigateUri="https://learn.microsoft.com/windows/apps/design/input/keyboard-interactions#navigation"> | ||
Keyboard interactions#Navigation |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Did you mean to include the # inside the displayed text of the link? Maybe we use - instead if we want to indicate that we are only linking to sections of the same page?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did deliberately chooose #
as the separator. It's a bit dev-y, but my reasoning was that #
represents an anchor link---it's the literal character used to denote anchors in a URL. I worried -
would be too ambiguous (is this a subpage of a section? A long title? etc).
I'm open to changing it, though, if it's confusing.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The only thing I'm afraid is people thinking this is by mistake though I think this is a risk we can take here. After all, our audience is mostly devs.
Text="Potatoes?" /> | ||
<!-- | ||
XYFocusKeyboardNavigation enables arrow keys between the buttons. | ||
|
||
Note that: | ||
|
||
- The buttons are still tabbable by default | ||
- Home/End and PgUp/PgDn do not work | ||
- Screen readers do not read PositionInSet/SizeOfSet ("1 of 3") | ||
|
||
All of that would require custom work. | ||
--> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was thinking having it be present in the XAML sample code would be fine but I guess having it twice doesn't hurt and is also closer to reality when reading the sample code in app.
PR looks good to me, thank you so much for working on all of this @citelao! |
@karkarl If you wanna take a look, otherwise I would merge this |
Today, our Keyboard support section does not include information about access keys or arrow keys, and doesn't have much documentation about default behavior or reference documents. This change adds guidance for access keys, arrow keys, and more, and documents the expected and default behavior for many of them.
Fixes #1229
Fixes #1225
Fixes #1226
Description
XYFocusKeyboardNavigation
.Motivation and Context
This addresses documentation gaps in our keyboard examples. Hopefully it will lead folks to design more keyboard-accessible UI.
How Has This Been Tested?
Deployed locally.
AcceleratorKey
property?Screenshots (if appropriate):
Keyboard page
Screen reader page
Types of changes