[A11y][ScreenReader] Prevent Screen Reader from reading non-header elements (#9181)

* A11y Ignore Extra Heading

* Moved prefix reserved out of H1 tag

* edit less file to generate css

* remove display inline

Author: keylime-unicorn

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

@@ -42,27 +42,28 @@
         margin-right: 12px;
       }
 
-      .prefix-reserve-title {
-        background-color: #F3F2F1;
-        display: inline-flex;
-        align-items: center;
-        border-radius: 100px;
-        vertical-align: middle;
+    }
 
-        .reserved-indicator {
-          width: 18px;
-          margin-right: 5px;
-          margin-left: 2px;
-        }
+    .prefix-reserve-title {
+      background-color: #F3F2F1;
+      display: inline-flex;
+      align-items: center;
+      border-radius: 100px;
+      vertical-align: middle;
 
-        .prefix-reserve-label {
-          font-size: 14px;
-          font-weight: 400;
-          color: #2F6FA7;
-          margin-top: 2px;
-          margin-bottom: 2px;
-          margin-right: 10px;
-        }
+      .reserved-indicator {
+        width: 18px;
+        margin-right: 5px;
+        margin-left: 2px;
+      }
+
+      .prefix-reserve-label {
+        font-size: 14px;
+        font-weight: 400;
+        color: #2F6FA7;
+        margin-top: 2px;
+        margin-bottom: 2px;
+        margin-right: 10px;
       }
     }
 

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

@@ -250,20 +250,20 @@
                         <span class="version-title">
                             @Model.Version
                         </span>
-                        @if (Model.IsVerified.HasValue && Model.IsVerified.Value)
-                        {
-                            <span class="prefix-reserve-title">
-                                <img class="reserved-indicator"
-                                        src="~/Content/gallery/img/reserved-indicator.svg"
-                                        @ViewHelpers.ImageFallback(Url.Absolute("~/Content/gallery/img/reserved-indicator-25x25.png"))
-                                        data-content="@Strings.ReservedNamespace_ReservedIndicatorTooltip" tabindex="0"
-                                        alt="@Strings.ReservedNamespace_ReservedIndicatorTooltip"/>
-                                <a href="https://docs.microsoft.com/en-us/nuget/nuget-org/id-prefix-reservation" class="prefix-reserve-label">
-                                    Prefix Reserved
-                                </a>
-                            </span>
-                        }
                     </h1>
+                    @if (Model.IsVerified.HasValue && Model.IsVerified.Value)
+                    {
+                        <span class="prefix-reserve-title" aria-hidden="true">
+                            <img class="reserved-indicator" aria-hidden="true"
+                                    src="~/Content/gallery/img/reserved-indicator.svg"
+                                    @ViewHelpers.ImageFallback(Url.Absolute("~/Content/gallery/img/reserved-indicator-25x25.png"))
+                                    data-content="@Strings.ReservedNamespace_ReservedIndicatorTooltip" tabindex="0"
+                                    alt="@Strings.ReservedNamespace_ReservedIndicatorTooltip"/>
+                            <a href="https://docs.microsoft.com/en-us/nuget/nuget-org/id-prefix-reservation" class="prefix-reserve-label" ari-hidden="true">
+                                Prefix Reserved
+                            </a>
+                        </span>
+                    }
                 </div>
 
                 @if (Model.CanDisplayTargetFrameworks())