Skip to content

Commit

Permalink
Accessibility: fix selection in dropdown facets & make it close on ESC
Browse files Browse the repository at this point in the history
  • Loading branch information
@kreafox
kreafox committed Apr 5, 2023
1 parent cec90df commit da079cb
Show file tree
Hide file tree
Showing 9 changed files with 99 additions and 93 deletions.
5 changes: 5 additions & 0 deletions searchlib/components/Facets/ActiveFilters.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ const ActiveFilters = (props) => {
// // setActiveFilter(filteredValues);
onRemove(option);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
onRemove(option);
}
}}
>
<Icon name="close" role="button" />
</Button>
Expand Down
3 changes: 3 additions & 0 deletions searchlib/components/Facets/DropdownFacetsList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,9 @@ const DropdownFacetsList = ({ defaultWrapper }) => {
if (e.key === 'Enter') {
setShowSidebar(true);
}
if (e.key === 'Escape') {
setShowSidebar(false);
}
}}
// disabled={isLiveSearch}
>
Expand Down
8 changes: 8 additions & 0 deletions searchlib/components/Facets/ModalFacetsList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,14 @@ const FacetsList = ({ view, defaultWrapper }) => {
);
setSelectFilters(filterValuesBtn);
}}
onKeyDown={(e) => {
let filterValuesBtn = selectFilters.filter(
(l) => l !== facet.field,
);
if (e.key === 'Enter') {
setSelectFilters(filterValuesBtn);
}
}}
>
<Icon name="close" role="button" />
</Button>
Expand Down
9 changes: 9 additions & 0 deletions searchlib/components/Facets/Unconnected/MultiTermListFacet/ActiveFiltersList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,15 @@ const ActiveFilters = (props) => {
setActiveFilter(filteredValues);
onRemove(option);
}}
onKeyDown={(e) => {
let filteredValues = activeFilter.filter(
(v) => v !== option,
);
if (e.key === 'Enter') {
setActiveFilter(filteredValues);
onRemove(option);
}
}}
>
<Icon name="close" role="button" />
</Button>
Expand Down
55 changes: 33 additions & 22 deletions searchlib/components/Facets/Wrappers/DropdownFacetWrapper.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@ import {
SearchContext,
} from '@eeacms/search/lib/hocs';
import { Facet as SUIFacet } from '@eeacms/search/components';
import { Dropdown, Dimmer, Modal, Button } from 'semantic-ui-react';
import { Dimmer, Modal, Button } from 'semantic-ui-react';
import { atomFamily } from 'jotai/utils';
import { useAtom, atom } from 'jotai';
import cx from 'classnames';

import ActiveFilters from '../ActiveFilters';

const SMALL_SCREEN_SIZE = 766;
Expand Down Expand Up @@ -127,33 +129,42 @@ const DropdownFacetWrapper = (props) => {
</Modal>
) : (
<div ref={nodeRef}>
<Dropdown
open={isOpen}
<Button
basic
className={cx('facet-btn', {
active: isOpen,
})}
onClick={() => setIsOpen(true)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
setIsOpen(true);
}
if (e.key === 'Escape') {
setIsOpen(false);
}
}}
trigger={
<span className="facet-title">
{label ? <>{label} </> : <>{title} </>}
{filtersCount.length > 0 && (
<span className="count">({filtersCount})</span>
)}
<i aria-hidden="true" className="icon ri-arrow-down-s-line" />
</span>
}
>
<Dropdown.Menu>
{isOpen && (
<SUIFacet
{...props}
active={isOpen}
filterType={localFilterType}
onChangeFilterType={setLocalFilterType}
/>
<span className="facet-title">
{label ? <>{label} </> : <>{title} </>}
{filtersCount.length > 0 && (
<span className="count">({filtersCount})</span>
)}
<i aria-hidden="true" className="icon ri-arrow-down-s-line" />
</span>
</Button>

{isOpen && (
<div
className={cx('facet-menu', {
active: isOpen,
})}
>
<SUIFacet
{...props}
active={isOpen}
filterType={localFilterType}
onChangeFilterType={setLocalFilterType}
/>

<ActiveFilters
sortedOptions={sortedOptions}
Expand All @@ -162,8 +173,8 @@ const DropdownFacetWrapper = (props) => {
}}
field={field}
/>
</Dropdown.Menu>
</Dropdown>
</div>
)}
</div>
)}
</div>
Expand Down
6 changes: 3 additions & 3 deletions searchlib/components/SearchInput/SearchInput.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ function SearchInput({
const inpRef = React.useRef();
const [, setShowExtraFacets] = useAtom(showExtraFacetsAtom);

React.useEffect(() => {
mode === 'view' && inpRef.current && inpRef.current.focus();
}, [searchTerm, mode]);
// React.useEffect(() => {
// mode === 'view' && inpRef.current && inpRef.current.focus();
// }, [searchTerm, mode]);

return (
<>
Expand Down
10 changes: 7 additions & 3 deletions searchlib/components/ToggleSort/ToggleSort.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,15 @@ const ToggleSort = ({ icon, label, on, onToggle, children }) => {
return (
<div className="toggleSort">
<div
tabIndex={0}
role="button"
className={on ? 'toggle-label active' : 'toggle-label'}
onClick={onToggle}
onKeyDown={onToggle}
role="button"
tabIndex="-1"
onKeyDown={(e) => {
if (e.key === 'Enter') {
onToggle();
}
}}
title={'Sort by ' + label}
>
{/* {label} */}
Expand Down
88 changes: 25 additions & 63 deletions src/SearchBlock/less/dropdown-filterlist.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,52 +24,43 @@
}
}

.ui.dropdown {
position: relative;
margin-right: 5px;

.menu > * {
white-space: normal;
}
.ui.button.basic.facet-btn {
padding: 0 !important;
color: @deepBlue !important;

&.active {
> span {
> .facet-title {
z-index: 99999 !important;
box-shadow: 0 5px 0 @white, 0 0 4px rgba(0, 0, 0, 0.25);
color: @pineGreen;
font-weight: 700;
}

.menu {
z-index: 9999 !important;
}
}

.divider {
color: @blue-grey-5;
font-size: 16px;
&:hover,
&:focus {
box-shadow: none;
}
}

.menu {
bottom: auto !important;
min-width: 350px;
max-width: 400px;
padding: 1em;
border: none;
border-bottom: 0.5px solid #4c677f;
margin-top: -6px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);

.histogram-facet {
width: 350px;
}
.facet-menu {
position: absolute;
bottom: auto !important;
min-width: 350px;
max-width: 400px;
padding: 1em;
border: none;
border-bottom: 0.5px solid #4c677f;
margin-top: -6px;
background-color: @white;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);

.histogram-facet {
width: 350px;
}

.icon.chevron {
position: relative;
top: -1px;
margin-left: 0.3em;
font-size: 0.6em;
&.active {
z-index: 9999 !important;
}
}

Expand All @@ -94,21 +85,15 @@
}

.sidebar-wrapper {
z-index: 999;
display: flex;
height: 100%;
flex-direction: column;
padding: 1em;

.clear-btn {
margin: 0 !important;
color: @darkCerulean !important;
}

.sidebar-footer {
margin-top: 1em;
}

.sidebar-header {
display: flex;
align-items: baseline;
Expand All @@ -121,36 +106,12 @@

.sidebar-content {
overflow: auto;
background-color: white;

h3 {
margin: 0;
color: @pineGreen !important;
}

.ui.card.term .header {
border: none;
color: @blue-grey-5;
font-size: 16px;
font-weight: 400;
}

.ui.card.term span.count {
color: @blue-grey-5;
font-weight: 400;
}

.ui.card.term:hover {
background: @white !important;
box-shadow: none;
}

.ui.card.term.active .header,
.ui.card.term.active span.count {
color: #004b7f;
font-weight: 700;
}

.ui.accordion .title i:before {
font-size: 2rem;
}
Expand All @@ -159,6 +120,7 @@

.ui.button.sui-button {
padding: 0;
margin: 0 !important;
color: @secondaryColor !important;
font-weight: 600;

Expand Down
8 changes: 6 additions & 2 deletions src/SearchBlock/less/searchview.less
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
*:focus-visible {
outline: var(--focus-visible, @focusVisibleOutline) !important;
body.view-viewview {
.searchlib-block {
*:focus-visible {
outline: var(--focus-visible, @focusVisibleOutline) !important;
}
}
}

body.searchlib-page {
Expand Down

0 comments on commit da079cb

Please sign in to comment.