Table: Screen reader usage for header cells

This changes the screen reader usage in table header cells to use the
prop instead of the classname itself for consistency and potential CSS
issues.

Author: Venefilyn

frontend/src/components/bodhi/BodhiUpdatesTable.tsx

@@ -49,9 +49,7 @@ const BodhiUpdatesTable = () => {
   const rows = useMemo(() => (data ? data.pages.flat() : []), [data]);
 
   const TableHeads = [
-    <Th key={columnNames.forge}>
-      <span className="pf-v6-u-screen-reader">{columnNames.forge}</span>
-    </Th>,
+    <Th key={columnNames.forge} screenReaderText={columnNames.forge}></Th>,
     <Th key={columnNames.trigger} width={35}>
       {columnNames.trigger}
     </Th>,

frontend/src/components/copr/CoprBuildsTable.tsx

@@ -69,9 +69,7 @@ const CoprBuildsTable = () => {
   const rows = useMemo(() => (data ? data.pages.flat() : []), [data]);
 
   const TableHeads = [
-    <Th key={columnNames.forge}>
-      <span className="pf-v6-u-screen-reader">{columnNames.forge}</span>
-    </Th>,
+    <Th key={columnNames.forge} screenReaderText={columnNames.forge}></Th>,
     <Th key={columnNames.trigger} width={15}>
       {columnNames.trigger}
     </Th>,

frontend/src/components/koji/KojiBuildsTable.tsx

@@ -45,9 +45,7 @@ export const KojiBuildsTable: React.FC<KojiBuildTableProps> = ({ scratch }) => {
   const rows = useMemo(() => (data ? data.pages.flat() : []), [data]);
 
   const TableHeads = [
-    <Th key={columnNames.forge}>
-      <span className="pf-v6-u-screen-reader">{columnNames.forge}</span>
-    </Th>,
+    <Th key={columnNames.forge} screenReaderText={columnNames.forge}></Th>,
     <Th key={columnNames.trigger} width={35}>
       {columnNames.trigger}
     </Th>,

frontend/src/components/koji/KojiTagRequestsTable.tsx

@@ -44,9 +44,7 @@ export const KojiTagRequestsTable = () => {
   const rows = useMemo(() => (data ? data.pages.flat() : []), [data]);
 
   const TableHeads = [
-    <Th key={columnNames.forge}>
-      <span className="pf-v6-u-screen-reader">{columnNames.forge}</span>
-    </Th>,
+    <Th key={columnNames.forge} screenReaderText={columnNames.forge}></Th>,
     <Th key={columnNames.trigger} width={20}>
       {columnNames.trigger}
     </Th>,

frontend/src/components/osh/OSHScansTable.tsx

@@ -50,9 +50,7 @@ const OSHScansTable = () => {
   const rows = useMemo(() => (data ? data.pages.flat() : []), [data]);
 
   const TableHeads = [
-    <Th key={columnNames.forge}>
-      <span className="pf-v6-u-screen-reader">{columnNames.forge}</span>
-    </Th>,
+    <Th key={columnNames.forge} screenReaderText={columnNames.forge}></Th>,
     <Th key={columnNames.trigger} width={35}>
       {columnNames.trigger}
     </Th>,

frontend/src/components/srpm/SRPMBuildsTable.tsx

@@ -45,9 +45,7 @@ export const SRPMBuildsTable = () => {
   const rows = useMemo(() => (data ? data.pages.flat() : []), [data]);
 
   const TableHeads = [
-    <Th key={columnNames.forge}>
-      <span className="pf-v6-u-screen-reader">{columnNames.forge}</span>
-    </Th>,
+    <Th key={columnNames.forge} screenReaderText={columnNames.forge}></Th>,
     <Th key={columnNames.trigger} width={50}>
       {columnNames.trigger}
     </Th>,

frontend/src/components/sync-release/SyncReleasesTable.tsx

@@ -49,9 +49,7 @@ export const SyncReleasesTable: React.FC<SyncReleasesTableProps> = ({
   const rows = useMemo(() => (data ? data.pages.flat() : []), [data]);
 
   const TableHeads = [
-    <Th key={columnNames.forge}>
-      <span className="pf-v6-u-screen-reader">{columnNames.forge}</span>
-    </Th>,
+    <Th key={columnNames.forge} screenReaderText={columnNames.forge}></Th>,
     <Th key={columnNames.trigger} width={25}>
       {columnNames.trigger}
     </Th>,

frontend/src/components/testing-farm/TestingFarmRunsTable.tsx

@@ -46,9 +46,7 @@ export const TestingFarmRunsTable = () => {
   const rows = useMemo(() => (data ? data.pages.flat() : []), [data]);
 
   const TableHeads = [
-    <Th key={columnNames.forge}>
-      <span className="pf-v6-u-screen-reader">{columnNames.forge}</span>
-    </Th>,
+    <Th key={columnNames.forge} screenReaderText={columnNames.forge}></Th>,
     <Th key={columnNames.trigger} width={35}>
       {columnNames.trigger}
     </Th>,