@khanacademy/wonder-blocks-birthday-picker 1.2.12 → 1.2.13

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @khanacademy/wonder-blocks-birthday-picker
 
+## 1.2.13
+
+### Patch Changes
+
+-   ee6fc773: Added keyboard support to search items when the dropdown is focused, included "Enter" as a key to trigger actions with the "option" role
+-   Updated dependencies [ee6fc773]
+    -   @khanacademy/wonder-blocks-dropdown@2.8.0
+
 ## 1.2.12
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-birthday-picker",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -13,10 +13,10 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
+    "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
     "@khanacademy/wonder-blocks-core": "^4.3.2",
-    "@khanacademy/wonder-blocks-dropdown": "^2.7.6",
+    "@khanacademy/wonder-blocks-dropdown": "^2.8.0",
     "@khanacademy/wonder-blocks-icon": "^1.2.29",
     "@khanacademy/wonder-blocks-layout": "^1.4.10",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",

package/src/components/__tests__/birthday-picker.test.js

@@ -495,4 +495,37 @@ describe("BirthdayPicker", () => {
             ).toBeInTheDocument();
         });
     });
+
+    describe("keyboard", () => {
+        beforeEach(() => {
+            jest.useFakeTimers();
+        });
+
+        it("should find and select an item using the keyboard", () => {
+            // Arrange
+            const onChange = jest.fn();
+
+            render(<BirthdayPicker onChange={onChange} />);
+
+            // Act
+            // Focus on the month selector
+            userEvent.tab();
+            userEvent.keyboard("Jul");
+            jest.advanceTimersByTime(501);
+
+            // Focus on the day selector
+            userEvent.tab();
+            userEvent.keyboard("5");
+            jest.advanceTimersByTime(501);
+
+            // Focus on the year selector
+            userEvent.tab();
+            // It should focus on the first occurrence (2022)
+            userEvent.keyboard("20");
+            jest.advanceTimersByTime(501);
+
+            // Assert
+            expect(onChange).toHaveBeenCalledWith("2022-07-05");
+        });
+    });
 });