fix: esc key dismisses listbox (#169)

Fixes #168
nolanlawson · Jul 7, 2021 · 13e6c12 · 13e6c12
1 parent 17ea728
commit 13e6c12
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/src/picker/components/Picker/Picker.js b/src/picker/components/Picker/Picker.js
@@ -625,6 +625,7 @@ function onSkinToneOptionsKeydown (event) {
       return onSkinToneOptionsClick(event)
     case 'Escape':
       halt(event)
+      skinTonePickerExpanded = false
       return focus('skintone-button')
   }
 }

diff --git a/test/spec/picker/Picker.test.js b/test/spec/picker/Picker.test.js
@@ -157,10 +157,11 @@ describe('Picker tests', () => {
 
     await fireEvent.keyDown(activeElement(), { key: 'Escape', code: 'Escape' })
 
-    // listbox closes, which we observe by seeing what's focused
+    // listbox closes and skintone dropdown button becomes active element
     await waitFor(async () => (
       expect(await getAccessibleName(container, activeElement())).toEqual('Choose a skin tone (currently Default)'))
     )
+    await waitFor(() => expect(queryAllByRole('listbox', { name: 'Skin tones' })).toHaveLength(0))
   })
 
   test('nav keyboard test', async () => {