From 0efa986c929c78d9504588d0e7edf26802cb559b Mon Sep 17 00:00:00 2001
From: Daniel Jacinto <dajacint@microsoft.com>
Date: Tue, 11 Apr 2023 13:57:09 -0700
Subject: [PATCH] [A11y] TFM table differentiate versions for screen readers
 (#9463)

---
 .../Views/Packages/_SupportedFrameworksTable.cshtml   | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/NuGetGallery/Views/Packages/_SupportedFrameworksTable.cshtml b/src/NuGetGallery/Views/Packages/_SupportedFrameworksTable.cshtml
index eb83f49c6c..223b5f7ec5 100644
--- a/src/NuGetGallery/Views/Packages/_SupportedFrameworksTable.cshtml
+++ b/src/NuGetGallery/Views/Packages/_SupportedFrameworksTable.cshtml
@@ -3,7 +3,10 @@
     <thead>
         <tr>
             <th scope="col" class="framework-table-title"><b>Product</b></th>
-            <th scope="col" class="framework-table-title"><b>Versions</b></th>
+            <th scope="col" class="framework-table-title">
+                <b aria-hidden="true" >Versions</b>
+                <span class="sr-only">Compatible and additional computed target framework versions.</span>
+            </th>
         </tr>
     </thead>
     <tbody>
@@ -21,11 +24,13 @@
                         {
                             if (frameworkVersion.IsComputed)
                             {
-                                <span class="framework-badge-computed framework-table-margin">@frameworkVersion.Framework.GetShortFolderName()</span>
+                                <span aria-hidden="true" class="framework-badge-computed framework-table-margin">@frameworkVersion.Framework.GetShortFolderName()</span>
+                                <span class="sr-only">@frameworkVersion.Framework.GetShortFolderName() was computed.&nbsp;</span>
                             }
                             else
                             {
-                                <span class="framework-badge-asset framework-table-margin">@frameworkVersion.Framework.GetShortFolderName()</span>
+                                <span aria-hidden="true" class="framework-badge-asset framework-table-margin">@frameworkVersion.Framework.GetShortFolderName()</span>
+                                <span class="sr-only">@frameworkVersion.Framework.GetShortFolderName() is compatible.&nbsp;</span>
                             }
                         }
                     </td>