Fix (most) accessibility issues found by recent scan (#6215)

NuGet · Aug 8, 2018 · 7b7ed59 · 7b7ed59
1 parent f1737fc
commit 7b7ed59
Show file tree

Hide file tree

Showing 27 changed files with 187 additions and 120 deletions.
diff --git a/src/NuGetGallery/App_Code/ViewHelpers.cshtml b/src/NuGetGallery/App_Code/ViewHelpers.cshtml
@@ -496,8 +496,36 @@ var hlp = new AccordionHelper(name, formModelStatePrefix, expanded, page);
         <script type="text/javascript">
             var sections = @viewPage.Html.Raw(Json.Encode(viewSections));
             for (var i in sections) {
-                var containerId = sections[i] + "-container";
-                window.nuget.configureExpanderHeading(containerId);
+                var configureSection = function (section) {
+                    var containerId = section + "-container";
+                    window.nuget.configureExpanderHeading(containerId);
+
+                    // Configure the cancel button to close the section when it's clicked
+                    $("#cancel-" + section).click(function (e) {
+                        // Collapse the container.
+                        $("#" + containerId).collapse('hide');
+
+                        // Prevent navigation.
+                        e.preventDefault();
+
+                        // Reset the form.
+                        var formElement = $("#" + containerId + " form")[0];
+                        if (formElement) {
+                            formElement.reset();
+                        }
+
+                        // Clear values.
+                        $("#" + containerId + " input[type='text']").val("");
+                        $("#" + containerId + " input[type='password']").val("");
+
+                        // Reset the validation state.
+                        if (formElement) {
+                            window.nuget.resetFormValidation(formElement);
+                        }
+                    });
+                }
+
+                configureSection(sections[i]);
             }
         </script>
     }
@@ -635,7 +663,8 @@ var hlp = new AccordionHelper(name, formModelStatePrefix, expanded, page);
             $submit.attr({
                 'data-sitekey': "@reCaptchaPublicKey",
                 'data-size': "invisible",
-                'data-callback': "onSubmit"
+                'data-callback': "onSubmit",
+                'data-tabindex': "-1"
             });
             function onSubmit(token) {
                 $submit.parents('form').submit();

diff --git a/src/NuGetGallery/Scripts/gallery/certificates.js b/src/NuGetGallery/Scripts/gallery/certificates.js
@@ -10,6 +10,8 @@
             _addCertificateUrl = addCertificateUrl;
             _getCertificatesUrl = getCertificatesUrl;
 
+            window.nuget.configureFileInputButton("register-new");
+
             $('#input-select-file').on('change', function () {
                 clearErrors();
 

diff --git a/src/NuGetGallery/Scripts/gallery/common.js b/src/NuGetGallery/Scripts/gallery/common.js
@@ -205,6 +205,76 @@
         window.nuget.configureExpander(prefix, "ChevronRight", null, "ChevronDown", null);
     };
 
+    nuget.configureFileInputButton = function (id) {
+        // File input buttons should respond to keyboard events.
+        $("#" + id).on("keypress", function (e) {
+            var code = (e.keyCode || e.which);
+            var isInteract = (code == 13 /*enter*/ || code == 32 /*space*/) && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
+            if (isInteract) {
+                $(this).click();
+            }
+        });
+    }
+
+    nuget.canElementBeTabbedTo = function (element) {
+        var isElement = function (type) {
+            return element.is(type);
+        }
+
+        var hasAttribute = function (attributeName) {
+            var attribute = element.attr(attributeName);
+            return typeof attribute !== typeof undefined && attribute !== false;
+        }
+
+        if (hasAttribute("tabindex")) {
+            // Elements that have had their tabindex set to -1 cannot be tabbed to.
+            return element.attr("tabindex") !== "-1";
+        }
+
+        // See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Interactive_content
+        var alwaysInteractiveElements = ['a', 'button', 'details', 'embed', 'iframe', 'keygen', 'label', 'select', 'textarea'];
+        var i;
+        for (i = 0; i < alwaysInteractiveElements.length; i++) {
+            if (isElement(alwaysInteractiveElements[i])) {
+                return true;
+            }
+        }
+
+        return ((isElement("audio") && hasAttribute("controls")) ||
+            (isElement("img") && hasAttribute("usemap")) ||
+            (isElement("input") && element.attr("type") !== "hidden") ||
+            (isElement("menu") && element.attr("type") !== "toolbar") ||
+            (isElement("object") && hasAttribute("usemap")) ||
+            (isElement("video") && hasAttribute("controls")));
+    }
+
+    nuget.getFirstChildThatCanBeTabbedTo = function (element) {
+        if (window.nuget.canElementBeTabbedTo(element)) {
+            return element;
+        }
+
+        // If an element has its tabindex set to -1, none of its children can be tabbed to.
+        if (element.attr("tabindex") === "-1") {
+            return null;
+        }
+
+        var i;
+        var children = element.children();
+        for (i = 0; i < children.length; i++) {
+            var child = children.eq(i);
+            if (window.nuget.canElementBeTabbedTo(child)) {
+                return child;
+            }
+
+            var childChild = window.nuget.getFirstChildThatCanBeTabbedTo(child);
+            if (childChild !== null) {
+                return childChild;
+            }
+        }
+
+        return null;
+    }
+
     // Source: https://stackoverflow.com/a/27568129/52749
     // Detects whether SVG is supported in the browser.
     nuget.supportsSvg = function () {
@@ -401,6 +471,19 @@
                 searchbox.val(currInput);
             }
         });
+
+        $("#skipToContent").on('click', function () {
+            // Focus on the first element that can be tabbed to inside the "skippedToContent" element.
+            var skippedToContent = $("#skippedToContent");
+            var firstChildThatCanBeTabbedTo = window.nuget.getFirstChildThatCanBeTabbedTo(skippedToContent.first());
+            if (firstChildThatCanBeTabbedTo !== null) {
+                firstChildThatCanBeTabbedTo.focus();
+            } else {
+                // Focus on the "skippedToContent" element itself if we can't find an element on the page we can tab to.
+                // It's better to lose tab focus than to have the focus stay on the "Skip to Content" link. 
+                skippedToContent.focus();
+            }
+        });
     });
 }());
 
diff --git a/src/NuGetGallery/Scripts/gallery/page-edit-readme.js b/src/NuGetGallery/Scripts/gallery/page-edit-readme.js
@@ -228,6 +228,8 @@ var bindReadMeData = (function () {
             clearReadMeError();
             displayReadMeEditMarkdown();
         });
+
+        window.nuget.configureFileInputButton("browse-for-readme-button");
     }
 
     function previewReadMeAsync(callback, error) {

diff --git a/src/NuGetGallery/Scripts/gallery/page-home.js b/src/NuGetGallery/Scripts/gallery/page-home.js
@@ -24,7 +24,8 @@ $(function () {
     function showModal() {
         $(document).on('ready', function (e) {
             $("#popUpModal").modal({
-                show: true
+                show: true,
+                focus: true
             });
         })
     };

diff --git a/src/NuGetGallery/Scripts/gallery/page-manage-organization.js b/src/NuGetGallery/Scripts/gallery/page-manage-organization.js
@@ -7,32 +7,6 @@
             data["__RequestVerificationToken"] = $field.val();
         }
 
-        var configureSection = function (prefix) {
-            var containerId = prefix + "-container";
-            $("#cancel-" + prefix).click(function (e) {
-                // Collapse the container.
-                $("#" + containerId).collapse('hide');
-
-                // Prevent navigation.
-                e.preventDefault();
-
-                // Reset the form.
-                var formElement = $("#" + containerId + " form")[0];
-                if (formElement) {
-                    formElement.reset();
-                }
-
-                // Clear values.
-                $("#" + containerId + " input[type='text']").val("");
-                $("#" + containerId + " input[type='password']").val("");
-
-                // Reset the validation state.
-                if (formElement) {
-                    window.nuget.resetFormValidation(formElement);
-                }
-            });
-        }
-
         function OrganizationMemberViewModel(parent, member) {
             var self = this;
 
@@ -251,11 +225,6 @@
             };
         }
 
-        // Set up the section expanders.
-        for (var i in sections) {
-            configureSection(sections[i]);
-        }
-
         // Set up the data binding.
         var manageOrganizationViewModel = new ManageOrganizationViewModel(initialData);
         var manageOrganizationMembersContainer = $('#manage-organization-members-container');

diff --git a/src/NuGetGallery/Views/Authentication/Register.cshtml b/src/NuGetGallery/Views/Authentication/Register.cshtml
@@ -24,16 +24,16 @@
     {
         <div class="row">
             <div class="@ViewHelpers.GetColumnClasses(ViewBag) text-center">
-                <a role="button" class="btn btn-default btn-block provider-button"
-                   href="@Url.Authenticate(provider.ProviderName, (string)ViewData[Constants.ReturnUrlViewDataKey])">
+                <button type="button" class="btn btn-default btn-block provider-button"
+                   onclick="window.location.href = '@Url.Authenticate(provider.ProviderName, (string)ViewData[Constants.ReturnUrlViewDataKey])'">
                     @if (!string.IsNullOrEmpty(@provider.UI.IconImagePath))
                     {
                         <img height="24" width="24" alt="" aria-hidden="true"
                              src="@Href(provider.UI.IconImagePath)"
                              @(!string.IsNullOrEmpty(provider.UI.IconImageFallbackPath) ? (IHtmlString)ViewHelpers.ImageFallback(Url.Absolute(provider.UI.IconImageFallbackPath)) : new HtmlString(string.Empty)) />
                     }
                     @provider.UI.RegisterMessage
-                </a>
+                </button>
             </div>
         </div>
         <div class="row or-row">

diff --git a/src/NuGetGallery/Views/Authentication/SignIn.cshtml b/src/NuGetGallery/Views/Authentication/SignIn.cshtml
@@ -31,16 +31,16 @@
         {
             <div class="row">
                 <div class="@ViewHelpers.GetColumnClasses(ViewBag) text-center">
-                    <a role="button" class="btn btn-default btn-block provider-button"
-                       href="@Url.Authenticate(provider.ProviderName, returnUrl)">
+                    <button type="button" class="btn btn-default btn-block provider-button"
+                       onclick="window.location.href = '@Url.Authenticate(provider.ProviderName, returnUrl)'">
                         @if (!string.IsNullOrEmpty(@provider.UI.IconImagePath))
                         {
                             <img height="24" width="24" alt="" aria-hidden="true"
                                  src="@Href(provider.UI.IconImagePath)"
                                  @(!string.IsNullOrEmpty(provider.UI.IconImageFallbackPath) ? (IHtmlString)ViewHelpers.ImageFallback(Url.Absolute(provider.UI.IconImageFallbackPath)) : new HtmlString(string.Empty)) />
                         }
                         @provider.UI.SignInMessage
-                    </a>
+                    </button>
                 </div>
             </div>
             <br/>

diff --git a/src/NuGetGallery/Views/Organizations/Add.cshtml b/src/NuGetGallery/Views/Organizations/Add.cshtml
@@ -57,7 +57,7 @@
                                 <input type="submit" class="btn btn-primary form-control" value="Add" />
                             </div>
                             <div class="col-xs-6">
-                                <a href="@Url.ManageMyOrganizations()" role="button" class="btn btn-default form-control">Cancel</a>
+                                <button type="button" onclick="window.location.href = '@Url.ManageMyOrganizations()'" class="btn btn-default form-control">Cancel</button>
                             </div>
                         </div>
                     }

diff --git a/src/NuGetGallery/Views/Organizations/DeleteAccount.cshtml b/src/NuGetGallery/Views/Organizations/DeleteAccount.cshtml
@@ -59,7 +59,7 @@
                                     <input type="submit" class="btn btn-primary btn-danger form-control" id="delete-organization" value="Delete organization" />
                                 </div>
                                 <div class="col-sm-6">
-                                    <a href="@Url.Home()" role="button" class="btn btn-default form-control" id="cancel-delete-organization">Cancel</a>
+                                    <button type="button" onclick="window.location.href= '@Url.Home()'" class="btn btn-default form-control" id="cancel-delete-organization">Cancel</button>
                                 </div>
                             </div>
                         }

diff --git a/src/NuGetGallery/Views/Organizations/ManageOrganization.cshtml b/src/NuGetGallery/Views/Organizations/ManageOrganization.cshtml
@@ -86,13 +86,14 @@
                     @<text>
                         <div class="row form-group">
                             <div class="col-sm-6">
-                                <a role="button" href="@Url.DeleteOrganization(Model.AccountName)"
-                                    class="btn btn-primary form-control">Delete</a>
+                                <button type="button" onclick="window.location.href = '@Url.DeleteOrganization(Model.AccountName)'" class="btn btn-primary form-control">
+                                    Delete
+                                </button>
                             </div>
                             <div class="col-sm-6">
-                                <a href="#" role="button" class="btn btn-default form-control" id="cancel-delete-organization">
+                                <button type="button" class="btn btn-default form-control" id="cancel-delete-organization">
                                     Cancel
-                                </a>
+                                </button>
                             </div>
                         </div>
                     </text>)

diff --git a/src/NuGetGallery/Views/Packages/UploadPackage.cshtml b/src/NuGetGallery/Views/Packages/UploadPackage.cshtml
@@ -71,13 +71,7 @@
         var InProgressPackage = @Html.Raw(Json.Encode(Model.InProgressUpload));
         window.nuget.configureExpanderHeading("upload-package-form");
         $(function () {
-            $("#browse-for-package-button").on("keypress", function (e) {
-                var code = (e.keyCode || e.which);
-                var isInteract = (code == 13 /*enter*/ || code == 32 /*space*/) && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
-                if (isInteract) {
-                    $(this).click();
-                }
-            });
+            nuget.configureFileInputButton("browse-for-package-button");
 
             AsyncFileUploadManager.init(
                 '@Url.UploadPackageProgress()',

diff --git a/src/NuGetGallery/Views/Packages/_ImportReadMe.cshtml b/src/NuGetGallery/Views/Packages/_ImportReadMe.cshtml
@@ -69,7 +69,7 @@
                         <input type="text" id="ReadMeFileText" class="form-control" value="Browse for a Markdown Documentation file..."
                                aria-label="Upload documentation.md file" readonly />
                         <label for="ReadMeFileInput" id="ReadMeFileLabel" class="input-group-btn">
-                            <span class="btn btn-primary form-control" aria-label="Browse for a Markdown Documentation file" role="button">
+                            <span id="browse-for-readme-button" class="btn btn-primary form-control" tabindex="0" aria-label="Browse for a Markdown Documentation file" role="button">
                                 Browse&hellip;<input type="file" accept=".md" data-bind="value: Edit.ReadMe.SourceFile" name="Edit.ReadMe.SourceFile" aria-labelledby="ReadMeFileLabel" id="ReadMeFileInput" style="display:none;" />
                             </span>
                         </label>

diff --git a/src/NuGetGallery/Views/Packages/_VerifyMetadata.cshtml b/src/NuGetGallery/Views/Packages/_VerifyMetadata.cshtml
@@ -44,11 +44,11 @@
 <script type="text/html" id="verify-metadata-template">
     <div class="collapse in" id="verify-package-section">
         <div data-bind="if: $data">
-                <!-- ko if: $data.Warnings -->
-                <div data-bind="foreach: $data.Warnings">
-                    @ViewHelpers.AlertWarning(@<text><span data-bind="text: $data"></span></text>)
-                </div>
-                <!-- /ko -->
+            <!-- ko if: $data.Warnings -->
+            <div data-bind="foreach: $data.Warnings">
+                @ViewHelpers.AlertWarning(@<text><span data-bind="text: $data"></span></text>)
+            </div>
+            <!-- /ko -->
 
             <div class="verify-package-field">
                 <label for="Id" class="verify-package-field-heading">Package ID</label>
@@ -67,7 +67,7 @@
             <div class="verify-package-field form-group editable">
                 <label for="Owner" class="verify-package-field-heading" data-bind="text: $data.IsNewId ? 'Owner' : 'Owners'"></label>
                 <!-- ko if: $data.PossibleOwners.length > 1 && $data.IsNewId -->
-                <select aria-required="true" class="form-control" data-val="true" data-val-required="You must select an owner for your package!" name="Owner" data-bind="foreach: $data.PossibleOwners">
+                <select id="Owner" aria-required="true" class="form-control" data-val="true" data-val-required="You must select an owner for your package!" name="Owner" data-bind="foreach: $data.PossibleOwners">
                     <option data-bind="value: $data, text: $data"></option>
                 </select>
                 <!-- /ko -->

diff --git a/src/NuGetGallery/Views/Pages/Home.cshtml b/src/NuGetGallery/Views/Pages/Home.cshtml
@@ -12,7 +12,7 @@
     <script type="text/javascript">
         window.showModal = true;
     </script>
-    <div id="popUpModal" class="modal fade modal-container" data-backdrop="static">
+    <div id="popUpModal" role="dialog" class="modal fade modal-container" data-backdrop="static" tabindex="-1">
         @Html.Partial("_TransformOrLink", Model)
     </div>
 }

diff --git a/src/NuGetGallery/Views/Pages/_TransformOrLink.cshtml b/src/NuGetGallery/Views/Pages/_TransformOrLink.cshtml
@@ -22,11 +22,9 @@
         {
             <p class="transform-text">Since this is a team (DL-based) account, you must transform it to an organization on NuGet.org:</p>
             <div class="action-node">
-                <a role="button"
-                    class="btn btn-default btn-block action-button"
-                    href="@Url.TransformAccount()">
+                <button type="button" class="btn btn-default btn-block action-button" onclick="window.location.href = '@Url.TransformAccount()'">
                     <span>Transform to an Organization</span>
-                </a>
+                </button>
             </div>
         }
         else
@@ -46,14 +44,12 @@
                 <b>Note:</b> No changes will be made to your account except for the authentication mechanism.
             </div>
             <div class="action-node">
-                <a role="button" 
-                   class="btn btn-default btn-block action-button" 
-                   href="@Url.AuthenticateExternal("/")">
+                <button type="button" class="btn btn-default btn-block action-button"  onclick="window.location.href = '@Url.AuthenticateExternal("/")'">
                     <img height="24" width="24" alt="" aria-hidden="true"
                          src="@Href("~/Content/gallery/img/microsoft-account.svg")"
                          @(!string.IsNullOrEmpty("~/Content/gallery/img/microsoft-account-24x24.png") ? (IHtmlString)ViewHelpers.ImageFallback(Url.Absolute("~/Content/gallery/img/microsoft-account-24x24.png")) : new HtmlString(string.Empty)) />
                     <span>Sign in with Microsoft</span>
-                </a>
+                </button>
             </div>
         }
     </div>

diff --git a/src/NuGetGallery/Views/Shared/Gallery/Header.cshtml b/src/NuGetGallery/Views/Shared/Gallery/Header.cshtml
@@ -55,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">Skip To Content</a>
+                <a href="#" id="skipToContent" class="showOnFocus" title="Skip To Content">Skip To Content</a>
             </div>
         </div>
         <div class="row">