@transferwise/components 46.71.7 → 46.71.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/dateLookup/dateTrigger/DateTrigger.js +6 -1
- package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.mjs +7 -2
- package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
- package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/dateLookup/DateLookup.rtl.spec.tsx +1 -1
- package/src/dateLookup/DateLookup.story.tsx +1 -1
- package/src/dateLookup/DateLookup.testingLibrary.spec.js +20 -3
- package/src/dateLookup/dateTrigger/DateTrigger.tsx +7 -5
|
@@ -28,13 +28,15 @@ const DateTrigger = ({
|
|
|
28
28
|
locale,
|
|
29
29
|
formatMessage
|
|
30
30
|
} = reactIntl.useIntl();
|
|
31
|
+
const valueIdPrefix = React.useId();
|
|
31
32
|
const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
|
|
33
|
+
const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];
|
|
32
34
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
33
35
|
children: [/*#__PURE__*/jsxRuntime.jsxs("button", {
|
|
34
36
|
"aria-haspopup": "dialog",
|
|
35
37
|
"aria-expanded": overlayId != null,
|
|
36
38
|
"aria-controls": overlayId,
|
|
37
|
-
"aria-labelledby":
|
|
39
|
+
"aria-labelledby": ariaLabelIds.filter(Boolean).join(' '),
|
|
38
40
|
className: `btn btn-${size$1} btn-input np-date-trigger`,
|
|
39
41
|
disabled: disabled,
|
|
40
42
|
type: "button",
|
|
@@ -42,10 +44,12 @@ const DateTrigger = ({
|
|
|
42
44
|
children: [label && /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
43
45
|
as: "span",
|
|
44
46
|
className: "np-date-trigger-label m-r-1",
|
|
47
|
+
id: ariaLabelIds[1],
|
|
45
48
|
children: label
|
|
46
49
|
}), selectedDate ? /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
47
50
|
as: "span",
|
|
48
51
|
type: typography.Typography.BODY_LARGE,
|
|
52
|
+
id: ariaLabelIds[2],
|
|
49
53
|
children: formatting.formatDate(selectedDate, locale, {
|
|
50
54
|
day: 'numeric',
|
|
51
55
|
month: monthFormat,
|
|
@@ -53,6 +57,7 @@ const DateTrigger = ({
|
|
|
53
57
|
})
|
|
54
58
|
}) : /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
55
59
|
className: "form-control-placeholder visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xl-inline",
|
|
60
|
+
id: ariaLabelIds[2],
|
|
56
61
|
children: placeholder
|
|
57
62
|
}), !onClear ? /*#__PURE__*/jsxRuntime.jsx(Chevron, {
|
|
58
63
|
orientation: position.Position.BOTTOM,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n ariaLabelledBy?: string;\n selectedDate: Date | null;\n size: SizeSmall | SizeMedium | SizeLarge;\n placeholder: string;\n label: string;\n monthFormat: 'short' | 'long';\n disabled: boolean;\n onClick: () => void;\n onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n selectedDate,\n size = Size.MEDIUM,\n placeholder,\n label,\n monthFormat,\n disabled,\n ariaLabelledBy,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n
|
|
1
|
+
{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n ariaLabelledBy?: string;\n selectedDate: Date | null;\n size: SizeSmall | SizeMedium | SizeLarge;\n placeholder: string;\n label: string;\n monthFormat: 'short' | 'long';\n disabled: boolean;\n onClick: () => void;\n onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n selectedDate,\n size = Size.MEDIUM,\n placeholder,\n label,\n monthFormat,\n disabled,\n ariaLabelledBy,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n const valueIdPrefix = useId();\n const overlayId = useContext(OverlayIdContext);\n const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n return (\n <>\n <button\n aria-haspopup=\"dialog\"\n aria-expanded={overlayId != null}\n aria-controls={overlayId}\n aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n className={`btn btn-${size} btn-input np-date-trigger`}\n disabled={disabled}\n type=\"button\"\n onClick={onClick}\n >\n {label && (\n <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n {label}\n </Body>\n )}\n {selectedDate ? (\n <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n {formatDate(selectedDate, locale, {\n day: 'numeric',\n month: monthFormat,\n year: 'numeric',\n })}\n </Body>\n ) : (\n <span\n className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n visible-md-inline visible-lg-inline visible-xl-inline\"\n id={ariaLabelIds[2]}\n >\n {placeholder}\n </span>\n )}\n {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n </button>\n {onClear ? (\n <>\n <div className=\"clearfix\" />\n <span className=\"input-group-addon\">\n <CloseButton\n className={`clear-btn clear-btn--${size}`}\n aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n size={Size.SMALL}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n event.preventDefault();\n onClear();\n }}\n />\n </span>\n </>\n ) : null}\n </>\n );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","id","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
|
|
|
3
3
|
import Chevron from '../../chevron/Chevron.mjs';
|
|
4
4
|
import { CloseButton } from '../../common/closeButton/CloseButton.mjs';
|
|
5
5
|
import dateTriggerMessages from './DateTrigger.messages.mjs';
|
|
6
|
-
import { useContext } from 'react';
|
|
6
|
+
import { useId, useContext } from 'react';
|
|
7
7
|
import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
|
|
8
8
|
import Body from '../../body/Body.mjs';
|
|
9
9
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
@@ -26,13 +26,15 @@ const DateTrigger = ({
|
|
|
26
26
|
locale,
|
|
27
27
|
formatMessage
|
|
28
28
|
} = useIntl();
|
|
29
|
+
const valueIdPrefix = useId();
|
|
29
30
|
const overlayId = useContext(OverlayIdContext);
|
|
31
|
+
const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];
|
|
30
32
|
return /*#__PURE__*/jsxs(Fragment, {
|
|
31
33
|
children: [/*#__PURE__*/jsxs("button", {
|
|
32
34
|
"aria-haspopup": "dialog",
|
|
33
35
|
"aria-expanded": overlayId != null,
|
|
34
36
|
"aria-controls": overlayId,
|
|
35
|
-
"aria-labelledby":
|
|
37
|
+
"aria-labelledby": ariaLabelIds.filter(Boolean).join(' '),
|
|
36
38
|
className: `btn btn-${size} btn-input np-date-trigger`,
|
|
37
39
|
disabled: disabled,
|
|
38
40
|
type: "button",
|
|
@@ -40,10 +42,12 @@ const DateTrigger = ({
|
|
|
40
42
|
children: [label && /*#__PURE__*/jsx(Body, {
|
|
41
43
|
as: "span",
|
|
42
44
|
className: "np-date-trigger-label m-r-1",
|
|
45
|
+
id: ariaLabelIds[1],
|
|
43
46
|
children: label
|
|
44
47
|
}), selectedDate ? /*#__PURE__*/jsx(Body, {
|
|
45
48
|
as: "span",
|
|
46
49
|
type: Typography.BODY_LARGE,
|
|
50
|
+
id: ariaLabelIds[2],
|
|
47
51
|
children: formatDate(selectedDate, locale, {
|
|
48
52
|
day: 'numeric',
|
|
49
53
|
month: monthFormat,
|
|
@@ -51,6 +55,7 @@ const DateTrigger = ({
|
|
|
51
55
|
})
|
|
52
56
|
}) : /*#__PURE__*/jsx("span", {
|
|
53
57
|
className: "form-control-placeholder visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xl-inline",
|
|
58
|
+
id: ariaLabelIds[2],
|
|
54
59
|
children: placeholder
|
|
55
60
|
}), !onClear ? /*#__PURE__*/jsx(Chevron, {
|
|
56
61
|
orientation: Position.BOTTOM,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n ariaLabelledBy?: string;\n selectedDate: Date | null;\n size: SizeSmall | SizeMedium | SizeLarge;\n placeholder: string;\n label: string;\n monthFormat: 'short' | 'long';\n disabled: boolean;\n onClick: () => void;\n onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n selectedDate,\n size = Size.MEDIUM,\n placeholder,\n label,\n monthFormat,\n disabled,\n ariaLabelledBy,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n
|
|
1
|
+
{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n ariaLabelledBy?: string;\n selectedDate: Date | null;\n size: SizeSmall | SizeMedium | SizeLarge;\n placeholder: string;\n label: string;\n monthFormat: 'short' | 'long';\n disabled: boolean;\n onClick: () => void;\n onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n selectedDate,\n size = Size.MEDIUM,\n placeholder,\n label,\n monthFormat,\n disabled,\n ariaLabelledBy,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n const valueIdPrefix = useId();\n const overlayId = useContext(OverlayIdContext);\n const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n return (\n <>\n <button\n aria-haspopup=\"dialog\"\n aria-expanded={overlayId != null}\n aria-controls={overlayId}\n aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n className={`btn btn-${size} btn-input np-date-trigger`}\n disabled={disabled}\n type=\"button\"\n onClick={onClick}\n >\n {label && (\n <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n {label}\n </Body>\n )}\n {selectedDate ? (\n <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n {formatDate(selectedDate, locale, {\n day: 'numeric',\n month: monthFormat,\n year: 'numeric',\n })}\n </Body>\n ) : (\n <span\n className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n visible-md-inline visible-lg-inline visible-xl-inline\"\n id={ariaLabelIds[2]}\n >\n {placeholder}\n </span>\n )}\n {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n </button>\n {onClear ? (\n <>\n <div className=\"clearfix\" />\n <span className=\"input-group-addon\">\n <CloseButton\n className={`clear-btn clear-btn--${size}`}\n aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n size={Size.SMALL}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n event.preventDefault();\n onClear();\n }}\n />\n </span>\n </>\n ) : null}\n </>\n );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","id","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTrigger.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,SAAS,EAAE,UAAU,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAQ5F,UAAU,gBAAgB;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,
|
|
1
|
+
{"version":3,"file":"DateTrigger.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,SAAS,EAAE,UAAU,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAQ5F,UAAU,gBAAgB;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.71.
|
|
3
|
+
"version": "46.71.8",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -91,9 +91,9 @@
|
|
|
91
91
|
"rollup": "^4.18.1",
|
|
92
92
|
"rollup-preserve-directives": "^1.1.1",
|
|
93
93
|
"storybook": "^8.2.2",
|
|
94
|
-
"@transferwise/less-config": "3.1.0",
|
|
95
94
|
"@transferwise/neptune-css": "14.19.1",
|
|
96
|
-
"@wise/components-theming": "1.6.1"
|
|
95
|
+
"@wise/components-theming": "1.6.1",
|
|
96
|
+
"@transferwise/less-config": "3.1.0"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"@transferwise/icons": "^3.13.1",
|
|
@@ -28,7 +28,7 @@ describe('DateLookup', () => {
|
|
|
28
28
|
<DateLookup value={initialValue} onChange={() => {}} />
|
|
29
29
|
</Field>,
|
|
30
30
|
);
|
|
31
|
-
const button = screen.getByRole('button', { name:
|
|
31
|
+
const button = screen.getByRole('button', { name: /^Date of birth/ });
|
|
32
32
|
|
|
33
33
|
expect(button).toBeInTheDocument();
|
|
34
34
|
expect(button).toHaveAttribute('aria-haspopup');
|
|
@@ -66,7 +66,7 @@ export const WithField = () => {
|
|
|
66
66
|
const disabled = boolean('disabled', false);
|
|
67
67
|
const label = text('label', 'label');
|
|
68
68
|
const monthFormat = select('monthFormat', ['long', 'short'], 'long');
|
|
69
|
-
const placeholder = text('placeholder', '
|
|
69
|
+
const placeholder = text('placeholder', 'Select date');
|
|
70
70
|
const id = text('id', 'date-lookup');
|
|
71
71
|
|
|
72
72
|
const clearable = boolean('clearable', true);
|
|
@@ -23,7 +23,7 @@ describe('DateLookup (events)', () => {
|
|
|
23
23
|
/** @type {jest.Mock} */
|
|
24
24
|
let handleChange;
|
|
25
25
|
|
|
26
|
-
const setup = async () => {
|
|
26
|
+
const setup = async (overrides = {}) => {
|
|
27
27
|
handleChange = jest.fn();
|
|
28
28
|
|
|
29
29
|
/** @type {import('@testing-library/react').RenderResult} */
|
|
@@ -38,13 +38,14 @@ describe('DateLookup (events)', () => {
|
|
|
38
38
|
min={min}
|
|
39
39
|
max={max}
|
|
40
40
|
size="lg"
|
|
41
|
-
placeholder="
|
|
41
|
+
placeholder="Select date"
|
|
42
42
|
label="label"
|
|
43
43
|
aria-labelledby="prioritized-label"
|
|
44
44
|
disabled={false}
|
|
45
45
|
clearable={false}
|
|
46
46
|
onChange={handleChange}
|
|
47
47
|
onClick={jest.fn()}
|
|
48
|
+
{...overrides}
|
|
48
49
|
/>
|
|
49
50
|
</>,
|
|
50
51
|
);
|
|
@@ -148,7 +149,23 @@ describe('DateLookup (events)', () => {
|
|
|
148
149
|
|
|
149
150
|
it('supports custom `aria-labelledby` attribute', async () => {
|
|
150
151
|
const view = await setup();
|
|
151
|
-
expect(screen.getByRole('button', { name:
|
|
152
|
+
expect(screen.getByRole('button', { name: /^Prioritized label/ })).toBeInTheDocument();
|
|
153
|
+
await closeDateLookup(view);
|
|
154
|
+
});
|
|
155
|
+
|
|
156
|
+
it('reads our the HTML label as well as the input prefix and the value', async () => {
|
|
157
|
+
const view = await setup();
|
|
158
|
+
expect(
|
|
159
|
+
screen.getByRole('button', { name: 'Prioritized label label 27 December 2018' }),
|
|
160
|
+
).toBeInTheDocument();
|
|
161
|
+
await closeDateLookup(view);
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
it('reads our the HTML label as well as the input prefix and the placeholder', async () => {
|
|
165
|
+
const view = await setup({ value: undefined });
|
|
166
|
+
expect(
|
|
167
|
+
screen.getByRole('button', { name: 'Prioritized label label Select date' }),
|
|
168
|
+
).toBeInTheDocument();
|
|
152
169
|
await closeDateLookup(view);
|
|
153
170
|
});
|
|
154
171
|
});
|
|
@@ -6,7 +6,7 @@ import { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '..
|
|
|
6
6
|
import { CloseButton } from '../../common/closeButton/CloseButton';
|
|
7
7
|
|
|
8
8
|
import messages from './DateTrigger.messages';
|
|
9
|
-
import { useContext } from 'react';
|
|
9
|
+
import { useContext, useId } from 'react';
|
|
10
10
|
import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
|
|
11
11
|
import Body from '../../body';
|
|
12
12
|
|
|
@@ -34,8 +34,9 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
|
|
|
34
34
|
onClear,
|
|
35
35
|
}) => {
|
|
36
36
|
const { locale, formatMessage } = useIntl();
|
|
37
|
-
|
|
37
|
+
const valueIdPrefix = useId();
|
|
38
38
|
const overlayId = useContext(OverlayIdContext);
|
|
39
|
+
const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];
|
|
39
40
|
|
|
40
41
|
return (
|
|
41
42
|
<>
|
|
@@ -43,19 +44,19 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
|
|
|
43
44
|
aria-haspopup="dialog"
|
|
44
45
|
aria-expanded={overlayId != null}
|
|
45
46
|
aria-controls={overlayId}
|
|
46
|
-
aria-labelledby={
|
|
47
|
+
aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}
|
|
47
48
|
className={`btn btn-${size} btn-input np-date-trigger`}
|
|
48
49
|
disabled={disabled}
|
|
49
50
|
type="button"
|
|
50
51
|
onClick={onClick}
|
|
51
52
|
>
|
|
52
53
|
{label && (
|
|
53
|
-
<Body as="span" className="np-date-trigger-label m-r-1">
|
|
54
|
+
<Body as="span" className="np-date-trigger-label m-r-1" id={ariaLabelIds[1]}>
|
|
54
55
|
{label}
|
|
55
56
|
</Body>
|
|
56
57
|
)}
|
|
57
58
|
{selectedDate ? (
|
|
58
|
-
<Body as="span" type={Typography.BODY_LARGE}>
|
|
59
|
+
<Body as="span" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>
|
|
59
60
|
{formatDate(selectedDate, locale, {
|
|
60
61
|
day: 'numeric',
|
|
61
62
|
month: monthFormat,
|
|
@@ -66,6 +67,7 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
|
|
|
66
67
|
<span
|
|
67
68
|
className="form-control-placeholder visible-xs-inline visible-sm-inline
|
|
68
69
|
visible-md-inline visible-lg-inline visible-xl-inline"
|
|
70
|
+
id={ariaLabelIds[2]}
|
|
69
71
|
>
|
|
70
72
|
{placeholder}
|
|
71
73
|
</span>
|