Improved NuGet Gallery's Accessibility #3936
Conversation
Improved accessibility for the following pages: * Account Page * Improved the upload and manage package links by separating the label and describe sections. Resolves VSTS #395337 * Improved accessibility of "Change" button toggles. The screen reader will now describe their state as "expanded" or "collapsed". Fixes VSTS #395336 * Improved accessibility of "Add Key" button for API Key management. The screen reader will now describe the button as disabled or not. Fixes VSTS #395343. * Improved accessibility of "Example glob patterns" link on the API Key management by making it selectable with the "Tab" key. * Manage my Packages Page * Improved the `Edit` and `Delete` accessibility labels. Fixes VSTS #395342. * Upload Package Page * Added label to the file upload input. Fixes VSTS #395339
loic-sharma
requested review from
joelverhagen,
xavierdecoster,
ryuyu,
skofman1 and
scottbommarito
| @@ -1365,9 +1365,19 @@ ul.accordion { | |||
| } | |||
|
|
|||
| ul.accordion li.accordion-item .accordion-expand-link { | |||
There was a problem hiding this comment.
This "link" was changed into a button to allow for the screen reader to explain it's "expanded" vs "collapsed" state. The CSS changes are to make the button look like a link.
| @@ -39,29 +39,31 @@ public AccordionHelper(string name, string formModelStatePrefix, bool expanded, | |||
| public HtmlString ExpandButton(string closedTitle, string expandedTitle) | |||
| { | |||
| return new HtmlString( | |||
| "<a href=\"#\" class=\"accordion-expand-button btn btn-inline s-expand\" data-target=\"#" + | |||
| "<button class=\"accordion-expand-button btn btn-inline s-expand\" data-target=\"#" + | |||
There was a problem hiding this comment.
I changed the expandable buttons from links into buttons to allow the screen reader to explain their "expanded" vs "collapsed" state through the aria-expanded attribute.
| data.toggletext = oldText; | ||
| }); | ||
| $self.attr('aria-expanded', expanded ? 'false' : 'true'); | ||
| $self.text(toggletext); |
There was a problem hiding this comment.
If you go to nuget.org and hit the "Change" buttons on the manage account very quickly, the text toggle could get stuck. This happened because the text was toggled after the transition completed, and hitting the button again during this transition would read the buttons' stale state.
| @@ -339,7 +339,7 @@ | |||
| <h5>Select packages</h5><hr /> | |||
| To select which packages to associate with a key use a glob pattern, select individual packages, or both. | |||
|
|
|||
| <a class="globHelpLink">Example glob patterns</a>. | |||
| <a href="#" class="globHelpLink">Example glob patterns</a>. | |||
There was a problem hiding this comment.
Adding the href attribute here was necessary to allow the link to be focused through the Tab key.
| @@ -39,29 +39,31 @@ public AccordionHelper(string name, string formModelStatePrefix, bool expanded, | |||
| public HtmlString ExpandButton(string closedTitle, string expandedTitle) | |||
| { | |||
| return new HtmlString( | |||
| "<a href=\"#\" class=\"accordion-expand-button btn btn-inline s-expand\" data-target=\"#" + | |||
| "<button class=\"accordion-expand-button btn btn-inline s-expand\" data-target=\"#" + | |||
There was a problem hiding this comment.
As far as I can tell, the only difference between ExpandButton and ExpandLink is the class.
Can we move the shared logic to a single function?
Improved accessibility for the following pages:
and describe sections. Resolves VSTS #395337
will now describe their state as "expanded" or "collapsed".
Fixes VSTS #395336
The screen reader will now describe the button as disabled or not.
Fixes VSTS #395343.
Key management by making it selectable with the "Tab" key.
EditandDeleteaccessibility labels. FixesVSTS #395342.