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",