fix(ld-select): focus outline styles for Safari

emdgroup-liquid · Nov 24, 2021 · 86a3c3c · 86a3c3c
1 parent 6724115
commit 86a3c3c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 8 deletions.
diff --git a/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.css b/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.css
@@ -1,4 +1,4 @@
-:host(:not(:last-child)) {
+:host(:not(:last-of-type)) {
   .ld-option-internal {
     border-bottom: solid var(--ld-option-border-col) var(--ld-sp-1);
   }
@@ -24,7 +24,7 @@
   --ld-option-thm-bg-col-focus: var(--ld-thm-primary-highlight);
   --ld-option-thm-bg-col-active: var(--ld-thm-primary-highlight);
 
-  /*outline: none;*/
+  outline: none;
   display: flex;
   position: relative;
   color: var(--ld-option-text-col);
@@ -86,22 +86,41 @@
     pointer-events: none;
   }
 
-  &:where(:focus:focus-visible):before {
-    box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-option-thm-col);
+  &:where(:focus),
+  &:where(:focus:focus-visible) {
+    &:before {
+      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-option-thm-col);
+    }
+  }
+
+  &:where(:focus:not(:focus-visible)) {
+    &:before {
+      box-shadow: none;
+    }
   }
 
   &:where(:not([disabled]):not([aria-disabled='true'])) {
     :where(.ld-option-internal__check) {
       color: var(--ld-option-thm-col);
     }
 
+    &:where(:focus),
     &:where(:focus:focus-visible) {
       background-color: var(--ld-option-thm-bg-col-focus);
 
       :where(.ld-option-internal__check) {
         color: var(--ld-option-thm-col-focus);
       }
     }
+
+    &:where(:focus:not(:focus-visible)) {
+      background-color: var(--ld-option-bg-col);
+
+      :where(.ld-option-internal__check) {
+        color: var(--ld-option-thm-col);
+      }
+    }
+
     @media (hover: hover) {
       &:where(:hover) {
         background-color: var(--ld-option-thm-bg-col-hover);
@@ -111,6 +130,7 @@
         }
       }
     }
+
     &:where(:active),
     &:where(:active:focus-visible) {
       background-color: var(--ld-option-thm-bg-col-active);

diff --git a/src/liquid/components/ld-select/ld-select-popper/ld-select-popper.css b/src/liquid/components/ld-select/ld-select-popper/ld-select-popper.css
@@ -7,10 +7,6 @@
   --ld-select-popper-border-col: var(--ld-col-neutral-100);
   --ld-select-popper-bg-col: var(--ld-col-wht);
   min-width: var(--ld-select-popper-min-width);
-
-  ld-option-internal:last-of-type::part(option) {
-    border-bottom: 0;
-  }
 }
 
 .ld-select-popper {
@@ -34,6 +30,7 @@
 
 .ld-select-popper__scroll-container {
   max-height: var(--ld-select-popper-max-height);
+  overflow-x: visible;
   overflow-y: auto;
   border-bottom-left-radius: var(--ld-br-m);
   border-bottom-right-radius: var(--ld-br-m);

diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
@@ -202,6 +202,10 @@
   }
 }
 
+.ld-select__btn-trigger {
+  overflow: hidden;
+}
+
 :where(.ld-select),
 :where(.ld-select) > select {
   min-height: var(--ld-select-min-height-md);

diff --git a/src/liquid/components/ld-select/test/ld-select.e2e.ts b/src/liquid/components/ld-select/test/ld-select.e2e.ts
@@ -168,6 +168,7 @@ describe('ld-select', () => {
         await page.keyboard.press('Tab')
         await page.waitForChanges()
         await page.keyboard.press('ArrowDown')
+        await page.waitForChanges()
         await page.keyboard.press('ArrowDown')
         const results = await page.compareScreenshot()
         expect(results).toMatchScreenshot()
@@ -182,6 +183,7 @@ describe('ld-select', () => {
         await page.keyboard.press('Tab')
         await page.waitForChanges()
         await page.keyboard.press('ArrowDown')
+        await page.waitForChanges()
         await page.keyboard.press('ArrowUp')
         const results = await page.compareScreenshot()
         expect(results).toMatchScreenshot()
@@ -222,6 +224,7 @@ describe('ld-select', () => {
         await page.keyboard.press('Tab')
         await page.waitForChanges()
         await page.keyboard.press('ArrowDown')
+        await page.waitForChanges()
         await page.keyboard.press('ArrowDown')
         const results = await page.compareScreenshot()
         expect(results).toMatchScreenshot()
@@ -372,6 +375,7 @@ describe('ld-select', () => {
         await page.keyboard.press('Tab')
         await page.waitForChanges()
         await page.keyboard.press('ArrowDown')
+        await page.waitForChanges()
         await page.keyboard.press('ArrowDown')
         const results = await page.compareScreenshot()
         expect(results).toMatchScreenshot()
@@ -399,6 +403,7 @@ describe('ld-select', () => {
         await page.keyboard.press('Tab')
         await page.waitForChanges()
         await page.keyboard.press('ArrowDown')
+        await page.waitForChanges()
         await page.keyboard.press('ArrowDown')
         const results = await page.compareScreenshot()
         expect(results).toMatchScreenshot()
@@ -426,6 +431,7 @@ describe('ld-select', () => {
         await page.keyboard.press('Tab')
         await page.waitForChanges()
         await page.keyboard.press('ArrowDown')
+        await page.waitForChanges()
         await page.keyboard.press('ArrowDown')
         const results = await page.compareScreenshot()
         expect(results).toMatchScreenshot()