Fix two accessibility issues and fix hover underline on alerts (#4547)

Enable "enter" key press on Upload button Make selected package command tab apparent on high-contrast Firefox Add `icon-text` class for text with an icon that is NOT a link (`icon-link` has other undesired rules) Fix accessibility issue 470376 Fix accessibility issue 476608
NuGet · Aug 10, 2017 · 0fddd36 · 0fddd36
1 parent 9a1f45f
commit 0fddd36
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 28 deletions.
diff --git a/src/Bootstrap/dist/css/bootstrap-theme.css b/src/Bootstrap/dist/css/bootstrap-theme.css
diff --git a/src/Bootstrap/less/theme/base.less b/src/Bootstrap/less/theme/base.less
@@ -114,7 +114,7 @@ body {
   height: 36px;
 }
 
-.icon-link {
+.icon-link, .icon-text {
   .ms-Icon {
     position: relative;
     top: 2px;

diff --git a/src/Bootstrap/less/theme/page-display-package.less b/src/Bootstrap/less/theme/page-display-package.less
@@ -71,13 +71,8 @@
       background-color: @panel-footer-bg;
       border: 0;
       color: #fff;
-
-      @media screen and (-ms-high-contrast: active){
-        & {
-          font-weight: 600;
-          text-decoration: underline;
-        }
-      }
+      font-weight: 600;
+      text-decoration: underline;
     }
 
     .tab-pane {

diff --git a/src/NuGetGallery/App_Code/ViewHelpers.cshtml b/src/NuGetGallery/App_Code/ViewHelpers.cshtml
@@ -40,7 +40,7 @@
 
 @helper Alert(Func<MvcHtmlString, HelperResult> htmlContent, string subclass, string icon, bool isAlertRole = false)
 {
-    <div class="icon-link alert alert-@subclass" @if (isAlertRole) { <text> role="alert" aria-live="assertive" </text>   }>
+    <div class="icon-text alert alert-@subclass" @if (isAlertRole) { <text> role="alert" aria-live="assertive" </text>   }>
         <i class="ms-Icon ms-Icon--@icon" aria-hidden="true"></i>
         @htmlContent(MvcHtmlString.Empty)
     </div>

diff --git a/src/NuGetGallery/Content/gallery/css/bootstrap-theme.css b/src/NuGetGallery/Content/gallery/css/bootstrap-theme.css
diff --git a/src/NuGetGallery/Views/Packages/UploadPackage.cshtml b/src/NuGetGallery/Views/Packages/UploadPackage.cshtml
@@ -84,7 +84,7 @@
         window.nuget.configureExpanderHeading("upload-package-form");
         $(function () {
             $("#browse-for-package-button").on("keypress", function (e) {
-                var keyCode = (e.keyCode || e.which);
+                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();

diff --git a/src/NuGetGallery/Views/Shared/_ListPackage.cshtml b/src/NuGetGallery/Views/Shared/_ListPackage.cshtml
@@ -30,27 +30,27 @@
 
             <ul class="package-list">
                 <li>
-                    <span class="icon-link">
+                    <span class="icon-text">
                         <i class="ms-Icon ms-Icon--Download" aria-hidden="true"></i>
                         @Model.TotalDownloadCount.ToNuGetNumberString() total @(Model.TotalDownloadCount == 1 ? "download" : "downloads")
                     </span>
                 </li>
                 <li>
-                    <span class="icon-link">
+                    <span class="icon-text">
                         <i class="ms-Icon ms-Icon--History" aria-hidden="true"></i>
                         last updated <span data-datetime="@Model.LastUpdated.ToString("O")">@Model.LastUpdated.ToNuGetShortDateString()</span>
                     </span>
                 </li>
                 <li>
-                    <span class="icon-link">
+                    <span class="icon-text">
                         <i class="ms-Icon ms-Icon--Flag" aria-hidden="true"></i>
                         Latest version: <span class="text-nowrap">@Model.FullVersion @(Model.Prerelease ? "(prerelease)" : "")</span>
                     </span>
                 </li>
                 @if (Model.Tags.AnySafe())
                 {
                     <li class="package-tags">
-                        <span class="icon-link">
+                        <span class="icon-text">
                             <i class="ms-Icon ms-Icon--Tag" aria-hidden="true"></i>
                             @foreach (var tag in Model.Tags)
                             {