UIREQ-1231: Fix accessibility issues with requests list

CHANGELOG.md

@@ -8,6 +8,7 @@
 * Add icons to requests action menu. Refs UIREQ-1116.
 * Revise "Enter" button on New request page. Refs UIREQ-1114.
 * Change import of `exportToCsv` from `stripes-util` to `stripes-components`. Refs UIREQ-1138.
+* Fix accessibility issues with requests list. Refs UIREQ-1231.
 
 ## [11.0.3] (https://github.com/folio-org/ui-requests/tree/v11.0.3) (2025-01-10)
 [Full Changelog](https://github.com/folio-org/ui-requests/compare/v11.0.2...v11.0.3)

src/deprecated/routes/RequestsRoute/RequestsRoute.js

@@ -217,7 +217,6 @@ export const urls = {
 export const getListFormatter = (
   {
     getRowURL,
-    setURL,
   },
   {
     intl,
@@ -269,7 +268,7 @@ export const getListFormatter = (
     ? <FormattedMessage id={requestStatusesTranslations[rq.status]} />
     : <NoValue />),
   'type': rq => <FormattedMessage id={requestTypesTranslations[rq.requestType]} />,
-  'title': rq => <TextLink to={getRowURL(rq.id)} onClick={() => setURL(rq.id)}>{(rq.instance ? rq.instance.title : DEFAULT_FORMATTER_VALUE)}</TextLink>,
+  'title': rq => <TextLink to={getRowURL(rq.id)}>{(rq.instance ? rq.instance.title : DEFAULT_FORMATTER_VALUE)}</TextLink>,
   'year': rq => getFormattedYears(rq.instance?.publication, DEFAULT_DISPLAYED_YEARS_AMOUNT),
   'callNumber': rq => effectiveCallNumber(rq.item),
   'servicePoint': rq => get(rq, 'pickupServicePoint.name', DEFAULT_FORMATTER_VALUE),
@@ -649,7 +648,6 @@ class RequestsRoute extends React.Component {
       errorModalData: {},
       servicePointId: '',
       requests: [],
-      selectedId: '',
       selectedRows: {},
       titleLevelRequestsFeatureEnabled,
       createTitleLevelRequestsByDefault,
@@ -1009,20 +1007,6 @@ class RequestsRoute extends React.Component {
     return `${path}/view/${id}${search}`;
   }
 
-  setURL = (id) => {
-    this.setState({
-      selectedId: id,
-    });
-  }
-
-  resultIsSelected = ({ item }) => item.id === this.state.selectedId;
-
-  viewRecordOnCollapse = () => {
-    this.setState({
-      selectedId: null,
-    });
-  }
-
   getHelperResourcePath = (helper, id) => `circulation/requests/${id}`;
 
   massageNewRecord = (requestData) => {
@@ -1438,7 +1422,6 @@ class RequestsRoute extends React.Component {
     const resultsFormatter = getListFormatter(
       {
         getRowURL: this.getRowURL,
-        setURL: this.setURL,
       },
       {
         intl,
@@ -1660,7 +1643,7 @@ class RequestsRoute extends React.Component {
                 copies: { max: 95 },
               }}
               columnMapping={columnLabels}
-              resultsRowClickHandlers={false}
+              hasRowClickHandlers={false}
               resultsFormatter={resultsFormatter}
               resultRowFormatter={DefaultMCLRowFormatter}
               newRecordInitialValues={initialValues}
@@ -1689,11 +1672,9 @@ class RequestsRoute extends React.Component {
                 onDuplicate: this.onDuplicate,
                 buildRecordsForHoldsShelfReport: this.buildRecordsForHoldsShelfReport,
               }}
-              viewRecordOnCollapse={this.viewRecordOnCollapse}
               viewRecordPerms="ui-requests.view"
               newRecordPerms="ui-requests.create"
               renderFilters={this.renderFilters}
-              resultIsSelected={this.resultIsSelected}
               onFilterChange={this.handleFilterChange}
               sortableColumns={['requestDate', 'title', 'year', 'itemBarcode', 'callNumber', 'type', 'requestStatus',
                 'position', 'servicePoint', 'requester', 'requesterBarcode', 'proxy', 'copies', 'printed']}

src/deprecated/routes/RequestsRoute/RequestsRoute.test.js

@@ -257,8 +257,6 @@ SearchAndSort.mockImplementation(jest.fn(({
   onFilterChange,
   parentResources,
   renderFilters,
-  resultIsSelected,
-  viewRecordOnCollapse,
   customPaneSub,
   columnMapping,
   resultsFormatter,
@@ -267,12 +265,6 @@ SearchAndSort.mockImplementation(jest.fn(({
     onDuplicate(parentResources.records.records[0]);
     buildRecordsForHoldsShelfReport();
     massageNewRecord({});
-    resultIsSelected({
-      item: {
-        id: 'id',
-      },
-    });
-    viewRecordOnCollapse();
   };
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -1119,7 +1111,6 @@ describe('RequestsRoute', () => {
 
   describe('getListFormatter', () => {
     const getRowURLMock = jest.fn(id => id);
-    const setURLMock = jest.fn(id => id);
     const getPrintContentRefMock = jest.fn(id => id);
     const isPrintableMock = jest.fn(id => id);
     const toggleRowSelectionMock = jest.fn(id => id);
@@ -1128,7 +1119,6 @@ describe('RequestsRoute', () => {
     const listFormatter = getListFormatter(
       {
         getRowURL: getRowURLMock,
-        setURL: setURLMock,
       },
       {
         intl,
@@ -1336,7 +1326,6 @@ describe('RequestsRoute', () => {
       it('should render "TextLink" with correct props', () => {
         const expectedProps = {
           to: requestWithData.id,
-          onClick: expect.any(Function),
         };
 
         render(listFormatter.title(requestWithData));

src/routes/RequestsRoute.js

@@ -235,7 +235,6 @@
 export const getListFormatter = (
   {
     getRowURL,
-    setURL,
   },
   {
     intl,
@@ -288,7 +287,7 @@
     ? <FormattedMessage id={requestStatusesTranslations[rq.status]} />
     : <NoValue />),
   'type': rq => <FormattedMessage id={requestTypesTranslations[rq.requestType]} />,
-  'title': rq => <TextLink to={getRowURL(rq.id)} onClick={() => setURL(rq.id)}>{(rq.instance ? rq.instance.title : DEFAULT_FORMATTER_VALUE)}</TextLink>,
+  'title': rq => <TextLink to={getRowURL(rq.id)}>{(rq.instance ? rq.instance.title : DEFAULT_FORMATTER_VALUE)}</TextLink>,
   'year': rq => getFormattedYears(rq.instance?.publication, DEFAULT_DISPLAYED_YEARS_AMOUNT),
   'callNumber': rq => effectiveCallNumber(rq.item),
   'servicePoint': rq => get(rq, 'pickupServicePoint.name', DEFAULT_FORMATTER_VALUE),
@@ -660,7 +659,6 @@
       errorModalData: {},
       servicePointId: '',
       requests: [],
-      selectedId: '',
       selectedRows: {},
       titleLevelRequestsFeatureEnabled,
       createTitleLevelRequestsByDefault,
@@ -1077,20 +1075,6 @@
     return `${path}/view/${id}${search}`;
   }
 
-  setURL = (id) => {
-    this.setState({
-      selectedId: id,
-    });
-  }
-
-  resultIsSelected = ({ item }) => item.id === this.state.selectedId;
-
-  viewRecordOnCollapse = () => {
-    this.setState({
-      selectedId: null,
-    });
-  }
-
   getHelperResourcePath = (helper, id) => `circulation/requests/${id}`;
 
   massageNewRecord = (requestData) => {
@@ -1518,7 +1502,6 @@
     const resultsFormatter = getListFormatter(
       {
         getRowURL: this.getRowURL,
-        setURL: this.setURL,
       },
       {
         intl,
@@ -1552,7 +1535,7 @@
             </Icon>
           </Button>
         </IfPermission>
           {csvReportPending ?
             <LoadingButton>
               <FormattedMessage id="ui-requests.csvReportPending" />
             </LoadingButton> :
@@ -1741,7 +1724,7 @@
                 copies: { max: 95 },
               }}
               columnMapping={columnLabels}
-              resultsRowClickHandlers={false}
+              hasRowClickHandlers={false}
               resultsFormatter={resultsFormatter}
               resultRowFormatter={DefaultMCLRowFormatter}
               newRecordInitialValues={initialValues}
@@ -1772,11 +1755,9 @@
                 isEcsTlrSettingReceived,
                 isEcsTlrSettingEnabled,
               }}
-              viewRecordOnCollapse={this.viewRecordOnCollapse}
               viewRecordPerms="ui-requests.view"
               newRecordPerms="ui-requests.create"
               renderFilters={this.renderFilters}
-              resultIsSelected={this.resultIsSelected}
               onFilterChange={this.handleFilterChange}
               sortableColumns={['requestDate', 'title', 'year', 'itemBarcode', 'callNumber', 'type', 'requestStatus',
                 'position', 'servicePoint', 'requester', 'requesterBarcode', 'retrievalServicePoint', ...(isProxyAvailable ? ['proxy'] : []), 'copies', 'printed']}

src/routes/RequestsRoute.test.js

@@ -269,8 +269,6 @@ SearchAndSort.mockImplementation(jest.fn(({
   onFilterChange,
   parentResources,
   renderFilters,
-  resultIsSelected,
-  viewRecordOnCollapse,
   customPaneSub,
   columnMapping,
   resultsFormatter,
@@ -280,12 +278,6 @@ SearchAndSort.mockImplementation(jest.fn(({
     onDuplicate(parentResources.records.records[0]);
     buildRecordsForHoldsShelfReport();
     massageNewRecord({});
-    resultIsSelected({
-      item: {
-        id: 'id',
-      },
-    });
-    viewRecordOnCollapse();
   };
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -1277,7 +1269,6 @@ describe('RequestsRoute', () => {
 
   describe('getListFormatter', () => {
     const getRowURLMock = jest.fn(id => id);
-    const setURLMock = jest.fn(id => id);
     const getPrintContentRefMock = jest.fn(id => id);
     const isPrintableMock = jest.fn(id => id);
     const toggleRowSelectionMock = jest.fn(id => id);
@@ -1286,7 +1277,6 @@ describe('RequestsRoute', () => {
     const listFormatter = getListFormatter(
       {
         getRowURL: getRowURLMock,
-        setURL: setURLMock,
       },
       {
         intl,
@@ -1497,7 +1487,6 @@ describe('RequestsRoute', () => {
       it('should render "TextLink" with correct props', () => {
         const expectedProps = {
           to: requestWithData.id,
-          onClick: expect.any(Function),
         };
 
         render(listFormatter.title(requestWithData));