From 5d050217ddf34ebbd5d48870f7e1bd2f2cd2aa37 Mon Sep 17 00:00:00 2001 From: krane-c-eightfold Date: Wed, 15 Jan 2025 12:38:12 +0530 Subject: [PATCH] fix: dropdown: removed outer container tabindex (#930) * fix: dropdown: removed outer container tabindex * fix: dropdown: introduced overlaywrapper tabindex prop * fix: dropdown: simplified propname * fix: dropdown: updated snapshots --- .../__snapshots__/RangePicker.test.js.snap | 30 ++++ .../Tests/__snapshots__/range.test.tsx.snap | 132 ++++++++++++++++++ src/components/Dropdown/Dropdown.tsx | 2 + src/components/Dropdown/Dropdown.types.ts | 5 + .../Select/__snapshots__/Select.test.tsx.snap | 13 ++ 5 files changed, 182 insertions(+) diff --git a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/RangePicker.test.js.snap b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/RangePicker.test.js.snap index 5d44694ce..fa4540337 100644 --- a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/RangePicker.test.js.snap +++ b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/RangePicker.test.js.snap @@ -14,6 +14,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "Start date", "size": "12", @@ -27,12 +28,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -64,6 +67,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "End date", "size": "12", @@ -77,12 +81,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -254,6 +260,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "End date", "size": "12", @@ -267,12 +274,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -410,6 +419,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "Start date", "size": "12", @@ -423,12 +433,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -464,6 +476,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "End date", "size": "12", @@ -477,12 +490,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -627,6 +642,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "Start date", "size": "12", @@ -640,12 +656,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -788,6 +806,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "End date", "size": "12", @@ -801,12 +820,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -842,6 +863,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "Start date", "size": "12", @@ -855,12 +877,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -1005,6 +1029,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "End date", "size": "12", @@ -1018,12 +1043,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -1059,6 +1086,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "Start date", "size": "12", @@ -1072,12 +1100,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, diff --git a/src/components/DateTimePicker/Internal/Tests/__snapshots__/range.test.tsx.snap b/src/components/DateTimePicker/Internal/Tests/__snapshots__/range.test.tsx.snap index fcea67f4e..dfc0e7709 100644 --- a/src/components/DateTimePicker/Internal/Tests/__snapshots__/range.test.tsx.snap +++ b/src/components/DateTimePicker/Internal/Tests/__snapshots__/range.test.tsx.snap @@ -14,6 +14,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -27,12 +28,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -64,6 +67,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -77,12 +81,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -240,6 +246,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -253,12 +260,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -382,6 +391,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -395,12 +405,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -436,6 +448,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -449,12 +462,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -585,6 +600,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -598,12 +614,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -732,6 +750,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -745,12 +764,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -786,6 +807,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -799,12 +821,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -935,6 +959,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -948,12 +973,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -989,6 +1016,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -1002,12 +1030,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -1136,6 +1166,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -1149,12 +1180,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -1190,6 +1223,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -1203,12 +1237,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -1395,6 +1431,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -1408,12 +1445,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -1445,6 +1484,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -1458,12 +1498,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -1546,6 +1588,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -1559,12 +1602,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -1613,6 +1658,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -1626,12 +1672,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -1667,6 +1715,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -1680,12 +1729,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -1741,6 +1792,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -1754,12 +1806,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -1813,6 +1867,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -1826,12 +1881,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -1867,6 +1924,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -1880,12 +1938,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -2054,6 +2114,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -2067,12 +2128,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -2104,6 +2167,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -2117,12 +2181,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -2205,6 +2271,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -2218,12 +2285,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -2272,6 +2341,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -2285,12 +2355,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -2326,6 +2398,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -2339,12 +2412,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -2400,6 +2475,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -2413,12 +2489,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -2472,6 +2550,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -2485,12 +2564,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -2526,6 +2607,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -2539,12 +2621,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -3174,6 +3258,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -3187,12 +3272,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -3224,6 +3311,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -3237,12 +3325,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -3325,6 +3415,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -3338,12 +3429,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -3392,6 +3485,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -3405,12 +3499,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -3446,6 +3542,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -3459,12 +3556,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -3520,6 +3619,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -3533,12 +3633,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -3592,6 +3694,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -3605,12 +3708,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -3646,6 +3751,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -3659,12 +3765,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -3745,6 +3853,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -3758,12 +3867,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -3795,6 +3906,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -3808,12 +3920,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -3896,6 +4010,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -3909,12 +4024,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -3963,6 +4080,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -3976,12 +4094,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -4017,6 +4137,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -4030,12 +4151,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -4091,6 +4214,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -4104,12 +4228,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -4163,6 +4289,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -4176,12 +4303,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, @@ -4217,6 +4346,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { + "aria-label": "", "autocomplete": "off", "placeholder": "", "size": "12", @@ -4230,12 +4360,14 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, "value": undefined, }, "x-attribsPrefix": Object { + "aria-label": undefined, "autocomplete": undefined, "placeholder": undefined, "size": undefined, diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 8cc048ac2..f504b15a9 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -75,6 +75,7 @@ export const Dropdown: FC = React.memo( trigger = 'click', visible, width, + overlayTabIndex = 0, }, ref: React.ForwardedRef ) => { @@ -392,6 +393,7 @@ export const Dropdown: FC = React.memo( ref={refs.setFloating} style={dropdownStyles} className={dropdownClasses} + tabIndex={overlayTabIndex} onClick={ closeOnDropdownClick ? toggle(false, showDropdown) : null } diff --git a/src/components/Dropdown/Dropdown.types.ts b/src/components/Dropdown/Dropdown.types.ts index 91701ee47..01f7ef7d7 100644 --- a/src/components/Dropdown/Dropdown.types.ts +++ b/src/components/Dropdown/Dropdown.types.ts @@ -88,6 +88,11 @@ export interface DropdownProps { * The dropdown content */ overlay?: React.ReactElement; + /** + * The tabindex of the overlay wrapper + * @default 0 + */ + overlayTabIndex?: number; /** * Placement of the menu * @default bottom-start diff --git a/src/components/Select/__snapshots__/Select.test.tsx.snap b/src/components/Select/__snapshots__/Select.test.tsx.snap index d5ffc4b94..a1650695c 100644 --- a/src/components/Select/__snapshots__/Select.test.tsx.snap +++ b/src/components/Select/__snapshots__/Select.test.tsx.snap @@ -44,6 +44,7 @@ exports[`Select Renders empty options in multiple mode without crashing 1`] = ` />