Fix accessibility issues related to mediated requests list (#90)

folio-org · Jan 27, 2025 · db5bcf7 · db5bcf7
1 parent 0057e00
commit db5bcf7
Showing 5 changed files with 42 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * Increase code coverage of RequestForm.js file by jest/RTL tests. Refs UIREQMED-69.
 * Fix issue with search field when user clears search value. Refs UIREQMED-75.
 * Fix accessibility issues. Refs UIREQMED-74.
+* Fix accessibility issues related to mediated requests list. Refs UIREQMED-76.
 
 ## [2.0.1] (https://github.com/folio-org/ui-requests-mediated/tree/v2.0.1) (2024-12-06)
 [Full Changelog](https://github.com/folio-org/ui-requests-mediated/compare/v2.0.0...v2.0.1)

diff --git a/...onents/MediatedRequestsActivities/components/MediatedRequestsList/MediatedRequestsList.js b/...onents/MediatedRequestsActivities/components/MediatedRequestsList/MediatedRequestsList.js
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import {
-  useHistory,
   useLocation,
 } from 'react-router-dom';
 import {
@@ -15,6 +14,7 @@ import {
   MultiColumnList,
   FormattedTime,
   MCLPagingTypes,
+  TextLink,
 } from '@folio/stripes/components';
 
 import {
@@ -55,9 +55,13 @@ export const COLUMN_WIDTHS = {
   [MEDIATED_REQUESTS_RECORD_FIELD_NAME.REQUESTER]: { max: 120 },
   [MEDIATED_REQUESTS_RECORD_FIELD_NAME.REQUESTER_BARCODE]: { max: 120 },
 };
-export const mediatedRequestsListFormatter = {
+export const getMediatedRequestsListFormatter = (location) => ({
   [MEDIATED_REQUESTS_RECORD_FIELD_NAME.TITLE]: (mediatedRequest) => (
-    get(mediatedRequest, MEDIATED_REQUESTS_RECORD_FIELD_PATH[MEDIATED_REQUESTS_RECORD_FIELD_NAME.TITLE], DEFAULT_VIEW_VALUE)
+    <TextLink
+      to={`/${MODULE_ROUTE}/${MEDIATED_REQUESTS_ACTIVITIES}/preview/${mediatedRequest[MEDIATED_REQUESTS_RECORD_FIELD_NAME.ID]}${location.search}`}
+    >
+      {get(mediatedRequest, MEDIATED_REQUESTS_RECORD_FIELD_PATH[MEDIATED_REQUESTS_RECORD_FIELD_NAME.TITLE], DEFAULT_VIEW_VALUE)}
+    </TextLink>
   ),
   [MEDIATED_REQUESTS_RECORD_FIELD_NAME.ITEM_BARCODE]: (mediatedRequest) => (
     get(mediatedRequest, MEDIATED_REQUESTS_RECORD_FIELD_PATH[MEDIATED_REQUESTS_RECORD_FIELD_NAME.ITEM_BARCODE], DEFAULT_VIEW_VALUE)
@@ -87,7 +91,7 @@ export const mediatedRequestsListFormatter = {
   [MEDIATED_REQUESTS_RECORD_FIELD_NAME.REQUESTER_BARCODE]: (mediatedRequest) => (
     get(mediatedRequest, MEDIATED_REQUESTS_RECORD_FIELD_PATH[MEDIATED_REQUESTS_RECORD_FIELD_NAME.REQUESTER_BARCODE], DEFAULT_VIEW_VALUE)
   ),
-};
+});
 export const emptyMessage = (source, query) => (
   source
     ? <SearchAndSortNoResultsMessage
@@ -107,15 +111,10 @@ const MediatedRequestsList = ({
   onSort,
   onNeedMoreData,
 }) => {
-  const history = useHistory();
   const location = useLocation();
   const sortOrder = query.sort || '';
   const totalCount = getTotalCount(source);
 
-  const onRowClick = (e, row) => {
-    history.push(`/${MODULE_ROUTE}/${MEDIATED_REQUESTS_ACTIVITIES}/preview/${row.id}${location.search}`);
-  };
-
   return (
     <MultiColumnList
       id="mediatedRequestsList"
@@ -125,9 +124,8 @@ const MediatedRequestsList = ({
       columnMapping={MEDIATED_REQUESTS_RECORD_TRANSLATIONS}
       contentData={contentData}
       totalCount={totalCount}
-      formatter={mediatedRequestsListFormatter}
+      formatter={getMediatedRequestsListFormatter(location)}
       isEmptyMessage={emptyMessage(source, query)}
-      onRowClick={onRowClick}
       onNeedMoreData={onNeedMoreData}
       onHeaderClick={onSort}
       sortOrder={sortOrder.replace(/^-/, '').replace(/,.*/, '')}

diff --git a/...s/MediatedRequestsActivities/components/MediatedRequestsList/MediatedRequestsList.test.js b/...s/MediatedRequestsActivities/components/MediatedRequestsList/MediatedRequestsList.test.js
@@ -4,6 +4,7 @@ import {
 
 import {
   render,
+  screen,
 } from '@folio/jest-config-stripes/testing-library/react';
 
 import {
@@ -26,7 +27,7 @@ import MediatedRequestsList, {
   DESCENDING,
   getSortOrder,
   COLUMN_WIDTHS,
-  mediatedRequestsListFormatter,
+  getMediatedRequestsListFormatter,
   emptyMessage,
 } from './MediatedRequestsList';
 
@@ -43,6 +44,9 @@ const source = {
 const query = {
   query: '',
 };
+const location = {
+  search: '?filters=requestLevel.Title',
+};
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -93,7 +97,6 @@ describe('MediatedRequestsList', () => {
       columnMapping: MEDIATED_REQUESTS_RECORD_TRANSLATIONS,
       contentData,
       totalCount: 0,
-      formatter: mediatedRequestsListFormatter,
       sortOrder: '',
       sortDirection: 'ascending',
     };
@@ -102,7 +105,7 @@ describe('MediatedRequestsList', () => {
   });
 });
 
-describe('mediatedRequestsListFormatter', () => {
+describe('getMediatedRequestsListFormatter', () => {
   const title = 'title value';
   const itemBarcode = 'barcode value';
   const requesterBarcode = 'requester barcode value';
@@ -124,30 +127,33 @@ describe('mediatedRequestsListFormatter', () => {
     item,
     status,
   };
+  const formatter = getMediatedRequestsListFormatter(location);
 
   describe('title', () => {
-    it('should return title', () => {
-      expect(mediatedRequestsListFormatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.TITLE](mediatedRequest)).toBe(title);
+    beforeEach(() => {
+      render(formatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.TITLE](mediatedRequest));
     });
 
-    it('should return default value for title', () => {
-      expect(mediatedRequestsListFormatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.TITLE]()).toBe(DEFAULT_VIEW_VALUE);
+    it('should render title', () => {
+      formatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.TITLE](mediatedRequest);
+
+      expect(screen.getByText(title)).toBeInTheDocument();
     });
   });
 
   describe('barcode', () => {
     it('should return barcode', () => {
-      expect(mediatedRequestsListFormatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.ITEM_BARCODE](mediatedRequest)).toBe(itemBarcode);
+      expect(formatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.ITEM_BARCODE](mediatedRequest)).toBe(itemBarcode);
     });
 
     it('should return default value for barcode', () => {
-      expect(mediatedRequestsListFormatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.ITEM_BARCODE]()).toBe(DEFAULT_VIEW_VALUE);
+      expect(formatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.ITEM_BARCODE]()).toBe(DEFAULT_VIEW_VALUE);
     });
   });
 
   describe('mediated request date', () => {
     beforeEach(() => {
-      render(mediatedRequestsListFormatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.MEDIATED_REQUEST_DATE](mediatedRequest));
+      render(formatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.MEDIATED_REQUEST_DATE](mediatedRequest));
     });
 
     it('should render app icon with correct props', () => {
@@ -166,39 +172,39 @@ describe('mediatedRequestsListFormatter', () => {
 
   describe('effective call number', () => {
     it('should trigger effective call number with correct argument', () => {
-      mediatedRequestsListFormatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.EFFECTIVE_CALL_NUMBER](mediatedRequest);
+      formatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.EFFECTIVE_CALL_NUMBER](mediatedRequest);
 
       expect(effectiveCallNumber).toHaveBeenCalledWith(item);
     });
   });
 
   describe('status', () => {
     it('should return status', () => {
-      expect(mediatedRequestsListFormatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.STATUS](mediatedRequest)).toBe(status);
+      expect(formatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.STATUS](mediatedRequest)).toBe(status);
     });
 
     it('should return default value for status', () => {
-      expect(mediatedRequestsListFormatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.STATUS]()).toBe(DEFAULT_VIEW_VALUE);
+      expect(formatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.STATUS]()).toBe(DEFAULT_VIEW_VALUE);
     });
   });
 
   describe('requester', () => {
     it('should return requester', () => {
-      expect(mediatedRequestsListFormatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.REQUESTER](mediatedRequest)).toBe(lastName);
+      expect(formatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.REQUESTER](mediatedRequest)).toBe(lastName);
     });
 
     it('should return default value for requester', () => {
-      expect(mediatedRequestsListFormatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.REQUESTER]()).toBe(DEFAULT_VIEW_VALUE);
+      expect(formatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.REQUESTER]()).toBe(DEFAULT_VIEW_VALUE);
     });
   });
 
   describe('requester barcode', () => {
     it('should return requester barcode', () => {
-      expect(mediatedRequestsListFormatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.REQUESTER_BARCODE](mediatedRequest)).toBe(requesterBarcode);
+      expect(formatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.REQUESTER_BARCODE](mediatedRequest)).toBe(requesterBarcode);
     });
 
     it('should return default value for requester barcode', () => {
-      expect(mediatedRequestsListFormatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.REQUESTER_BARCODE]()).toBe(DEFAULT_VIEW_VALUE);
+      expect(formatter[MEDIATED_REQUESTS_RECORD_FIELD_NAME.REQUESTER_BARCODE]()).toBe(DEFAULT_VIEW_VALUE);
     });
   });
 });

diff --git a/src/constants/mediatedRequestsActivities.js b/src/constants/mediatedRequestsActivities.js
@@ -12,6 +12,7 @@ export const MEDIATED_REQUEST_SEARCH_PARAMS = {
 };
 
 export const MEDIATED_REQUESTS_RECORD_FIELD_NAME = {
+  ID: 'id',
   TITLE: 'instanceTitle',
   REQUESTER: 'requester',
   USER_FIRST_NAME: 'requesterFirstName',

diff --git a/test/jest/__mock__/stripesComponents.mock.js b/test/jest/__mock__/stripesComponents.mock.js
@@ -309,5 +309,13 @@ jest.mock('@folio/stripes/components', () => ({
       </div>
     );
   }),
+  TextLink: jest.fn(({
+    to,
+    children,
+  }) => (
+    <a href={to}>
+      {children}
+    </a>
+  )),
   MCLPagingTypes: jest.fn(() => ({})),
 }));