Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Improved NuGet Gallery's Accessibility #3936

Merged
merged 2 commits into from
May 11, 2017
Merged

Improved NuGet Gallery's Accessibility #3936

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4704c8c
Improved NuGet Gallery's Accessibility
loic-sharma May 9, 2017
1c89ea1
Minor accessibility bug fix
loic-sharma May 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion src/NuGetGallery/Content/Site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1365,9 +1365,19 @@ ul.accordion {
}

ul.accordion li.accordion-item .accordion-expand-link {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

display: inline-block;
background: none!important;
border: none;
padding: 0!important;
cursor: pointer;
margin-top: 0.25em;
margin-left: 3px;
color: #0071bc;
box-shadow: none;
font-size:0.85em;
}

ul.accordion li.accordion-item .accordion-expand-link:hover {
text-decoration: underline;
}

ul.accordion li.accordion-item.accordion-item-disabled {
Expand Down
14 changes: 8 additions & 6 deletions src/NuGetGallery/Helpers/AccordeonHelper.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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=\"#" +
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

ContentDropDownId +
"\" data-toggletext=\"" +
(Expanded ? closedTitle : expandedTitle) +
"\" id=\"" +
CollapseButtonId +
"\">" +
"\" aria-expanded=\"" +
(Expanded ? "true" : "false") +"\">" +
(Expanded ? expandedTitle : closedTitle) +
"</a>");
"</button>");
}

public HtmlString ExpandLink(string closedTitle, string expandedTitle)
{
return new HtmlString(
"<a href=\"#\" class=\"accordion-expand-link s-expand\" data-target=\"#" +
"<button class=\"accordion-expand-link s-expand\" data-target=\"#" +
ContentDropDownId +
"\" data-toggletext=\"" +
(Expanded ? closedTitle : expandedTitle) +
"\" id=\"" +
CollapseButtonId +
"\">" +
"\" aria-expanded=\"" +
(Expanded ? "true" : "false") + "\">" +
(Expanded ? expandedTitle : closedTitle) +
"</a>");
"</button>");
}
}
}
12 changes: 7 additions & 5 deletions src/NuGetGallery/Scripts/nugetgallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,14 @@
var data = $self.data();
var $target = $(data.target);
var toggletext = data.toggletext || $self.text();
var expanded = $self.attr('aria-expanded') == 'true';
var oldText = $self.text();

$target.slideToggle('fast', function () {
var oldText = $self.text();
$self.text(toggletext);
data.toggletext = oldText;
});
$self.attr('aria-expanded', expanded ? 'false' : 'true');
$self.text(toggletext);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

data.toggletext = oldText;

$target.slideToggle('fast');
});
$('.s-confirm[data-confirm]').delegate('', 'click', function (evt) {
if (!confirm($(this).data().confirm)) {
Expand Down
4 changes: 2 additions & 2 deletions src/NuGetGallery/Views/Packages/UploadPackage.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
@Html.ValidationSummary(true)

<div class="form-field">
<label for="PackageFile">Choose a package...</label>
<input type="file" name="UploadFile" accept=".nupkg" />
<label for="PackageFile" id="PackageFileLabel">Choose a package...</label>
<input type="file" name="UploadFile" accept=".nupkg" aria-labelledby="PackageFileLabel" />
</div>

<input type="submit" value="Upload" title="Upload the package." />
Expand Down
12 changes: 6 additions & 6 deletions src/NuGetGallery/Views/Users/Account.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,12 @@
<section>
<ul class="actionlist">
<li class="actionlist-item">
<a class="actionlist-item-link" href="@Url.UploadPackage()">
<a class="actionlist-item-link" href="@Url.UploadPackage()" aria-labelledby="upload-package-label" aria-describedby="upload-package-description">
<div class="actionlist-item-header">
<i class="icon-cloud-upload actionlist-item-header-icon"></i>
<span class="actionlist-item-header-text">Upload a Package</span>
<span class="actionlist-item-header-text" id="upload-package-label">Upload a Package</span>
</div>
<p class="actionlist-item-content">
<p class="actionlist-item-content" id="upload-package-description">
Upload and publish your package for other NuGet users to download and enjoy.
You can upload multiple revisions of the same package, as long as the version
is different.
Expand All @@ -64,12 +64,12 @@
</li>

<li class="actionlist-item">
<a class="actionlist-item-link" href="@Url.Action(actionName: "Packages", controllerName: "Users")">
<a class="actionlist-item-link" href="@Url.Action(actionName: "Packages", controllerName: "Users")" aria-labelledby="manage-my-packages-label" aria-describedby="manage-my-packages-description">
<div class="actionlist-item-header">
<i class="icon-gears actionlist-item-header-icon"></i>
<span class="actionlist-item-header-text">Manage my Packages</span>
<span class="actionlist-item-header-text" id="manage-my-packages-label">Manage my Packages</span>
</div>
<p class="actionlist-item-content">
<p class="actionlist-item-content" id="manage-my-packages-description">
Edit package details or Remove packages that you have previously uploaded.
</p>
</a>
Expand Down
11 changes: 5 additions & 6 deletions src/NuGetGallery/Views/Users/ApiKeys.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding the href attribute here was necessary to allow the link to be focused through the Tab key.

<div class="popup">
<div class="popupbox" id="addapikeypopup">
<a class="boxclose"><i class="icon-remove"></i></a>
Expand Down Expand Up @@ -405,7 +405,7 @@
</div>
</div>

<button class="btn" type="button" id="generateKey">Add key</button>
<button class="btn" type="button" id="generateKey" aria-disabled="true">Add key</button>
</fieldset>
<br />
}
Expand Down Expand Up @@ -535,14 +535,13 @@
var globValid = $('#addkeyglobPattern').valid();
var globEmpty = $('#addkeyglobPattern').val() == null || $.trim($('#addkeyglobPattern').val()) == '';

if (!globValid) {
$('#generateKey').addClass('disabled-div');
}
else if (packagesWereSelected || !globEmpty) {
if (globValid && (packagesWereSelected || !globEmpty)) {
$('#generateKey').removeClass('disabled-div');
$('#generateKey').removeAttr('aria-disabled');
}
else {
$('#generateKey').addClass('disabled-div');
$('#generateKey').attr('aria-disabled', 'true');
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/NuGetGallery/Views/Users/Packages.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,13 @@ else
<td class="actions">
@if (canEdit)
{
<a href="@Url.EditPackage(package.Id, package.Version)" title="Edit" class="table-action-link">
<a href="@Url.EditPackage(package.Id, package.Version)" title="Edit" class="table-action-link" aria-label="Edit package details">
<i class="icon-edit"></i>
</a>
}
@if (canDelete)
{
<a href="@Url.DeletePackage(package)" title="Delete" class="table-action-link">
<a href="@Url.DeletePackage(package)" title="Delete" class="table-action-link" aria-label="Delete package">
<i class="icon-trash"></i>
</a>
}
Expand Down