@simplybusiness/mobius-datepicker 4.3.27 → 4.3.29
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/CHANGELOG.md +16 -0
- package/dist/cjs/components/DatePicker/DatePickerModal.js +4 -3
- package/dist/cjs/components/DatePicker/DatePickerModal.js.map +1 -1
- package/dist/esm/components/DatePicker/DatePickerModal.js +5 -4
- package/dist/esm/components/DatePicker/DatePickerModal.js.map +1 -1
- package/package.json +3 -3
- package/src/components/DatePicker/DatePickerModal.tsx +5 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 4.3.29
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 278d29e: Fix QCP styles and unique ids
|
|
8
|
+
- Updated dependencies [278d29e]
|
|
9
|
+
- @simplybusiness/mobius@4.8.4
|
|
10
|
+
|
|
11
|
+
## 4.3.28
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies [3424b0a]
|
|
16
|
+
- @simplybusiness/icons@4.6.0
|
|
17
|
+
- @simplybusiness/mobius@4.8.3
|
|
18
|
+
|
|
3
19
|
## 4.3.27
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -10,8 +10,8 @@ Object.defineProperty(exports, "default", {
|
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
const _jsxruntime = require("react/jsx-runtime");
|
|
13
|
-
const _mobius = require("@simplybusiness/mobius");
|
|
14
13
|
const _icons = require("@simplybusiness/icons");
|
|
14
|
+
const _mobius = require("@simplybusiness/mobius");
|
|
15
15
|
const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
|
|
16
16
|
const _react = require("react");
|
|
17
17
|
const _reactdaypicker = require("react-day-picker");
|
|
@@ -37,6 +37,7 @@ const DatePickerModal = ({ date, isOpen, onSelected, top, min, max })=>{
|
|
|
37
37
|
const initialDate = date ? new Date(date) : undefined;
|
|
38
38
|
const minDate = min ? new Date(min) : undefined;
|
|
39
39
|
const maxDate = max ? new Date(max) : undefined;
|
|
40
|
+
const hiddenId = `screen-reader-title-${(0, _react.useId)()}`;
|
|
40
41
|
if (isOpen && PARENT_NODE) {
|
|
41
42
|
PARENT_NODE === null || PARENT_NODE === void 0 ? void 0 : PARENT_NODE.setAttribute("aria-hidden", "true");
|
|
42
43
|
}
|
|
@@ -63,12 +64,12 @@ const DatePickerModal = ({ date, isOpen, onSelected, top, min, max })=>{
|
|
|
63
64
|
style: {
|
|
64
65
|
top
|
|
65
66
|
},
|
|
66
|
-
"aria-describedby":
|
|
67
|
+
"aria-describedby": hiddenId,
|
|
67
68
|
"data-testid": "modal-container",
|
|
68
69
|
children: [
|
|
69
70
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_mobius.VisuallyHidden, {
|
|
70
71
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
|
|
71
|
-
id:
|
|
72
|
+
id: hiddenId,
|
|
72
73
|
children: "Please select a date from the calendar"
|
|
73
74
|
})
|
|
74
75
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/DatePicker/DatePickerModal.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n Icon,\n VisuallyHidden,\n useOnClickOutside,\n} from \"@simplybusiness/mobius\";\nimport
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/DatePicker/DatePickerModal.tsx"],"sourcesContent":["\"use client\";\n\nimport { chevronLeft, chevronRight } from \"@simplybusiness/icons\";\nimport {\n Icon,\n VisuallyHidden,\n useOnClickOutside,\n} from \"@simplybusiness/mobius\";\nimport classNames from \"classnames/dedupe\";\nimport { useId, useRef } from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport FocusTrap from \"../../hooks/useFocusTrap/useFocusTrap\";\nimport { dateObjToString, weekdayAsOneLetter } from \"./utils\";\nimport { getStartWeekday } from \"./utils/getStartWeekday\";\n\nconst PARENT_NODE = typeof document !== \"undefined\" && document.body;\n\nconst IconLeft = () => <Icon icon={chevronLeft} />;\nconst IconRight = () => <Icon icon={chevronRight} />;\n\nexport type DatePickerModalProps = {\n date?: string; // yyyy-mm-dd\n isOpen: boolean;\n top: number;\n onSelected: (date?: string | undefined) => void;\n min?: string;\n max?: string;\n};\n\nconst startWeekday = getStartWeekday(navigator?.language);\n\nconst DatePickerModal = ({\n date,\n isOpen,\n onSelected,\n top,\n min,\n max,\n}: DatePickerModalProps) => {\n const modalRef = useRef<HTMLDivElement>(null);\n const initialDate = date ? new Date(date) : undefined;\n const minDate = min ? new Date(min) : undefined;\n const maxDate = max ? new Date(max) : undefined;\n const hiddenId = `screen-reader-title-${useId()}`;\n\n if (isOpen && PARENT_NODE) {\n PARENT_NODE?.setAttribute(\"aria-hidden\", \"true\");\n }\n\n const handleSelected = (selectedDate?: string | undefined) => {\n if (PARENT_NODE) PARENT_NODE?.removeAttribute(\"aria-hidden\");\n onSelected(selectedDate);\n };\n\n const handleDayPickerSelect = (selectedDate: Date | undefined) => {\n if (!selectedDate) return;\n\n handleSelected(dateObjToString(selectedDate));\n };\n\n useOnClickOutside(modalRef, () => {\n if (modalRef.current && isOpen) {\n handleSelected();\n }\n });\n\n const modalClasses = classNames(\"mobius/DatePickerModal\", {\n \"--is-open\": isOpen,\n });\n\n return (\n <FocusTrap>\n <div\n ref={modalRef}\n className={modalClasses}\n style={{ top }}\n aria-describedby={hiddenId}\n data-testid=\"modal-container\"\n >\n <VisuallyHidden>\n <div id={hiddenId}>Please select a date from the calendar</div>\n </VisuallyHidden>\n <DayPicker\n mode=\"single\"\n fromDate={minDate}\n toDate={maxDate}\n selected={initialDate}\n defaultMonth={initialDate}\n onSelect={handleDayPickerSelect}\n pagedNavigation\n showOutsideDays\n weekStartsOn={startWeekday}\n formatters={{ formatWeekdayName: weekdayAsOneLetter }}\n components={{\n IconLeft,\n IconRight,\n }}\n />\n </div>\n </FocusTrap>\n );\n};\n\nexport default DatePickerModal;\n"],"names":["navigator","PARENT_NODE","document","body","IconLeft","Icon","icon","chevronLeft","IconRight","chevronRight","startWeekday","getStartWeekday","language","DatePickerModal","date","isOpen","onSelected","top","min","max","modalRef","useRef","initialDate","Date","undefined","minDate","maxDate","hiddenId","useId","setAttribute","handleSelected","selectedDate","removeAttribute","handleDayPickerSelect","dateObjToString","useOnClickOutside","current","modalClasses","classNames","FocusTrap","div","ref","className","style","aria-describedby","data-testid","VisuallyHidden","id","DayPicker","mode","fromDate","toDate","selected","defaultMonth","onSelect","pagedNavigation","showOutsideDays","weekStartsOn","formatters","formatWeekdayName","weekdayAsOneLetter","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAuGA;;;eAAA;;;;uBArG0C;wBAKnC;+DACgB;uBACO;gCACJ;qEACJ;uBAC8B;iCACpB;;;;;;IAgBKA;AAdrC,MAAMC,cAAc,OAAOC,aAAa,eAAeA,SAASC,IAAI;AAEpE,MAAMC,WAAW,kBAAM,qBAACC,YAAI;QAACC,MAAMC,kBAAW;;AAC9C,MAAMC,YAAY,kBAAM,qBAACH,YAAI;QAACC,MAAMG,mBAAY;;AAWhD,MAAMC,eAAeC,IAAAA,gCAAe,GAACX,aAAAA,uBAAAA,iCAAAA,WAAWY,QAAQ;AAExD,MAAMC,kBAAkB,CAAC,EACvBC,IAAI,EACJC,MAAM,EACNC,UAAU,EACVC,GAAG,EACHC,GAAG,EACHC,GAAG,EACkB;IACrB,MAAMC,WAAWC,IAAAA,aAAM,EAAiB;IACxC,MAAMC,cAAcR,OAAO,IAAIS,KAAKT,QAAQU;IAC5C,MAAMC,UAAUP,MAAM,IAAIK,KAAKL,OAAOM;IACtC,MAAME,UAAUP,MAAM,IAAII,KAAKJ,OAAOK;IACtC,MAAMG,WAAW,CAAC,oBAAoB,EAAEC,IAAAA,YAAK,IAAG,CAAC;IAEjD,IAAIb,UAAUd,aAAa;QACzBA,wBAAAA,kCAAAA,YAAa4B,YAAY,CAAC,eAAe;IAC3C;IAEA,MAAMC,iBAAiB,CAACC;QACtB,IAAI9B,aAAaA,wBAAAA,kCAAAA,YAAa+B,eAAe,CAAC;QAC9ChB,WAAWe;IACb;IAEA,MAAME,wBAAwB,CAACF;QAC7B,IAAI,CAACA,cAAc;QAEnBD,eAAeI,IAAAA,sBAAe,EAACH;IACjC;IAEAI,IAAAA,yBAAiB,EAACf,UAAU;QAC1B,IAAIA,SAASgB,OAAO,IAAIrB,QAAQ;YAC9Be;QACF;IACF;IAEA,MAAMO,eAAeC,IAAAA,eAAU,EAAC,0BAA0B;QACxD,aAAavB;IACf;IAEA,qBACE,qBAACwB,qBAAS;kBACR,cAAA,sBAACC;YACCC,KAAKrB;YACLsB,WAAWL;YACXM,OAAO;gBAAE1B;YAAI;YACb2B,oBAAkBjB;YAClBkB,eAAY;;8BAEZ,qBAACC,sBAAc;8BACb,cAAA,qBAACN;wBAAIO,IAAIpB;kCAAU;;;8BAErB,qBAACqB,yBAAS;oBACRC,MAAK;oBACLC,UAAUzB;oBACV0B,QAAQzB;oBACR0B,UAAU9B;oBACV+B,cAAc/B;oBACdgC,UAAUrB;oBACVsB,eAAe;oBACfC,eAAe;oBACfC,cAAc/C;oBACdgD,YAAY;wBAAEC,mBAAmBC,yBAAkB;oBAAC;oBACpDC,YAAY;wBACVzD;wBACAI;oBACF;;;;;AAKV;MAEA,WAAeK"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
var _navigator;
|
|
3
3
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
-
import { Icon, VisuallyHidden, useOnClickOutside } from "@simplybusiness/mobius";
|
|
5
4
|
import { chevronLeft, chevronRight } from "@simplybusiness/icons";
|
|
5
|
+
import { Icon, VisuallyHidden, useOnClickOutside } from "@simplybusiness/mobius";
|
|
6
6
|
import classNames from "classnames/dedupe";
|
|
7
|
-
import { useRef } from "react";
|
|
7
|
+
import { useId, useRef } from "react";
|
|
8
8
|
import { DayPicker } from "react-day-picker";
|
|
9
9
|
import FocusTrap from "../../hooks/useFocusTrap/useFocusTrap";
|
|
10
10
|
import { dateObjToString, weekdayAsOneLetter } from "./utils";
|
|
@@ -22,6 +22,7 @@ const DatePickerModal = ({ date, isOpen, onSelected, top, min, max })=>{
|
|
|
22
22
|
const initialDate = date ? new Date(date) : undefined;
|
|
23
23
|
const minDate = min ? new Date(min) : undefined;
|
|
24
24
|
const maxDate = max ? new Date(max) : undefined;
|
|
25
|
+
const hiddenId = `screen-reader-title-${useId()}`;
|
|
25
26
|
if (isOpen && PARENT_NODE) {
|
|
26
27
|
PARENT_NODE === null || PARENT_NODE === void 0 ? void 0 : PARENT_NODE.setAttribute("aria-hidden", "true");
|
|
27
28
|
}
|
|
@@ -48,12 +49,12 @@ const DatePickerModal = ({ date, isOpen, onSelected, top, min, max })=>{
|
|
|
48
49
|
style: {
|
|
49
50
|
top
|
|
50
51
|
},
|
|
51
|
-
"aria-describedby":
|
|
52
|
+
"aria-describedby": hiddenId,
|
|
52
53
|
"data-testid": "modal-container",
|
|
53
54
|
children: [
|
|
54
55
|
/*#__PURE__*/ _jsx(VisuallyHidden, {
|
|
55
56
|
children: /*#__PURE__*/ _jsx("div", {
|
|
56
|
-
id:
|
|
57
|
+
id: hiddenId,
|
|
57
58
|
children: "Please select a date from the calendar"
|
|
58
59
|
})
|
|
59
60
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/DatePicker/DatePickerModal.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n Icon,\n VisuallyHidden,\n useOnClickOutside,\n} from \"@simplybusiness/mobius\";\nimport
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/DatePicker/DatePickerModal.tsx"],"sourcesContent":["\"use client\";\n\nimport { chevronLeft, chevronRight } from \"@simplybusiness/icons\";\nimport {\n Icon,\n VisuallyHidden,\n useOnClickOutside,\n} from \"@simplybusiness/mobius\";\nimport classNames from \"classnames/dedupe\";\nimport { useId, useRef } from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport FocusTrap from \"../../hooks/useFocusTrap/useFocusTrap\";\nimport { dateObjToString, weekdayAsOneLetter } from \"./utils\";\nimport { getStartWeekday } from \"./utils/getStartWeekday\";\n\nconst PARENT_NODE = typeof document !== \"undefined\" && document.body;\n\nconst IconLeft = () => <Icon icon={chevronLeft} />;\nconst IconRight = () => <Icon icon={chevronRight} />;\n\nexport type DatePickerModalProps = {\n date?: string; // yyyy-mm-dd\n isOpen: boolean;\n top: number;\n onSelected: (date?: string | undefined) => void;\n min?: string;\n max?: string;\n};\n\nconst startWeekday = getStartWeekday(navigator?.language);\n\nconst DatePickerModal = ({\n date,\n isOpen,\n onSelected,\n top,\n min,\n max,\n}: DatePickerModalProps) => {\n const modalRef = useRef<HTMLDivElement>(null);\n const initialDate = date ? new Date(date) : undefined;\n const minDate = min ? new Date(min) : undefined;\n const maxDate = max ? new Date(max) : undefined;\n const hiddenId = `screen-reader-title-${useId()}`;\n\n if (isOpen && PARENT_NODE) {\n PARENT_NODE?.setAttribute(\"aria-hidden\", \"true\");\n }\n\n const handleSelected = (selectedDate?: string | undefined) => {\n if (PARENT_NODE) PARENT_NODE?.removeAttribute(\"aria-hidden\");\n onSelected(selectedDate);\n };\n\n const handleDayPickerSelect = (selectedDate: Date | undefined) => {\n if (!selectedDate) return;\n\n handleSelected(dateObjToString(selectedDate));\n };\n\n useOnClickOutside(modalRef, () => {\n if (modalRef.current && isOpen) {\n handleSelected();\n }\n });\n\n const modalClasses = classNames(\"mobius/DatePickerModal\", {\n \"--is-open\": isOpen,\n });\n\n return (\n <FocusTrap>\n <div\n ref={modalRef}\n className={modalClasses}\n style={{ top }}\n aria-describedby={hiddenId}\n data-testid=\"modal-container\"\n >\n <VisuallyHidden>\n <div id={hiddenId}>Please select a date from the calendar</div>\n </VisuallyHidden>\n <DayPicker\n mode=\"single\"\n fromDate={minDate}\n toDate={maxDate}\n selected={initialDate}\n defaultMonth={initialDate}\n onSelect={handleDayPickerSelect}\n pagedNavigation\n showOutsideDays\n weekStartsOn={startWeekday}\n formatters={{ formatWeekdayName: weekdayAsOneLetter }}\n components={{\n IconLeft,\n IconRight,\n }}\n />\n </div>\n </FocusTrap>\n );\n};\n\nexport default DatePickerModal;\n"],"names":["navigator","chevronLeft","chevronRight","Icon","VisuallyHidden","useOnClickOutside","classNames","useId","useRef","DayPicker","FocusTrap","dateObjToString","weekdayAsOneLetter","getStartWeekday","PARENT_NODE","document","body","IconLeft","icon","IconRight","startWeekday","language","DatePickerModal","date","isOpen","onSelected","top","min","max","modalRef","initialDate","Date","undefined","minDate","maxDate","hiddenId","setAttribute","handleSelected","selectedDate","removeAttribute","handleDayPickerSelect","current","modalClasses","div","ref","className","style","aria-describedby","data-testid","id","mode","fromDate","toDate","selected","defaultMonth","onSelect","pagedNavigation","showOutsideDays","weekStartsOn","formatters","formatWeekdayName","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;IA6BqCA;;AA3BrC,SAASC,WAAW,EAAEC,YAAY,QAAQ,wBAAwB;AAClE,SACEC,IAAI,EACJC,cAAc,EACdC,iBAAiB,QACZ,yBAAyB;AAChC,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,KAAK,EAAEC,MAAM,QAAQ,QAAQ;AACtC,SAASC,SAAS,QAAQ,mBAAmB;AAC7C,OAAOC,eAAe,wCAAwC;AAC9D,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,UAAU;AAC9D,SAASC,eAAe,QAAQ,0BAA0B;AAE1D,MAAMC,cAAc,OAAOC,aAAa,eAAeA,SAASC,IAAI;AAEpE,MAAMC,WAAW,kBAAM,KAACd;QAAKe,MAAMjB;;AACnC,MAAMkB,YAAY,kBAAM,KAAChB;QAAKe,MAAMhB;;AAWpC,MAAMkB,eAAeP,iBAAgBb,aAAAA,uBAAAA,iCAAAA,WAAWqB,QAAQ;AAExD,MAAMC,kBAAkB,CAAC,EACvBC,IAAI,EACJC,MAAM,EACNC,UAAU,EACVC,GAAG,EACHC,GAAG,EACHC,GAAG,EACkB;IACrB,MAAMC,WAAWrB,OAAuB;IACxC,MAAMsB,cAAcP,OAAO,IAAIQ,KAAKR,QAAQS;IAC5C,MAAMC,UAAUN,MAAM,IAAII,KAAKJ,OAAOK;IACtC,MAAME,UAAUN,MAAM,IAAIG,KAAKH,OAAOI;IACtC,MAAMG,WAAW,CAAC,oBAAoB,EAAE5B,QAAQ,CAAC;IAEjD,IAAIiB,UAAUV,aAAa;QACzBA,wBAAAA,kCAAAA,YAAasB,YAAY,CAAC,eAAe;IAC3C;IAEA,MAAMC,iBAAiB,CAACC;QACtB,IAAIxB,aAAaA,wBAAAA,kCAAAA,YAAayB,eAAe,CAAC;QAC9Cd,WAAWa;IACb;IAEA,MAAME,wBAAwB,CAACF;QAC7B,IAAI,CAACA,cAAc;QAEnBD,eAAe1B,gBAAgB2B;IACjC;IAEAjC,kBAAkBwB,UAAU;QAC1B,IAAIA,SAASY,OAAO,IAAIjB,QAAQ;YAC9Ba;QACF;IACF;IAEA,MAAMK,eAAepC,WAAW,0BAA0B;QACxD,aAAakB;IACf;IAEA,qBACE,KAACd;kBACC,cAAA,MAACiC;YACCC,KAAKf;YACLgB,WAAWH;YACXI,OAAO;gBAAEpB;YAAI;YACbqB,oBAAkBZ;YAClBa,eAAY;;8BAEZ,KAAC5C;8BACC,cAAA,KAACuC;wBAAIM,IAAId;kCAAU;;;8BAErB,KAAC1B;oBACCyC,MAAK;oBACLC,UAAUlB;oBACVmB,QAAQlB;oBACRmB,UAAUvB;oBACVwB,cAAcxB;oBACdyB,UAAUf;oBACVgB,eAAe;oBACfC,eAAe;oBACfC,cAActC;oBACduC,YAAY;wBAAEC,mBAAmBhD;oBAAmB;oBACpDiD,YAAY;wBACV5C;wBACAE;oBACF;;;;;AAKV;AAEA,eAAeG,gBAAgB"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@simplybusiness/mobius-datepicker",
|
|
3
3
|
"license": "UNLICENSED",
|
|
4
|
-
"version": "4.3.
|
|
4
|
+
"version": "4.3.29",
|
|
5
5
|
"description": "Mobius date picker component",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -72,8 +72,8 @@
|
|
|
72
72
|
"react-dom": "^16.13.1 || ^17.0.1 || ^18.0.0"
|
|
73
73
|
},
|
|
74
74
|
"dependencies": {
|
|
75
|
-
"@simplybusiness/icons": "^4.
|
|
76
|
-
"@simplybusiness/mobius": "^4.8.
|
|
75
|
+
"@simplybusiness/icons": "^4.6.0",
|
|
76
|
+
"@simplybusiness/mobius": "^4.8.4",
|
|
77
77
|
"classnames": "^2.5.1",
|
|
78
78
|
"date-fns": "^3.6.0",
|
|
79
79
|
"react-day-picker": "^8.10.1"
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
+
import { chevronLeft, chevronRight } from "@simplybusiness/icons";
|
|
3
4
|
import {
|
|
4
5
|
Icon,
|
|
5
6
|
VisuallyHidden,
|
|
6
7
|
useOnClickOutside,
|
|
7
8
|
} from "@simplybusiness/mobius";
|
|
8
|
-
import { chevronLeft, chevronRight } from "@simplybusiness/icons";
|
|
9
9
|
import classNames from "classnames/dedupe";
|
|
10
|
-
import { useRef } from "react";
|
|
10
|
+
import { useId, useRef } from "react";
|
|
11
11
|
import { DayPicker } from "react-day-picker";
|
|
12
12
|
import FocusTrap from "../../hooks/useFocusTrap/useFocusTrap";
|
|
13
13
|
import { dateObjToString, weekdayAsOneLetter } from "./utils";
|
|
@@ -41,6 +41,7 @@ const DatePickerModal = ({
|
|
|
41
41
|
const initialDate = date ? new Date(date) : undefined;
|
|
42
42
|
const minDate = min ? new Date(min) : undefined;
|
|
43
43
|
const maxDate = max ? new Date(max) : undefined;
|
|
44
|
+
const hiddenId = `screen-reader-title-${useId()}`;
|
|
44
45
|
|
|
45
46
|
if (isOpen && PARENT_NODE) {
|
|
46
47
|
PARENT_NODE?.setAttribute("aria-hidden", "true");
|
|
@@ -73,13 +74,11 @@ const DatePickerModal = ({
|
|
|
73
74
|
ref={modalRef}
|
|
74
75
|
className={modalClasses}
|
|
75
76
|
style={{ top }}
|
|
76
|
-
aria-describedby=
|
|
77
|
+
aria-describedby={hiddenId}
|
|
77
78
|
data-testid="modal-container"
|
|
78
79
|
>
|
|
79
80
|
<VisuallyHidden>
|
|
80
|
-
<div id=
|
|
81
|
-
Please select a date from the calendar
|
|
82
|
-
</div>
|
|
81
|
+
<div id={hiddenId}>Please select a date from the calendar</div>
|
|
83
82
|
</VisuallyHidden>
|
|
84
83
|
<DayPicker
|
|
85
84
|
mode="single"
|