mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Improve accessibility and fix jumping issue in filter tags

merge-requests/3337/head
danidfra 2025-03-04 14:17:06 -03:00
rodzic 2f48bf83b7
commit 46c858bc5a
2 zmienionych plików z 9 dodań i 6 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
src/features/explorer/components/explorerFilter.tsx
Wyświetl plik

@ -83,7 +83,7 @@ const ExplorerFilter = () => {
{intl.formatMessage(messages.filters)}
</Text>
{filters.length > 0 && [...filters.slice(0, 8).filter((value) => value.status).map((value) => generateFilter(dispatch, value)), ...filters.slice(8).map((value) => generateFilter(dispatch, value))]}
{filters.length > 0 && [...filters.slice(0, 8).filter((value) => value.status).map((value) => generateFilter(dispatch, intl, value)), ...filters.slice(8).map((value) => generateFilter(dispatch, intl, value))]}
</HStack>
<IconButton

13
src/features/explorer/components/filters.tsx
Wyświetl plik

@ -3,7 +3,7 @@ import searchIcon from '@tabler/icons/outline/search.svg';
import xIcon from '@tabler/icons/outline/x.svg';
import clsx from 'clsx';
import { useEffect, useMemo, useState } from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { FormattedMessage, IntlShape, defineMessages, useIntl } from 'react-intl';
import Button from 'soapbox/components/ui/button.tsx';
import Checkbox from 'soapbox/components/ui/checkbox.tsx';
@ -41,6 +41,8 @@ const messages = defineMessages({
imageOnly: { id: 'column.explorer.media_filters.image', defaultMessage: 'Image only' },
videoOnly: { id: 'column.explorer.media_filters.video', defaultMessage: 'Video only' },
none: { id: 'column.explorer.media_filters.none', defaultMessage: 'No media' },
clearSearch: { id: 'column.explorer.filters.clear_input', defaultMessage: 'Clear filter input' },
removeFilter: { id: 'column.explorer.filters.remove_filter', defaultMessage: 'Remove filter: {name}' },
});
const languages = {
@ -218,6 +220,7 @@ const CreateFilter = () => {
<SvgIcon
src={xIcon}
onClick={() => setInputValue('')}
aria-label={intl.formatMessage(messages.clearSearch)}
className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
/>
</div>
@ -374,7 +377,7 @@ const ToggleRepliesFilter = () => {
);
};
const generateFilter = (dispatch: AppDispatch, { name, status }: IGenerateFilter) => {
const generateFilter = (dispatch: AppDispatch, intl: IntlShape, { name, status }: IGenerateFilter) => {
const nameLowCase = name.toLowerCase();
let borderColor = '';
@ -425,13 +428,13 @@ const generateFilter = (dispatch: AppDispatch, { name, status }: IGenerateFilter
return (
<div
key={name}
className={`group m-1 flex items-center gap-0.5 whitespace-normal break-words rounded-full border-2 bg-transparent px-3 text-base font-medium shadow-sm hover:cursor-pointer hover:pr-1 ${borderColor} ${textColor} `}
className={`group m-1 flex items-center whitespace-normal break-words rounded-full border-2 bg-transparent px-3 pr-1 text-base font-medium shadow-sm hover:cursor-pointer ${borderColor} ${textColor} `}
>
{name.toLowerCase() !== 'default' ? name : <FormattedMessage id='column.explorer.filters.language.default' defaultMessage='Global' />}
<IconButton
iconClassName='!w-4' className={`hidden !p-0 px-1 group-hover:block ${textColor}`} src={xIcon}
iconClassName='!w-4' className={` !py-0 group-hover:block ${textColor}`} src={xIcon}
onClick={handleChangeFilters}
aria-label={intl.formatMessage(messages.removeFilter, { name })}
/>
</div>
);