workaround for narrator announce the status changes of copy button (#8423)

Add aria-pressed attribute to indicate if copy button is pressed or not so that Narrator could read status change.

Author: lyndaidaii

src/NuGetGallery/Scripts/gallery/page-display-package.js

@@ -96,9 +96,14 @@ $(function () {
             var text = $('#' + id + '-text').text().trim();
             window.nuget.copyTextToClipboard(text, copyButton);
             copyButton.popover('show');
+            //This is workaround for Narrator announce the status changes of copy button to achieve accessibility.
+            copyButton.attr('aria-pressed', 'true');
             setTimeout(function () {
                 copyButton.popover('destroy');
             }, 1000);
+            setTimeout(function () {
+                copyButton.attr('aria-pressed', 'false');
+            }, 1500);  
             window.nuget.sendMetric("CopyInstallCommand", 1, {
                 ButtonId: id,
                 PackageId: packageId,

src/NuGetGallery/Views/Packages/DisplayPackage.cshtml

@@ -159,9 +159,14 @@
             <div class="install-script-row">
                 <pre class="install-script" id="@packageManager.Id-text">@packageManager.InstallPackageCommand</pre>
                 <div class="copy-button">
+                    <!--In order to statisfy the requirement to announce button status both on NVDA/Narrator, other screen reader like NVDA will
+                        announce the data-content "Copied" everytime when we press button, however, it won't work with Narrator when we use bootstrap popover 
+                        because of known issue(https://github.com/twbs/bootstrap/issues/18618).
+                        We add aria-pressed to indicate the whether button is pressed or not, which is workaround only for Narrator announce the status change of button
+                    -->
                     <button id="@packageManager.Id-button" class="btn btn-default btn-warning" type="button"
                             data-toggle="popover" data-placement="bottom" data-content="Copied."
-                            aria-label="@packageManager.CopyLabel" aria-live="polite" role="status">
+                            aria-label="@packageManager.CopyLabel" aria-pressed="false" aria-live="polite" role="button">
                         <span class="ms-Icon ms-Icon--Copy" aria-hidden="true"></span>
                     </button>
                 </div>