From 0911aaf3c0e1c62df8723ecca93ba9ee1ac274b7 Mon Sep 17 00:00:00 2001 From: nikolai Date: Mon, 16 Dec 2024 17:32:56 +0500 Subject: [PATCH 1/3] a11y: UILD-455: Improve WCAG 2.1 AA compliance for Authority lookup component (#56) --- src/common/styles/common.scss | 2 +- src/components/ButtonGroup/ButtonGroup.tsx | 6 +++++- .../ComplexLookupField/ComplexLookupField.tsx | 4 +++- .../ComplexLookupField/MarcPreviewComplexLookup.tsx | 10 ++++++++-- src/components/DropdownField/DropdownField.tsx | 2 +- src/components/Table/TableFlex.tsx | 7 ++++--- translations/ui-linked-data/en.json | 2 ++ 7 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/common/styles/common.scss b/src/common/styles/common.scss index bf48de5f..33e1c93b 100644 --- a/src/common/styles/common.scss +++ b/src/common/styles/common.scss @@ -8,7 +8,7 @@ $blue-700: #255096; $blue-600: #2d62b7; $blue-800: #1d3f75; $gray-200: #d7d8da; -$gray-400: #8d9095; +$gray-400: #727272; $gray-600: #3d3f42; $blue-100: #d8e3f5; $blue-400: #6591d9; diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx index b8116bdf..b9c3aa5b 100644 --- a/src/components/ButtonGroup/ButtonGroup.tsx +++ b/src/components/ButtonGroup/ButtonGroup.tsx @@ -9,5 +9,9 @@ type ButtonGroupProps = { }; export const ButtonGroup = ({ className, fullWidth, children }: ButtonGroupProps) => { - return
{children}
; + return ( +
+ {children} +
+ ); }; diff --git a/src/components/ComplexLookupField/ComplexLookupField.tsx b/src/components/ComplexLookupField/ComplexLookupField.tsx index bbfd6c4e..d1897d13 100644 --- a/src/components/ComplexLookupField/ComplexLookupField.tsx +++ b/src/components/ComplexLookupField/ComplexLookupField.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { FormattedMessage } from 'react-intl'; +import { FormattedMessage, useIntl } from 'react-intl'; import classNames from 'classnames'; import { IS_EMBEDDED_MODE } from '@common/constants/build.constants'; import { VALUE_DIVIDER } from '@common/constants/complexLookup.constants'; @@ -20,6 +20,7 @@ interface Props { } export const ComplexLookupField: FC = ({ value = undefined, id, entry, onChange }) => { + const { formatMessage } = useIntl(); const { layout, htmlId } = entry; const lookupConfig = COMPLEX_LOOKUPS_CONFIG[layout?.api as string]; const buttonConfigLabel = lookupConfig?.labels?.button; @@ -54,6 +55,7 @@ export const ComplexLookupField: FC = ({ value = undefined, id, entry, on onClick={() => handleDelete(id)} className="complex-lookup-selected-delete" data-testid="complex-lookup-selected-delete" + aria-label={formatMessage({ id: 'ld.aria.edit.removeComplexLookupFieldValue' })} > diff --git a/src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx b/src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx index 14116675..de3037b2 100644 --- a/src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx +++ b/src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx @@ -19,7 +19,13 @@ export const MarcPreviewComplexLookup: FC = ({ on const { complexValue: marcPreviewData, metadata: marcPreviewMetadata } = useMarcPreviewState(); const renderCloseButton = () => ( - ); @@ -60,7 +66,7 @@ export const MarcPreviewComplexLookup: FC = ({ on -
+
diff --git a/src/components/DropdownField/DropdownField.tsx b/src/components/DropdownField/DropdownField.tsx index bb3ced90..937e1130 100644 --- a/src/components/DropdownField/DropdownField.tsx +++ b/src/components/DropdownField/DropdownField.tsx @@ -42,7 +42,7 @@ export const DropdownField: FC = ({ disabled={isDisabled} className="edit-section-field-input dropdown-field" data-testid={testId} - ariaLabelledby={htmlId} + ariaLabelledBy={htmlId} /> ); }; diff --git a/src/components/Table/TableFlex.tsx b/src/components/Table/TableFlex.tsx index 95f1abf5..ec1c083f 100644 --- a/src/components/Table/TableFlex.tsx +++ b/src/components/Table/TableFlex.tsx @@ -59,9 +59,9 @@ export const TableFlex = ({ header, data, className, onRowClick, onHeaderCellCli }; return ( -
-
-
+
+
+
{sortedHeaderEntries.map(([key, { label, className, ...rest }]) => (
{(children || label) ?? ''}
diff --git a/translations/ui-linked-data/en.json b/translations/ui-linked-data/en.json index 4b824f9d..0fe2ecff 100644 --- a/translations/ui-linked-data/en.json +++ b/translations/ui-linked-data/en.json @@ -187,6 +187,7 @@ "ld.searchQueryWouldBeHere": "{query} would be here", "ld.continue": "Continue", "ld.aria.modal.close": "Close {modalKind} modal", + "ld.aria.complexLookup.marcPreview.close": "Close lookup MARC preview section", "ld.aria.advancedSearch.queryInput": "Advanced search row query input", "ld.aria.advancedSearch.operator": "Advanced search row operator", "ld.aria.advancedSearch.qualifier": "Advanced search row qualifier", @@ -197,6 +198,7 @@ "ld.aria.edit.close": "Close edit page", "ld.aria.edit.deleteComponent": "Delete component", "ld.aria.edit.duplicateComponent": "Duplicate component", + "ld.aria.edit.removeComplexLookupFieldValue": "Remove complex lookup field value", "ld.aria.resourcePreview.close": "Close resource preview pane", "ld.aria.externalResourcePreview.close": "Close external resource preview page", "ld.aria.marcAuthorityPreview.close": "Close MARC authority preview", From 493c81ea5cf5b596137ceba5ad7f3e350861b6fd Mon Sep 17 00:00:00 2001 From: FOLIO Translations Bot <38661258+folio-translations@users.noreply.github.com> Date: Mon, 16 Dec 2024 10:45:27 -0500 Subject: [PATCH 2/3] Lokalise: updates (#33) --- translations/ui-linked-data/pl.json | 4 ++-- translations/ui-linked-data/pt_BR.json | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/translations/ui-linked-data/pl.json b/translations/ui-linked-data/pl.json index 9504afdb..70278912 100644 --- a/translations/ui-linked-data/pl.json +++ b/translations/ui-linked-data/pl.json @@ -129,7 +129,7 @@ "ld.person": "Person", "ld.source": "Source", "ld.family": "Family", - "ld.organization": "Organization", + "ld.organization": "Organizacja", "ld.meeting": "Meeting", "ld.corporateBody": "Corporate body", "ld.jurisdiction": "Jurisdiction", @@ -164,7 +164,7 @@ "ld.thesaurus": "Thesaurus", "ld.typeOfHeading": "Type of heading", "ld.dateCreated": "Date created", - "ld.dateUpdated": "Date updated", + "ld.dateUpdated": "Data aktualizacji", "ld.excludeSeeFrom": "Exclude see from", "ld.excludeSeeFromAlso": "Exclude see from also", "ld.previous": "Previous", diff --git a/translations/ui-linked-data/pt_BR.json b/translations/ui-linked-data/pt_BR.json index 9e158295..0f67fb62 100644 --- a/translations/ui-linked-data/pt_BR.json +++ b/translations/ui-linked-data/pt_BR.json @@ -140,7 +140,7 @@ "ld.assign": "Atribuir", "ld.assignAuthority": "Atribuir autoridade", "ld.change": "Mudar", - "ld.searchCreatorAuthority": "Search creator authority", + "ld.searchCreatorAuthority": "Pesquisar autoridade do criador", "ld.selectMarcAuthority": "Selecione a autoridade MARC", "ld.marcAuthority": "Autoridade MARC", "ld.keyword": "Palavra-chave", @@ -166,7 +166,7 @@ "ld.dateCreated": "Data de criação", "ld.dateUpdated": "Data de atualização", "ld.excludeSeeFrom": "Excluir VER DE", - "ld.excludeSeeFromAlso": "Exclude see from also", + "ld.excludeSeeFromAlso": "Excluir Ver Também", "ld.previous": "Anterior", "ld.next": "Próximo", "ld.from": "De", @@ -183,11 +183,11 @@ "ld.continue": "Continuar", "ld.aria.filters.select": "Selecione identificadores de busca", "ld.aria.filters.textbox": "Caixa de texto de consulta de busca", - "ld.aria.filters.reset": "Reset filters button", - "ld.aria.filters.reset.announce": "Search field and filters are reset", - "ld.backToInventory": "Back to inventory", - "ld.properties": "Properties", - "ld.errorFetchingExternalResourceForEditing": "Error fetching external resource for editing", - "ld.duplicateImportWarn": "Duplicate import warning", - "ld.rdPropertiesMatchContinue": "Properties of this resource match an existing resource. Do you want to continue?" + "ld.aria.filters.reset": "Botão Redefinir filtros", + "ld.aria.filters.reset.announce": "Campo de busca e filtros são redefinidos", + "ld.backToInventory": "Voltar ao inventário", + "ld.properties": "Propriedades", + "ld.errorFetchingExternalResourceForEditing": "Erro ao buscar recurso externo para edição", + "ld.duplicateImportWarn": "Aviso de importação duplicada", + "ld.rdPropertiesMatchContinue": "As propriedades desse recurso correspondem a um recurso existente. Deseja continuar?" } \ No newline at end of file From e1f50104824cb68b6f0157b2c6c503b3a1dc6de0 Mon Sep 17 00:00:00 2001 From: Siarhei Karol <135722306+SKarolFolio@users.noreply.github.com> Date: Tue, 17 Dec 2024 11:39:10 +0500 Subject: [PATCH 3/3] UILD-405: reduce timeout of the debounced input and show status message after saving the record (#57) --- src/common/hooks/useFetchSearchData.ts | 6 +++--- src/components/EditSection/EditSection.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/common/hooks/useFetchSearchData.ts b/src/common/hooks/useFetchSearchData.ts index 7f0712a2..157fe0b9 100644 --- a/src/common/hooks/useFetchSearchData.ts +++ b/src/common/hooks/useFetchSearchData.ts @@ -24,8 +24,8 @@ export const useFetchSearchData = () => { precedingRecordsCount, } = useSearchContext(); const { setIsLoading } = useLoadingState(); - const { setMessage, data, setData, resetData, setPageMetadata } = useSearchState(); - const { addStatusMessagesItem, resetStatusMessages } = useStatusState(); + const { setMessage, resetMessage, data, setData, resetData, setPageMetadata } = useSearchState(); + const { addStatusMessagesItem } = useStatusState(); const validateAndNormalizeQuery = useCallback( (type: SearchIdentifiers, query: string) => { @@ -133,7 +133,6 @@ export const useFetchSearchData = () => { selectedSegment, baseQuerySelector = SearchableIndexQuerySelector.Query, }: FetchDataParams) => { - resetStatusMessages(); const selectedNavigationSegment = selectedSegment ?? navigationSegment?.value; data && resetData(); @@ -176,6 +175,7 @@ export const useFetchSearchData = () => { setData(content); setPageMetadata({ totalPages, totalElements: totalRecords, prev, next }); + resetMessage(); } catch { addStatusMessagesItem?.(UserNotificationFactory.createMessage(StatusType.error, 'ld.errorFetching')); } finally { diff --git a/src/components/EditSection/EditSection.tsx b/src/components/EditSection/EditSection.tsx index c815fb86..9ce64965 100644 --- a/src/components/EditSection/EditSection.tsx +++ b/src/components/EditSection/EditSection.tsx @@ -14,7 +14,7 @@ import { useInputsState, useProfileState, useStatusState, useUIState } from '@sr import { renderDrawComponent } from './renderDrawComponent'; import './EditSection.scss'; -const USER_INPUT_DELAY = 750; +const USER_INPUT_DELAY = 100; export const EditSection = memo(() => { const { selectedEntriesService } = useServicesContext() as Required;