UBER-634: focus on SelectPopup (#3897)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

.gitignore

@@ -2,6 +2,7 @@
 lib/
 _api-extractor-temp/
 temp/
+.idea
 
 # Logs
 *.log

packages/theme/styles/popups.scss

@@ -23,6 +23,10 @@
   max-width: 17rem;
   max-height: 22rem;
 
+  &:focus {
+    outline: 0;
+  }
+
   &:not(.embedded) {
     background: var(--theme-popup-color);
     border: 1px solid var(--theme-popup-divider);

packages/ui/src/components/SelectPopup.svelte

@@ -36,6 +36,7 @@
   export let showShadow: boolean = true
   export let embedded: boolean = false
 
+  let popupElement: HTMLDivElement | undefined = undefined
   let search: string = ''
 
   const dispatch = createEventDispatcher()
@@ -54,6 +55,11 @@
   }
 
   function onKeydown (key: KeyboardEvent): void {
+    if (key.code === 'Tab') {
+      dispatch('close')
+      key.preventDefault()
+      key.stopPropagation()
+    }
     if (key.code === 'ArrowUp') {
       key.stopPropagation()
       key.preventDefault()
@@ -75,12 +81,19 @@
   $: filteredObjects = value.filter((el) => (el.label ?? el.text ?? '').toLowerCase().includes(search.toLowerCase()))
 
   $: huge = size === 'medium' || size === 'large'
+
+  $: if (popupElement) {
+    popupElement.focus()
+  }
 </script>
 
 <FocusHandler {manager} />
 
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
   class="selectPopup"
+  bind:this={popupElement}
+  tabindex="0"
   class:noShadow={showShadow === false}
   class:full-width={width === 'full'}
   class:max-width-40={width === 'large'}