From 012ad5e367d97c9138887c6b3609670957ca9c14 Mon Sep 17 00:00:00 2001
From: Mark Pedrotti <pedrottimark@gmail.com>
Date: Mon, 24 Jun 2024 09:00:00 -0400
Subject: [PATCH] ROX-24892: Fix accessibility issues in compliance clusters
 (#11653)

---
 .../platform/src/Containers/Compliance/List/SidePanel.js | 7 ++-----
 ui/apps/platform/src/Containers/Compliance/List/Table.js | 2 +-
 .../Compliance/List}/TableGroup.js                       | 9 +++++----
 3 files changed, 8 insertions(+), 10 deletions(-)
 rename ui/apps/platform/src/{Components => Containers/Compliance/List}/TableGroup.js (95%)

diff --git a/ui/apps/platform/src/Containers/Compliance/List/SidePanel.js b/ui/apps/platform/src/Containers/Compliance/List/SidePanel.js
index 636853ebf5949..20258c1c266e8 100644
--- a/ui/apps/platform/src/Containers/Compliance/List/SidePanel.js
+++ b/ui/apps/platform/src/Containers/Compliance/List/SidePanel.js
@@ -56,16 +56,13 @@ const ComplianceListSidePanel = ({ entityType, entityId, match, location, histor
                 const headerTextComponent = (
                     <div className="w-full flex items-center">
                         <div className="flex items-center" data-testid="side-panel-header">
-                            <Link
-                                to={headerUrl}
-                                className="w-full flex text-primary-700 hover:text-primary-800 focus:text-primary-700"
-                            >
+                            <Link to={headerUrl} className="w-full flex pf-v5-u-link-color">
                                 <div className="flex flex-1 items-center pl-4 leading-normal font-700">
                                     {linkText}
                                 </div>
                             </Link>
                             <Link
-                                className="mx-2 text-primary-700 hover:text-primary-800 p-1 bg-primary-300 rounded flex"
+                                className="mx-2 pf-v5-u-link-color p-1 rounded flex"
                                 to={headerUrl}
                                 target="_blank"
                                 aria-label="External link"
diff --git a/ui/apps/platform/src/Containers/Compliance/List/Table.js b/ui/apps/platform/src/Containers/Compliance/List/Table.js
index 2070b888587cc..3169754a3c6ac 100644
--- a/ui/apps/platform/src/Containers/Compliance/List/Table.js
+++ b/ui/apps/platform/src/Containers/Compliance/List/Table.js
@@ -12,7 +12,6 @@ import Table from 'Components/Table';
 import { PanelNew, PanelBody, PanelHead, PanelHeadEnd, PanelTitle } from 'Components/Panel';
 import Loader from 'Components/Loader';
 import TablePagination from 'Components/TablePagination';
-import TableGroup from 'Components/TableGroup';
 import { getColumnsByEntity, getColumnsByStandard } from 'constants/tableColumns';
 import Query from 'Components/CacheFirstQuery';
 import NoResultsMessage from 'Components/NoResultsMessage';
@@ -23,6 +22,7 @@ import { LIST_STANDARD, STANDARDS_QUERY } from 'queries/standard';
 import queryService from 'utils/queryService';
 
 import { complianceEntityTypes, entityCountNounOrdinaryCase } from '../entitiesForCompliance';
+import TableGroup from './TableGroup';
 
 function getQuery(entityType) {
     switch (entityType) {
diff --git a/ui/apps/platform/src/Components/TableGroup.js b/ui/apps/platform/src/Containers/Compliance/List/TableGroup.js
similarity index 95%
rename from ui/apps/platform/src/Components/TableGroup.js
rename to ui/apps/platform/src/Containers/Compliance/List/TableGroup.js
index 9e05b196c04dd..9cf09c5cf2569 100644
--- a/ui/apps/platform/src/Components/TableGroup.js
+++ b/ui/apps/platform/src/Containers/Compliance/List/TableGroup.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import Table from 'Components/Table';
 import Collapsible from 'react-collapsible';
 import * as Icon from 'react-feather';
-import pluralize from 'pluralize';
+
+import { entityCountNounOrdinaryCase } from '../entitiesForCompliance';
 
 const icons = {
     opened: <Icon.ChevronUp size="14" />,
@@ -63,9 +64,9 @@ class TableGroup extends Component {
                     </div>
                     <h1 className="p-3 pl-0 font-700 text-lg leading-normal">{name}</h1>
                 </div>
-                <div className="flex items-center flex-shrink-0 font-700 text-sm p-3 pr-4 opacity-50">{`${
-                    rows.length
-                } ${pluralize(this.props.entityType, rows.length)}`}</div>
+                <div className="flex items-center flex-shrink-0 p-3 pr-4">
+                    {entityCountNounOrdinaryCase(rows.length, this.props.entityType)}
+                </div>
             </div>
         </div>
     );