fix: AccordionPanel のフォーカスインジケータが隠れないように修正 (SHRUI-412) (#1698)

* fix: modify focus indicator not to be hidden by sibling elements

* chore: move focus indicator styles into theme.shadow

src/components/AccordionPanel/AccordionPanelTrigger.tsx

@@ -108,17 +108,16 @@ const Button = styled.button<{ themes: Theme }>`
         border-radius: 0 0 ${radiusMap.m} ${radiusMap.m};
       }
 
-      &:focus {
-        outline: none;
-        box-shadow: ${shadow.OUTLINE};
-      }
-
       &:hover,
       &:focus:not(:focus-visible) {
         background-color: ${color.hoverColor('#fff')};
         box-shadow: none;
       }
 
+      &:focus {
+        ${shadow.focusIndicatorStyles}
+      }
+
       /* TODO replace if impremented Layout component */
       & > * + * {
         margin-left: ${spacingByChar(0.5)};

src/themes/createShadow.ts

@@ -1,3 +1,4 @@
+import { FlattenSimpleInterpolation, css } from 'styled-components'
 import { merge } from '../libs/lodash'
 import { defaultColor } from './createColor'
 
@@ -11,15 +12,29 @@ export interface CreatedShadowTheme {
   BASE: string
   DIALOG: string
   OUTLINE: string
+  focusIndicatorStyles: FlattenSimpleInterpolation
 }
 
+const defaultOutline = `0 0 0 2px white, 0 0 0 4px ${defaultColor.OUTLINE}`
+
 export const defaultShadow = {
   BASE: 'rgba(51, 51, 51, 0.15) 0 0 4px 0',
   DIALOG: 'rgba(51, 51, 51, 0.3) 0 4px 10px 0',
-  OUTLINE: `0 0 0 2px white, 0 0 0 4px ${defaultColor.OUTLINE}`,
+  OUTLINE: defaultOutline,
+}
+
+function createFocusIndicatorStyles(outline?: string) {
+  return css`
+    outline: none;
+    isolation: isolate;
+    box-shadow: ${outline || defaultOutline};
+  `
 }
 
 export const createShadow = (userShadow: ShadowProperty = {}) => {
-  const created: CreatedShadowTheme = merge({ ...defaultShadow }, userShadow)
+  const created: CreatedShadowTheme = merge(
+    { ...defaultShadow, focusIndicatorStyles: createFocusIndicatorStyles(userShadow.OUTLINE) },
+    userShadow,
+  )
   return created
 }