[A11y]Accessibility fixes 1 (#7927)

* Add aria-label for license text
* Add more description aria-label for organization learn more.
* add aria-live region to apikeys alert.
* Roll back 7326 outline change. reintroduces 7305 as it is not actually a bug.
* Correct role/reading of deprecation container.
* Fix reading of alert on documentation edit.
* Update delay for readme error diaply 100ms -> 0ms

Author: ryuyu

src/Bootstrap/dist/css/bootstrap-theme.css

@@ -29,7 +29,6 @@
       justify-content: space-between;
       vertical-align: middle;
       width: 100%;
-      outline: none;
 
       .deprecation-expander-container {
         display: flex;
@@ -123,14 +122,14 @@
     font-size: 14px;
     color: #333333;
     margin: 4px 0 0 0;
-    width: auto; 
-    overflow: hidden; 
-    text-overflow: ellipsis; 
+    width: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
     display: -webkit-box;
     line-height: 16px;
-    /* fallback */ 
+    /* fallback */
     max-height: 32px;
-    /* fallback */ 
+    /* fallback */
     -webkit-line-clamp: 2;
     /* number of lines to show */
     -webkit-box-orient: vertical;
@@ -141,7 +140,7 @@
     font-size: 16px;
     line-height: 19px;
     color: @brand-primary;
-    width: auto; 
+    width: auto;
 }
 
 .gh-star-count {
@@ -165,7 +164,7 @@
 .gh-empty-column {
     width: 15%;
 }
-  
+
   .install-tabs {
     font-size: 0.8em;
 

src/Bootstrap/less/theme/page-display-package.less

@@ -340,7 +340,13 @@ var BindReadMeDataManager = (function () {
         function displayReadMeError(errorMsg) {
             $("#readme-errors").removeClass("hidden");
             $("#preview-readme-button").attr("disabled", "disabled");
-            $("#readme-error-content").text(errorMsg);
+
+            // This is required because in order for the screen reader to correctly read the message and alert
+            // the message must change AFTER the element becomes visible. When we run all these commands
+            // synchronously, it appears that the message content is changed BEFORE the element is finished rendering.
+            // Delay it using a timeout so it will show after the message box is visible.
+            setTimeout(() => { $("#readme-error-content").text(errorMsg); }, 0);
+            
         }
 
         function clearReadMeError() {

src/NuGetGallery/Scripts/gallery/page-edit-readme.js

@@ -17,7 +17,7 @@
         <div class="@ViewHelpers.GetColumnClasses(ViewBag)">
             @ViewHelpers.OrganizationsBreadcrumb(Url, CurrentUser, true, @<text>Add</text>)
             <p>
-                Organizations allow you to manage and publish packages as a team or a group. <a href="https://go.microsoft.com/fwlink/?linkid=870439">Learn more.</a>
+                Organizations allow you to manage and publish packages as a team or a group. <a href="https://go.microsoft.com/fwlink/?linkid=870439" aria-label="Learn more about organizations on NuGet.Org">Learn more.</a>
             </p>
             @if (errorMessage != null)
             {

src/NuGetGallery/Views/Organizations/Add.cshtml

@@ -159,7 +159,7 @@
 
         @switch (packageManager.AlertLevel)
         {
-            case AlertLevel.Info:
+            case AlertLevel.Info: 
                 @ViewHelpers.AlertInfo(
                     @<text>
                         @Html.Raw(packageManager.AlertMessage)
@@ -188,7 +188,7 @@
 
 @* The following two helpers must be on a single line each so no extra whitespace is introduced in the expression when rendered. *@
 @* Helpers themselves are needed not to introduce that extra whitespce, which happens if they are inlined. *@
-@helper MakeLicenseLink(CompositeLicenseExpressionSegment segment) {<a href="@LicenseExpressionRedirectUrlHelper.GetLicenseExpressionRedirectUrl(segment.Value)">@segment.Value</a>}
+@helper MakeLicenseLink(CompositeLicenseExpressionSegment segment) {<a href="@LicenseExpressionRedirectUrlHelper.GetLicenseExpressionRedirectUrl(segment.Value)" aria-label="License @segment.Value">@segment.Value</a>}
 @helper MakeLicenseSpan(CompositeLicenseExpressionSegment segment) {<span>@segment.Value</span>}
 
 <section role="main" class="container main-container page-package-details">

src/NuGetGallery/Views/Packages/DisplayPackage.cshtml

@@ -2,7 +2,7 @@
 
 <div class="deprecation-container">
     <div class="icon-text alert alert-warning">
-        <div id="show-deprecation-content-container" class="deprecation-expander" tabindex="0" data-toggle="collapse" data-target="#deprecation-content-container" aria-expanded="false" aria-controls="deprecation-content-container" aria-labelledby="deprecation-container-label">
+        <div id="show-deprecation-content-container" class="deprecation-expander" tabindex="0" data-toggle="collapse" data-target="#deprecation-content-container" aria-expanded="false" aria-controls="deprecation-content-container" aria-labelledby="deprecation-container-label" role="button">
             <div class="deprecation-expander" role="button">
                 <div class="deprecation-expander-container">
                     <i class="deprecation-expander-icon ms-Icon ms-Icon--Warning" aria-hidden="true"></i>

src/NuGetGallery/Views/Packages/_DisplayPackageDeprecation.cshtml

@@ -28,11 +28,11 @@
     <div class="collapse in" id="readme-package-form">
 
         <div id="readme-errors" class="hidden">
-            <div class="alert alert-danger" role="alert" aria-live="assertive">
+            <div class="alert alert-danger">
                 <ul class="list-unstyled ms-Icon-ul">
                     <li>
                         <i class="ms-Icon ms-Icon--ErrorBadge" aria-hidden="true"></i>
-                        <span id="readme-error-content"></span>
+                        <span id="readme-error-content" role="alert" aria-live="assertive"></span>
                     </li>
                 </ul>
             </div>

src/NuGetGallery/Views/Packages/_ImportReadMe.cshtml

@@ -334,7 +334,7 @@
                 <b class="ms-fontSize-xl">Select Scopes</b>
                 <br />
                 <span class="has-error">
-                    <span class="help-block" data-bind="text: ScopesError"></span>
+                    <span class="help-block" data-bind="text: ScopesError" aria-live="polite" role="alert"></span>
                 </span>
                 <ul role="presentation">
                     <li>