Skip to content

Commit

Permalink
refactor filter on search group
Browse files Browse the repository at this point in the history
  • Loading branch information
@kurrx
kurrx committed Jan 22, 2025
1 parent 383a9b9 commit 3425e91
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 53 deletions.
6 changes: 0 additions & 6 deletions Extension/_locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,6 @@
"popup_adguard_for_android": {
"message": "AdGuard for Android"
},
"options_filters_filter_status_on": {
"message": "%filterName%: Enabled"
},
"options_filters_filter_status_off": {
"message": "%filterName%: Disabled"
},
"options_filters_filter_version": {
"message": "version:"
},
Expand Down
54 changes: 26 additions & 28 deletions Extension/src/pages/options/components/Filters/Filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,10 @@ type FilterParams = {
tagsDetails: TagMetadata[],
},
groupEnabled: boolean,
isScreenReader: boolean;
disabled?: boolean;
};

const Filter = observer(({ filter, groupEnabled, isScreenReader }: FilterParams) => {
const Filter = observer(({ filter, groupEnabled, disabled = false }: FilterParams) => {
const { settingsStore, uiStore } = useContext(rootStore);

const [isOpenRemoveFilterModal, setIsOpenRemoveFilterModal] = useState(false);
Expand All @@ -106,11 +106,6 @@ const Filter = observer(({ filter, groupEnabled, isScreenReader }: FilterParams)
tagsDetails = [],
} = filter;

const formattedVersion = version ? `${translator.getMessage('options_filters_filter_version')} ${version}` : '';
const normalizedLastUpdated = lastUpdateTime ? formatDate(lastUpdateTime) : formatDate(lastCheckTime);
const formattedLastUpdated = `${translator.getMessage('options_filters_filter_updated')} ${normalizedLastUpdated}`;
const details = `${formattedVersion} | ${formattedLastUpdated}`;

// Trusted tag can be only on custom filters,
const tags = trusted
? [...tagsDetails, {
Expand Down Expand Up @@ -245,44 +240,32 @@ const Filter = observer(({ filter, groupEnabled, isScreenReader }: FilterParams)
});

// We add prefix to avoid id collisions with group ids
const prefixedFilterId = addPrefix(filterId);
const titleId = `${prefixedFilterId}-title`;

if (!groupEnabled && isScreenReader) {
const nameWithStatus = enabled
? translator.getMessage('options_filters_filter_status_on', { filterName: name })
: translator.getMessage('options_filters_filter_status_off', { filterName: name });
const descriptionSuffix = description.endsWith('.') ? '' : '.';

return (
<li>
{`${nameWithStatus}. ${description}${descriptionSuffix} ${details}`}
</li>
);
}
const prefixedFilterSwitchId = addPrefix(filterId);
const prefixedFilterTitleId = `${prefixedFilterSwitchId}-title`;

return (
<li className="filter-wrapper setting--reversed">
<label htmlFor={prefixedFilterId} className="setting-checkbox">
<label htmlFor={prefixedFilterSwitchId} className="setting-checkbox">
<div className={filterClassName} role="presentation">
<div className="filter__info">
<div className="setting__container setting__container--horizontal">
<div className="filter__controls">
{renderRemoveButton()}
<div className="setting__inline-control">
<Setting
id={prefixedFilterId}
id={prefixedFilterSwitchId}
type={SETTINGS_TYPES.CHECKBOX}
label={name}
labelId={titleId}
labelId={prefixedFilterTitleId}
value={!!enabled}
optimistic={!__IS_MV3__}
disabled={disabled}
handler={handleFilterSwitch}
/>
</div>
</div>
<div className="setting__inner">
<div id={titleId} className="filter__title" aria-hidden="true">
<div id={prefixedFilterTitleId} className="filter__title" aria-hidden="true">
<Popover text={name}>
<div className="filter__title-constraint">
<span className="filter__title-in">
Expand All @@ -297,7 +280,16 @@ const Filter = observer(({ filter, groupEnabled, isScreenReader }: FilterParams)
{description}
</div>
<div>
{details}
{
version
? `${translator.getMessage('options_filters_filter_version')} ${version} `
: ''
}
{translator.getMessage('options_filters_filter_updated')}
{' '}
{lastUpdateTime
? formatDate(lastUpdateTime)
: formatDate(lastCheckTime)}
</div>
</div>
<div>
Expand All @@ -306,11 +298,17 @@ const Filter = observer(({ filter, groupEnabled, isScreenReader }: FilterParams)
href={homepage || customUrl}
target="_blank"
rel="noopener noreferrer"
tabIndex={disabled ? -1 : 0}
aria-hidden={disabled}
>
{translator.getMessage('options_filters_filter_link')}
</a>
</div>
<FilterTags filterId={filterId} tags={tags} />
<FilterTags
filterId={filterId}
tags={tags}
disabled={disabled}
/>
</div>
</div>
</div>
Expand Down
13 changes: 8 additions & 5 deletions Extension/src/pages/options/components/Filters/FilterTags/FilterTag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,22 @@ import { Popover } from '../../../../common/components/ui/Popover';
type FilterTagParams = {
filterId: number,
tag: TagMetadata,
disabled?: boolean;
};

export const FilterTag = observer(({ filterId, tag }: FilterTagParams) => {
export const FilterTag = observer(({ filterId, tag, disabled }: FilterTagParams) => {
const { settingsStore } = useContext(rootStore);

const tagString = `#${tag.keyword}`;
const descriptionId = `filter-tag-desc-${filterId}-${tag.tagId}`;

const handleClick = (e: React.MouseEvent) => {
e.preventDefault();
// we remove other content of search input when user clicks to tag
settingsStore.setSearchInput(tagString);

if (!disabled) {
// we remove other content of search input when user clicks to tag
settingsStore.setSearchInput(tagString);
}
};

return (
Expand All @@ -51,10 +55,9 @@ export const FilterTag = observer(({ filterId, tag }: FilterTagParams) => {
className="filter__tag"
onClick={handleClick}
aria-describedby={descriptionId}
disabled={disabled}
>
<HighlightSearch string={tagString} />
{/* Use separate text for Screen Readers, because HighlightSearch component splits
description text into multiple spans which are not read correctly by screen readers */}
<span
id={descriptionId}
className="sr-only"
Expand Down
4 changes: 3 additions & 1 deletion Extension/src/pages/options/components/Filters/FilterTags/FilterTags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,10 @@ import { FilterTag } from './FilterTag';
type FilterTagsParams = {
filterId: number;
tags: TagMetadata[];
disabled?: boolean;
};

export const FilterTags = ({ filterId, tags }: FilterTagsParams) => {
export const FilterTags = ({ filterId, tags, disabled }: FilterTagsParams) => {
if (tags.length === 0) {
return null;
}
Expand All @@ -43,6 +44,7 @@ export const FilterTags = ({ filterId, tags }: FilterTagsParams) => {
key={tag.tagId}
filterId={filterId}
tag={tag}
disabled={disabled}
/>
))}
</ul>
Expand Down
18 changes: 5 additions & 13 deletions Extension/src/pages/options/components/Filters/Search/SearchGroup.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,13 @@ import { translator } from '../../../../../common/translators/translator';

import '../group.pcss';

const renderFilters = (matchedFilters, groupEnabled, isScreenReader) => {
const renderFilters = (matchedFilters, groupEnabled) => {
return matchedFilters.map((filter) => (
<Filter
key={filter.filterId}
filter={filter}
groupEnabled={groupEnabled}
isScreenReader={isScreenReader}
disabled={!groupEnabled}
/>
));
};
Expand All @@ -52,8 +52,6 @@ const SearchGroup = ({
});

const titleId = `setting-title-${groupId}`;
const iconId = `#setting-${groupId}`;
const groupListTitle = translator.getMessage('options_filters_of_group', { groupName });

return (
<li className="search-group-list__item">
Expand All @@ -67,7 +65,7 @@ const SearchGroup = ({
aria-labelledby={titleId}
>
<Icon
id={iconId}
id={`#setting-${groupId}`}
classname="icon--24 setting__icon"
aria-hidden="true"
/>
Expand All @@ -90,17 +88,11 @@ const SearchGroup = ({
/>
</div>
</div>
{!groupEnabled && (
<ul className="filters sr-only" aria-label={groupListTitle}>
{renderFilters(filtersToShow, groupEnabled, true)}
</ul>
)}
<ul
className={filtersClassName}
aria-label={groupListTitle}
inert={!groupEnabled ? '' : undefined}
aria-label={translator.getMessage('options_filters_of_group', { groupName })}
>
{renderFilters(filtersToShow, groupEnabled, false)}
{renderFilters(filtersToShow, groupEnabled)}
</ul>
</li>
);
Expand Down

0 comments on commit 3425e91

Please sign in to comment.