ROX-24892: Fix accessibility issues in compliance clusters (stackrox#…

…11653)
shireenf-ibm · Jun 24, 2024 · 012ad5e · 012ad5e
1 parent 93a1fc5
commit 012ad5e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git 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
@@ -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/...pps/platform/src/Components/TableGroup.js → .../Containers/Compliance/List/TableGroup.js b/...pps/platform/src/Components/TableGroup.js → .../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>
     );