From 44ac6c7227673a0d62523d03e8794058a42bc33d Mon Sep 17 00:00:00 2001 From: Artem_Blazhko Date: Mon, 27 Jan 2025 22:44:04 +0200 Subject: [PATCH] Fix accessibility issues with requests list --- CHANGELOG.md | 1 + .../routes/RequestsRoute/RequestsRoute.js | 23 ++----------------- .../RequestsRoute/RequestsRoute.test.js | 11 --------- src/routes/RequestsRoute.js | 23 ++----------------- src/routes/RequestsRoute.test.js | 11 --------- 5 files changed, 5 insertions(+), 64 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5539be72..4ac2b4b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ * React v19: refactor away from default props for functional components. Refs UIREQ-1101. * Add icons to requests action menu. Refs UIREQ-1116. * Revise "Enter" button on New request page. Refs UIREQ-1114. +* 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) diff --git a/src/deprecated/routes/RequestsRoute/RequestsRoute.js b/src/deprecated/routes/RequestsRoute/RequestsRoute.js index 462eed1c..848abdcc 100644 --- a/src/deprecated/routes/RequestsRoute/RequestsRoute.js +++ b/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 = ( ? : ), 'type': rq => , - 'title': rq => setURL(rq.id)}>{(rq.instance ? rq.instance.title : DEFAULT_FORMATTER_VALUE)}, + 'title': rq => {(rq.instance ? rq.instance.title : DEFAULT_FORMATTER_VALUE)}, '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']} diff --git a/src/deprecated/routes/RequestsRoute/RequestsRoute.test.js b/src/deprecated/routes/RequestsRoute/RequestsRoute.test.js index df22b37b..82e634fe 100644 --- a/src/deprecated/routes/RequestsRoute/RequestsRoute.test.js +++ b/src/deprecated/routes/RequestsRoute/RequestsRoute.test.js @@ -259,8 +259,6 @@ SearchAndSort.mockImplementation(jest.fn(({ onFilterChange, parentResources, renderFilters, - resultIsSelected, - viewRecordOnCollapse, customPaneSub, columnMapping, resultsFormatter, @@ -269,12 +267,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 @@ -1121,7 +1113,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); @@ -1130,7 +1121,6 @@ describe('RequestsRoute', () => { const listFormatter = getListFormatter( { getRowURL: getRowURLMock, - setURL: setURLMock, }, { intl, @@ -1338,7 +1328,6 @@ describe('RequestsRoute', () => { it('should render "TextLink" with correct props', () => { const expectedProps = { to: requestWithData.id, - onClick: expect.any(Function), }; render(listFormatter.title(requestWithData)); diff --git a/src/routes/RequestsRoute.js b/src/routes/RequestsRoute.js index beadb785..b5b93238 100644 --- a/src/routes/RequestsRoute.js +++ b/src/routes/RequestsRoute.js @@ -235,7 +235,6 @@ export const urls = { export const getListFormatter = ( { getRowURL, - setURL, }, { intl, @@ -288,7 +287,7 @@ export const getListFormatter = ( ? : ), 'type': rq => , - 'title': rq => setURL(rq.id)}>{(rq.instance ? rq.instance.title : DEFAULT_FORMATTER_VALUE)}, + 'title': rq => {(rq.instance ? rq.instance.title : DEFAULT_FORMATTER_VALUE)}, '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 @@ class RequestsRoute extends React.Component { errorModalData: {}, servicePointId: '', requests: [], - selectedId: '', selectedRows: {}, titleLevelRequestsFeatureEnabled, createTitleLevelRequestsByDefault, @@ -1077,20 +1075,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) => { @@ -1518,7 +1502,6 @@ class RequestsRoute extends React.Component { const resultsFormatter = getListFormatter( { getRowURL: this.getRowURL, - setURL: this.setURL, }, { intl, @@ -1741,7 +1724,7 @@ class RequestsRoute extends React.Component { copies: { max: 95 }, }} columnMapping={columnLabels} - resultsRowClickHandlers={false} + hasRowClickHandlers={false} resultsFormatter={resultsFormatter} resultRowFormatter={DefaultMCLRowFormatter} newRecordInitialValues={initialValues} @@ -1772,11 +1755,9 @@ class RequestsRoute extends React.Component { 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']} diff --git a/src/routes/RequestsRoute.test.js b/src/routes/RequestsRoute.test.js index bfa70970..e67ee1b2 100644 --- a/src/routes/RequestsRoute.test.js +++ b/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));