Fix accessibility issues identified by tool

src/Bootstrap/less/theme/base.less

@@ -103,29 +103,12 @@ body {
 .main-container {
   padding-bottom: 75px;
   height: auto;
-
-  .page-subheading {
-    color: #777;
-  }
 }
 
 .navbar-logo {
   margin: 8px 20px 0 0;
 }
 
-.navbar-seperated {
-  .seperator {
-    padding: 11px 0;
-    color: #fff;
-    display: block;
-    font-weight: 100;
-
-    > span::after {
-      content: " | ";
-    }
-  }
-}
-
 .dropdown-menu {
   padding-top: (@padding-large-vertical * 2);
   padding-bottom: (@padding-large-vertical * 2);

src/NuGetGallery/App_Code/ViewHelpers.cshtml

@@ -455,7 +455,7 @@ var hlp = new AccordionHelper(name, formModelStatePrefix, expanded, page);
 
 @helper AjaxAntiForgeryToken(System.Web.Mvc.HtmlHelper html)
 {
-    <form id="AntiForgeryForm">
+    <form aria-hidden="true" id="AntiForgeryForm">
         @html.AntiForgeryToken()
     </form>
 }
@@ -537,7 +537,7 @@ var hlp = new AccordionHelper(name, formModelStatePrefix, expanded, page);
                 @if (!disabled)
                 {
                     <a href="#" role="button" data-toggle="collapse" data-target="#@id-container"
-                        aria-expanded="@expanded" aria-controls="@id-container" id="show-@id-container">
+                        aria-expanded="@(expanded ? "true" : "false")" aria-controls="@id-container" id="show-@id-container">
                         <i class="ms-Icon ms-Icon--@(expanded ? expandedIcon : collapsedIcon)"
                             aria-hidden="@(expanded ? "false" : "true")"></i>
                         <span>@title(MvcHtmlString.Empty)</span>

src/NuGetGallery/Scripts/gallery/common.js

@@ -50,10 +50,48 @@
                 } else {
                     error.insertAfter(element);
                 }
+            },
+            showErrors: function (errorMap, errorList) {
+                this.defaultShowErrors();
+
+                // By default, showErrors adds an aria-describedby attribute to every field that it validates, even if it finds no issues.
+                // This is a problem, because the aria-describedby attribute will then link to an empty element.
+                // This code removes the aria-describedby if the describing element is missing or empty.
+                var i;
+                for (i = 0; this.errorList[i]; i++) {
+                    removeInvalidAriaDescribedBy(this.errorList[i].element);
+                }
+
+                for (i = 0; this.successList[i]; i++) {
+                    removeInvalidAriaDescribedBy(this.successList[i]);
+                }
             }
         });
     }
 
+    function removeInvalidAriaDescribedBy(element) {
+        var describedBy = element.getAttribute("aria-describedby");
+        if (!describedBy) {
+            return;
+        }
+
+        var ids = describedBy.split(" ")
+            .filter(function (describedById) {
+                if (!describedById) {
+                    return false;
+                }
+
+                var describedByElement = $("#" + describedById);
+                return describedByElement && describedByElement.text();
+            });
+
+        if (ids.length) {
+            element.setAttribute("aria-describedby", ids.join(" "));
+        } else {
+            element.removeAttribute("aria-describedby");
+        }
+    }
+
     nuget.parseNumber = function (unparsedValue) {
         unparsedValue = ('' + unparsedValue).replace(/,/g, '');
         var parsedValue = parseInt(unparsedValue);

src/NuGetGallery/Views/Authentication/SignIn.cshtml

@@ -43,13 +43,15 @@
                     </a>
                 </div>
             </div>
-            <div class="row text-center create-provider-account">
-                    <span>
-                        <a href="#" id="signin-assistance">Need assistance signing in?</a>
-                    </span>
-            </div>
+            <br/>
         }
 
+        <div class="row text-center create-provider-account">
+            <span>
+                <a href="#" id="signin-assistance">Need assistance signing in?</a>
+            </span>
+        </div>
+
         <div class="row nuget-signin">
             <div class="@ViewHelpers.GetColumnClasses(ViewBag) text-center">
                 <p class="text-center">

src/NuGetGallery/Views/Authentication/_SigninAssistance.cshtml

@@ -24,7 +24,7 @@
                             <div class="text-row">
                                 <label for="newOwnerUserName">Please enter the username</label>
                                 <input type="text" id="usernameForAssistance" name="usernameForAssistance" data-bind="value: usernameForAssistance" aria-required="true" class="form-control" />
-                                <div class="text-danger form-error-message" id="warning-message" data-bind="text: message"></div>
+                                <div class="text-danger form-error-message" data-bind="text: message"></div>
                             </div>
                         </div>
                         <div class="form-button-node username-submit">
@@ -40,7 +40,7 @@
                             <div class="text-row">
                                 <input class="form-control" type="text" id="emailAddress" name="emailAddress" data-bind="value: inputEmailAddress" aria-required="true" />
                             </div>
-                            <div class="text-danger form-error-message" id="warning-message" data-bind="text: message"></div>
+                            <div class="text-danger form-error-message" data-bind="text: message"></div>
                         </div>
                         <div class="form-button-node email-submit">
                             <input type="submit" class="btn btn-primary btn-block action-button" data-bind="click: sendEmailNotification" value="Next" />

src/NuGetGallery/Views/Organizations/ManageOrganization.cshtml

@@ -8,9 +8,7 @@
 }
 
 <section role="main" class="container main-container page-manage-organizations">
-    <form id="AntiForgeryForm">
-        @Html.AntiForgeryToken()
-    </form>
+    @ViewHelpers.AjaxAntiForgeryToken(Html)
     <div class="row">
         <div class="col-md-12">
             @ViewHelpers.OrganizationsBreadcrumb(

src/NuGetGallery/Views/Packages/Delete.cshtml

@@ -55,7 +55,7 @@
                                        new
                                        {
                                            @class = "form-control",
-                                           title = "Selection A Version...",
+                                           title = "Select a version",
                                            id = "input-select-version"
                                        })
                     </div>

src/NuGetGallery/Views/Packages/DisplayPackage.cshtml

@@ -139,7 +139,7 @@
 
 <section role="main" class="container main-container page-package-details">
     <div class="row">
-        <aside class="col-sm-1">
+        <aside aria-label="Package icon" class="col-sm-1">
             <h3>
                 <img class="package-icon img-responsive" aria-hidden="true" alt=""
                      src="@(PackageHelper.ShouldRenderUrl(Model.IconUrl) ? Model.IconUrl : Url.Absolute("~/Content/gallery/img/default-package-icon.svg"))"
@@ -510,7 +510,7 @@
                 }
             </div>
         </article>
-        <aside class="col-sm-3 package-details-info">
+        <aside aria-label="Package details info" class="col-sm-3 package-details-info">
             <h2>Info</h2>
             <ul class="list-unstyled ms-Icon-ul">
                 <li>

src/NuGetGallery/Views/Packages/Edit.cshtml

@@ -46,10 +46,10 @@
                         </a>
                     </h2>
                     <div class="collapse in" id="select-package-version-form" aria-expanded="true">
-                        <form id="cancel-form">
+                        <form aria-hidden="true" id="cancel-form">
                             @Html.AntiForgeryToken()
                         </form>
-                        <form id="select-version-form" enctype="multipart/form-data">
+                        <form aria-label="Select package version to edit" id="select-version-form" enctype="multipart/form-data">
                             @Html.AntiForgeryToken()
 
                             @Html.ValidationSummary(true)
@@ -60,7 +60,7 @@
                                                   new
                                                   {
                                                       @class = "form-control selectpicker show-tick show-menu-arrow btn-block",
-                                                      @title = "Select A Version...",
+                                                      @title = "Select a version",
                                                       @id = "input-select-version"
                                                   })
                                 </label>

src/NuGetGallery/Views/Packages/ManagePackageOwners.cshtml

@@ -37,7 +37,7 @@
                     <div class="col-md-1">
                         <img width="@Constants.GravatarElementSize"
                              height="@Constants.GravatarElementSize"
-                             data-bind="attr:{src: imageUrl}" />
+                             data-bind="attr: { src: imageUrl, 'aria-label': 'Profile picture for ' + name() }" />
                     </div>
                     <div class="col-md-8 ms-font-xl">
                         <span>

src/NuGetGallery/Views/Packages/UploadPackage.cshtml

@@ -10,7 +10,7 @@
     <div class="row">
         <div class="@ViewHelpers.GetColumnClasses(ViewBag)">
             @ViewHelpers.PackagesBreadcrumb(Url, CurrentUser, true, @<text>Upload</text>)
-            <div class="page-subheading text-center">
+            <div class="text-center">
                 <p class="message">Your package file will be uploaded and hosted on the @(Config.Current.Brand) server (@(Config.Current.SiteRoot)).</p>
             </div>
             <div id="upload-package-container">
@@ -22,10 +22,10 @@
                     </a>
                 </h2>
                 <div class="collapse in" id="upload-package-form" aria-expanded="true">
-                    <form id="cancel-form">
+                    <form aria-hidden="true" id="cancel-form">
                         @Html.AntiForgeryToken()
                     </form>
-                    <form id="uploadForm" enctype="multipart/form-data">
+                    <form aria-label="Upload a package" id="uploadForm" enctype="multipart/form-data">
                         @Html.AntiForgeryToken()
 
                         @Html.ValidationSummary(true)

src/NuGetGallery/Views/Packages/_EditForm.cshtml

@@ -1,4 +1,4 @@
-<form id="edit-readme-form">
+<form aria-label="Edit your package" id="edit-readme-form">
     @Html.AntiForgeryToken()
 
     <div id="readme-collapser-container" class="hidden">

src/NuGetGallery/Views/Packages/_VerifyForm.cshtml

@@ -1,4 +1,4 @@
-<form id="verify-metadata-form">
+<form aria-label="Verify your package" id="verify-metadata-form">
     @Html.AntiForgeryToken()
 
     <div id="verify-collapser-container" class="hidden">

src/NuGetGallery/Views/Packages/_VerifyMetadata.cshtml

@@ -143,7 +143,7 @@
                 <div class="verify-package-field row">
                     <div class="verify-package-field-heading col-sm-12">Icon Preview</div>
                     <div id="icon-preview-container" class="col-sm-1">
-                        <img class="package-icon img-responsive" id="icon-preview" data-bind="attr: { src: $data.IconUrl }" /> <!-- probably need to check this for safety-->
+                        <img class="package-icon img-responsive" id="icon-preview" aria-label="The icon of your package" data-bind="attr: { src: $data.IconUrl }" /> <!-- probably need to check this for safety-->
                     </div>
                 </div>
                 <!-- /ko -->

src/NuGetGallery/Views/Shared/Gallery/Header.cshtml

@@ -36,9 +36,8 @@
 
 @helper DisplayNavigationItem(string tab, string url, bool bold = false, string title = null)
 {
-    <li class="@(ViewBag.Tab == tab ? "active" : string.Empty)"
-        aria-selected="@(ViewBag.Tab == tab ? "true" : "false")" role="presentation">
-        <a role="menuitem" href="@url" title="@title">
+    <li class="@(ViewBag.Tab == tab ? "active" : string.Empty)" role="presentation">
+        <a role="tab" aria-selected="@(ViewBag.Tab == tab ? "true" : "false")" href="@url" title="@title">
             @if (bold)
             {
                 @:<b>
@@ -56,7 +55,7 @@
     <div class="container">
         <div class="row">
             <div class="col-sm-12 text-center">
-                <a href="#skippedToContent" class="showOnFocus" title="Skip To Content" role="navigation">Skip To Content</a>
+                <a href="#skippedToContent" class="showOnFocus" title="Skip To Content">Skip To Content</a>
             </div>
         </div>
         <div class="row">
@@ -75,7 +74,7 @@
                     </a>
                 </div>
                 <div id="navbar" class="navbar-collapse collapse" role="menubar">
-                    <ul class="nav navbar-nav" role="menu">
+                    <ul class="nav navbar-nav" role="tablist">
                         @DisplayNavigationItem("Packages", Url.PackageList())
                         @DisplayNavigationItem("Upload", Url.UploadPackage())
                         @if (StatisticsHelper.IsStatisticsPageAvailable)
@@ -92,17 +91,16 @@
                     </ul>
                     @if (ShowAuthInHeader)
                     {
-                        <ul class="nav navbar-nav navbar-right navbar-seperated" role="menu">
+                        <ul class="nav navbar-nav navbar-right" role="tablist">
                             @if (!User.Identity.IsAuthenticated)
                             {
                                 var returnUrl = ViewData.ContainsKey(Constants.ReturnUrlViewDataKey) ? (string)ViewData[Constants.ReturnUrlViewDataKey] : Request.RawUrl;
                                 @DisplayNavigationItem("Sign in", Url.LogOn(returnUrl), title: "Sign in to an existing NuGet.org account")
                             }
                             else
                             {
-                                <li class="@(ViewBag.Tab == User.Identity.Name ? "active" : string.Empty) dropdown"
-                                    aria-selected="@(ViewBag.Tab == User.Identity.Name ? "true" : "false")" role="presentation">
-                                    <a href="#" role="menuitem" id="account-dropdown" class="dropdown-toggle" title="Open profile dropdown" data-toggle="dropdown">
+                                <li class="@(ViewBag.Tab == User.Identity.Name ? "active" : string.Empty) dropdown" role="presentation">
+                                    <a href="#" aria-selected="@(ViewBag.Tab == User.Identity.Name ? "true" : "false")" role="tab" id="account-dropdown" class="dropdown-toggle" title="Open profile dropdown" data-toggle="dropdown">
                                         <div>
                                             @if (ShowWarningBanner)
                                             {
@@ -163,7 +161,7 @@
     {
         <div class="container search-container">
             <div class="row">
-                <form class="col-sm-12" action="@Url.PackageList()" method="get">
+                <form aria-label="Package search bar" class="col-sm-12" action="@Url.PackageList()" method="get">
                     @Html.Partial("_SearchBar")
                     @Html.Partial("_AutocompleteTemplate")
                 </form>

src/NuGetGallery/Views/Shared/_AccountChangeNotifications.cshtml

@@ -53,7 +53,7 @@
             @(Model.ChangeNotifications.NotifyPackagePushed ? ViewBag.NotifyPackagePushedEnabled : ViewBag.NotifyPackagePushedNotEnabled)
         </text>,
         @<text>
-            @using (Html.BeginForm("ChangeEmailSubscription", controllerName))
+            @using (Html.BeginForm("ChangeEmailSubscription", controllerName, FormMethod.Post, new { aria_label = "Change email subscription settings" }))
             {
                 @Html.AntiForgeryToken()
 
@@ -63,6 +63,7 @@
                         <b>@ViewBag.EmailAllowedLabel</b>
                     </label>
                     <div id="emailallowed-label" class="label-sibling">@Html.Raw(ViewBag.EmailAllowedDescription)</div>
+                    @Html.ShowValidationMessagesFor(x => x.ChangeNotifications.EmailAllowed)
                 </div>
 
                 <div class="checkbox">
@@ -71,6 +72,7 @@
                         <b>@ViewBag.NotifyPackagePushedLabel</b>
                     </label>
                     <div id="notifypackagepushed-label" class="label-sibling">@ViewBag.NotifyPackagePushedDescription</div>
+                    @Html.ShowValidationMessagesFor(x => x.ChangeNotifications.NotifyPackagePushed)
                 </div>
 
                 <p><strong>Note: </strong>@ViewBag.PrivacyNotice</p>

src/NuGetGallery/Views/Statistics/Index.cshtml

@@ -17,7 +17,7 @@
 <section role="main" class="container main-container page-statistics-overview">
     <h1>Statistics</h1>
 
-    <span class="page-subheading ms-fontSize-l">
+    <span class="ms-fontSize-l">
         @Html.Partial("_LastUpdated", Model)
     </span>
 

src/NuGetGallery/Views/Statistics/PackageVersions.cshtml

@@ -20,7 +20,7 @@
         <div class="col-xs-12">
             <h1>Most Downloaded Package Versions</h1>
 
-            <span class="page-subheading ms-fontSize-l" data-bind="text: showAllPackageDownloads() ? 'Top 500 Packages Over the Last 6 Weeks' : 'Top 500 Community Packages Over the Last 6 Weeks'">
+            <span class="ms-fontSize-l" data-bind="text: showAllPackageDownloads() ? 'Top 500 Packages Over the Last 6 Weeks' : 'Top 500 Community Packages Over the Last 6 Weeks'">
                 Top 500 Community Packages Over the Last 6 Weeks
             </span>
             <label class="show-all-packages-toggle pull-right">

src/NuGetGallery/Views/Statistics/Packages.cshtml

@@ -20,7 +20,7 @@
         <div class="col-xs-12">
             <h1>Most Downloaded Packages</h1>
 
-            <span class="page-subheading ms-fontSize-l" data-bind="text: showAllPackageDownloads() ? 'Top 100 Packages Over the Last 6 Weeks' : 'Top 100 Community Packages Over the Last 6 Weeks'">
+            <span class="ms-fontSize-l" data-bind="text: showAllPackageDownloads() ? 'Top 100 Packages Over the Last 6 Weeks' : 'Top 100 Community Packages Over the Last 6 Weeks'">
                 Top 100 Community Packages Over the Last 6 Weeks
             </span>
             <label class="show-all-packages-toggle pull-right">

src/NuGetGallery/Views/Statistics/_PivotTable.cshtml

@@ -23,7 +23,7 @@
 
 <script type="text/html" id="report-template">
     <div class="row">
-        <div data-bind="if: $data && LastUpdatedUtc" class="last-updated col-xs-12 page-subheading">
+        <div data-bind="if: $data && LastUpdatedUtc" class="last-updated col-xs-12">
             <span data-bind="text: 'Statistics last updated at ' + moment(LastUpdatedUtc).format('YYYY-MM-DD HH:mm:ss') + ' UTC.'"></span>
         </div>
     </div>