Skip to content

Commit

Permalink
fix: fix search results usability for a11y (#346)
Browse files Browse the repository at this point in the history 
* fix: incorrect logic for determining if search is ongoing, less layout shifts

* chore: add .gitattributes to make release.md less of a nightmare to deal with
  • Loading branch information
@deodorhunter
deodorhunter authored Sep 21, 2023
1 parent 0c58753 commit 8a891b9
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 72 deletions.
1 change: 1 addition & 0 deletions .gitattributes
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
RELEASE.md merge=union
2 changes: 2 additions & 0 deletions RELEASE.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@
### Fix

- Fissato il layout del template Blocco link solo immagini con link esterni, icona accessibilità per link esterni ora è posizionata invece in overlay se presente
- Sistemata la visualizzazione dello stato di caricamento della pagina /search


## Versione 7.21.0 (19/09/2023)

Expand Down
153 changes: 81 additions & 72 deletions src/components/ItaliaTheme/Search/Search.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useIntl, defineMessages } from 'react-intl';
import { values } from 'lodash';
import { values, isEmpty } from 'lodash';
import cx from 'classnames';
import qs from 'query-string';
import moment from 'moment';
Expand Down Expand Up @@ -325,7 +325,7 @@ const Search = () => {
true,
);

searchResults.result &&
!isEmpty(searchResults.result) &&
history.push(
getSearchParamsURL(
searchableText,
Expand All @@ -350,7 +350,6 @@ const Search = () => {
}, 0);
let activeTopics = values(topics).filter((t) => t.value).length;
let activePortalTypes = values(portalTypes).filter((ct) => ct.value).length;

return (
<>
<Helmet title={intl.formatMessage(messages.searchResults)} />
Expand Down Expand Up @@ -615,77 +614,87 @@ const Search = () => {
</aside>

<Col lg={9} tag="section" className="py-lg-5">
{searchResults.loadingResults ? (
<Spinner active />
) : searchResults?.result?.items_total > 0 ? (
<div
className="search-results-wrapper"
role="region"
id="search-results-region"
aria-live="polite"
>
<div className="d-block ordering-widget">
<Row className="pb-3 border-bottom">
<Col xs={6} className="align-self-center">
<p className="d-none d-lg-block" aria-live="polite">
{intl.formatMessage(messages.foundNResults, {
total: searchResults.result.items_total,
})}
</p>
<p className="d-block d-lg-none mb-0 text-right">
{intl.formatMessage(messages.orderBy)}
</p>
</Col>
<Col xs={6}>
<SelectInput
id="search-sort-on"
value={
sortOnOptions.filter((o) => o.value === sortOn)[0]
}
label={intl.formatMessage(messages.orderBy)}
placeholder={
sortOnOptions.find((o) => o.value === sortOn).label
}
onChange={(opt) => setSortOn(opt.value)}
options={sortOnOptions}
defaultValue={sortOnOptions.find(
(o) => o.value === 'relevance',
)}
/>
</Col>
</Row>
</div>
<Row>
{searchResults?.result?.items?.map((item, index) => (
<Col md={12} key={item['@id']} className="p-0">
<SearchResultItem
item={item}
index={index}
searchableText={searchableText}
section={getSectionFromId(item['@id'])}
/>
</Col>
))}
<div
className="search-results-wrapper"
role="region"
id="search-results-region"
aria-live="polite"
>
<div className="d-block ordering-widget">
<Row className="pb-3 border-bottom">
<Col xs={6} className="align-self-center">
<p className="d-none d-lg-block" aria-live="polite">
{intl.formatMessage(messages.foundNResults, {
total: searchResults?.result?.items_total || 0,
})}
</p>
<p className="d-block d-lg-none mb-0 text-end">
{intl.formatMessage(messages.orderBy)}
</p>
</Col>
<Col xs={6}>
<SelectInput
id="search-sort-on"
value={
sortOnOptions.filter((o) => o.value === sortOn)[0]
}
label={intl.formatMessage(messages.orderBy)}
placeholder={
sortOnOptions.find((o) => o.value === sortOn).label
}
onChange={(opt) => setSortOn(opt.value)}
options={sortOnOptions}
defaultValue={sortOnOptions.find(
(o) => o.value === 'relevance',
)}
/>
</Col>
</Row>
{searchResults?.result?.batching && (
<Pagination
activePage={currentPage}
totalPages={Math.ceil(
(searchResults?.result?.items_total ?? 0) /
config.settings.defaultPageSize,
)}
onPageChange={handleQueryPaginationChange}
/>
)}
</div>
) : searchResults.error ? (
<Alert color="danger">
<strong>{intl.formatMessage(messages.attenzione)}</strong>{' '}
{intl.formatMessage(messages.errors_occured)}
</Alert>
) : (
<p>{intl.formatMessage(messages.no_results)}</p>
)}

{searchResults.loadingResults ||
(!searchResults.hasError && isEmpty(searchResults.result)) ? (
<div className="searchSpinnerWrapper">
<Spinner active />
</div>
) : searchResults?.result?.items_total > 0 ? (
<>
<Row>
{searchResults?.result?.items?.map((item, index) => (
<Col md={12} key={item['@id']} className="p-0">
<SearchResultItem
item={item}
index={index}
searchableText={searchableText}
section={getSectionFromId(item['@id'])}
/>
</Col>
))}
</Row>
{searchResults?.result?.batching && (
<Pagination
activePage={currentPage}
totalPages={Math.ceil(
(searchResults?.result?.items_total ?? 0) /
config.settings.defaultPageSize,
)}
onPageChange={handleQueryPaginationChange}
/>
)}
</>
) : searchResults.error ? (
<Alert color="danger">
<strong>{intl.formatMessage(messages.attenzione)}</strong>{' '}
{intl.formatMessage(messages.errors_occured)}
</Alert>
) : (
!searchResults?.hasError &&
!isEmpty(searchResults?.result) &&
searchResults.result?.items.length === 0 && (
<p>{intl.formatMessage(messages.no_results)}</p>
)
)}
</div>
</Col>
</Row>
</Container>
Expand Down
6 changes: 6 additions & 0 deletions theme/extras/_search.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,4 +112,10 @@ body.search-modal-opened {
outline: none !important;
}
}
.searchSpinnerWrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
}
}

0 comments on commit 8a891b9

Please sign in to comment.