Fix broken ComparisonTable columns on screen readers (#694)

* remove aria-hidden from ComparisonTable

* add changeset

* fix axe violation

* github-actions[bot] Regenerated snapshots

* improve changeset

* fix styles

* snapshots

---------

Co-authored-by: joshfarrant <joshfarrant@users.noreply.github.com>

.changeset/great-houses-argue.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Improved screen reader accuracy of column indexes in `ComparisonTable`.

packages/react/src/ComparisonTable/ComparisonTable.module.css

@@ -117,17 +117,17 @@
     text-align: left;
   }
 
-  .ComparisonTable th:first-of-type {
+  .ComparisonTable .ComparisonTable-cell-heading:first-child {
     width: 25%;
     margin-right: 40px;
   }
 
-  .ComparisonTable tr td:nth-of-type(1),
-  .ComparisonTable tr:nth-of-type(1) th:nth-of-type(2) {
+  .ComparisonTable tr td:nth-of-type(1):not(.ComparisonTable-cell-heading),
+  .ComparisonTable tr:nth-of-type(1) .ComparisonTable-cell-heading:nth-child(2) {
     width: 40%;
   }
-  .ComparisonTable tr td:nth-of-type(2),
-  .ComparisonTable tr:nth-of-type(1) th:nth-of-type(3) {
+  .ComparisonTable tr td:nth-of-type(2):not(.ComparisonTable-cell-heading),
+  .ComparisonTable tr:nth-of-type(1) .ComparisonTable-cell-heading:nth-child(3) {
     width: 35%;
     margin-left: 40px;
   }

packages/react/src/ComparisonTable/ComparisonTable.tsx

@@ -57,8 +57,7 @@ export const _ComparisonTable = forwardRef(
               if (rowChild.type === Cell) {
                 const isFeatured = rowChildIndex === featuredColumn
                 return React.cloneElement(rowChild, {
-                  as: 'th',
-                  'aria-hidden': !rowChild.props.children ? 'true' : undefined,
+                  as: rowChild.props.children ? 'th' : 'td',
                   className: clsx(
                     styles['ComparisonTable-cell'],
                     styles[`ComparisonTable-cell-heading`],