Fix/aria selected attribute removal

src/Analysis/GWASApp/Components/Covariates/Covariates.jsx

@@ -7,6 +7,7 @@ import queryConfig from '../../../SharedUtils/QueryConfig';
 import { useFetch, useFilter } from '../../Utils/formHooks';
 import { useSourceContext } from '../../Utils/Source';
 import SearchBar from '../SearchBar/SearchBar';
+import { AntDTableAccessibilityFix } from '../../../SharedUtils/AccessibilityUtils/AntDAccessibilityFixes';
 
 const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
   const { source } = useSourceContext();
@@ -76,6 +77,7 @@ const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
   }
 
   if (covariates?.status === 'success') {
+    AntDTableAccessibilityFix();
     return (
       <div data-tour='select-concept'>
         <SearchBar

src/Analysis/GWASApp/Components/SelectCohort/Utils/CohortDefinitions.jsx

@@ -6,6 +6,7 @@ import { fetchCohortDefinitions } from '../../../Utils/cohortMiddlewareApi';
 import queryConfig from '../../../../SharedUtils/QueryConfig';
 import { useFetch, useFilter } from '../../../Utils/formHooks';
 import { useSourceContext } from '../../../Utils/Source';
+import { AntDTableAccessibilityFix } from '../../../../SharedUtils/AccessibilityUtils/AntDAccessibilityFixes';
 
 const CohortDefinitions = ({
   selectedCohort = undefined,
@@ -48,26 +49,30 @@ const CohortDefinitions = ({
   ];
   if (cohorts?.status === 'error') return <React.Fragment>Error getting data for table</React.Fragment>;
 
-  return cohorts?.status === 'success' ? (
-    <Table
-      className='GWASUI-table1'
-      rowKey='cohort_definition_id'
-      size='middle'
-      pagination={{
-        defaultPageSize: 10,
-        showSizeChanger: true,
-        pageSizeOptions: ['10', '20', '50', '100', '500'],
-      }}
-      onRow={(selectedRow) => ({
-        onClick: () => {
-          handleCohortSelect(selectedRow);
-        },
-      })}
-      rowSelection={cohortSelection(selectedCohort)}
-      columns={cohortTableConfig}
-      dataSource={displayedCohorts}
-    />
-  ) : (
+  if (cohorts?.status === 'success') {
+    AntDTableAccessibilityFix();
+    return (
+      <Table
+        className='GWASUI-table1'
+        rowKey='cohort_definition_id'
+        size='middle'
+        pagination={{
+          defaultPageSize: 10,
+          showSizeChanger: true,
+          pageSizeOptions: ['10', '20', '50', '100', '500'],
+        }}
+        onRow={(selectedRow) => ({
+          onClick: () => {
+            handleCohortSelect(selectedRow);
+          },
+        })}
+        rowSelection={cohortSelection(selectedCohort)}
+        columns={cohortTableConfig}
+        dataSource={displayedCohorts}
+      />
+    );
+  }
+  return (
     <React.Fragment>
       <div className='GWASUI-spinnerContainer GWASUI-emptyTable'>
         <Spin />

src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/Fixes/FixPaginationDropdown.js

@@ -0,0 +1,20 @@
+import isEnterOrSpace from '../../IsEnterOrSpace';
+import DelayExecution from '../Utils/DelayExecution';
+import RemoveDOMAttribute from '../Utils/RemoveDOMAttribute';
+
+const FixPaginationDropDown = () => {
+  const pageDropdown = document.querySelector(
+    '.ant-pagination-options-size-changer',
+  );
+  if (pageDropdown) {
+    pageDropdown.addEventListener('click', () => {
+      DelayExecution(RemoveDOMAttribute, '.ant-select-item', 'aria-selected');
+    });
+    pageDropdown.addEventListener('keydown', (event) => {
+      if (isEnterOrSpace(event)) {
+        DelayExecution(RemoveDOMAttribute, '.ant-select-item', 'aria-selected');
+      }
+    });
+  }
+};
+export default FixPaginationDropDown;

src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/Utils/DelayExecution.js

@@ -0,0 +1,11 @@
+const DELAY_TIME = 250;
+
+// Utility function to call other function with a delay for loading
+// example: DelayExecution(myFunction, 'parameter1', 'parameter2');
+const DelayExecution = (fn, ...args) => {
+  setTimeout(() => {
+    fn(...args);
+  }, DELAY_TIME);
+};
+
+export default DelayExecution;

src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/Utils/RemoveDOMAttribute.js

@@ -0,0 +1,22 @@
+/*
+ * Used to update Remove Dom attributes
+ * example: RemoveDOMAttribute('.ant-radio-input','aria-selected',)
+ */
+
+const RemoveDOMAttribute = (selector, attribute) => {
+  const elements = document.querySelectorAll(selector);
+  elements?.forEach((element) => {
+    if (element) {
+      console.log(element);
+      element.removeAttribute(attribute);
+    } else {
+      // eslint-disable-next-line no-console
+      console.error(
+        'Unable to find selector in removeDOMAttribute: ',
+        selector,
+      );
+    }
+  });
+};
+
+export default RemoveDOMAttribute;

src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js

@@ -0,0 +1,7 @@
+import DelayExecution from './Utils/DelayExecution';
+import FixPaginationDropDown from './Fixes/FixPaginationDropdown';
+
+// eslint-disable-next-line import/prefer-default-export
+export const AntDTableAccessibilityFix = () => {
+  DelayExecution(FixPaginationDropDown);
+};