fix: aria-disabled=falseが付かないように修正

pixiv · Oct 20, 2023 · 3398cb4 · 3398cb4
1 parent da84270
commit 3398cb4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 16 deletions.
diff --git a/packages/react/src/components/Button/__snapshots__/index.test.tsx.snap b/packages/react/src/components/Button/__snapshots__/index.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`Basic <Button>Hello</Button> 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -20,7 +21,11 @@ exports[`Basic <Button>Hello</Button> 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -32,11 +37,6 @@ exports[`Basic <Button>Hello</Button> 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -125,23 +125,41 @@ exports[`Basic <Button>Hello</Button> 1`] = `
 
 exports[`Link <Button to="#">Hello</Button> 1`] = `
 .c0 {
-  color: inherit;
   cursor: pointer;
-}
-
-.c0:focus {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
   outline: none;
-}
-
-.c0 .text {
-  top: calc(1em + 2em);
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
 }
 
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled=false]) {
   cursor: default;
 }
 
+.c0:focus {
+  outline: none;
+}
+
+.c0::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -221,7 +239,6 @@ exports[`Link <Button to="#">Hello</Button> 1`] = `
 }
 
 <a
-  aria-disabled={false}
   className="c0 c1"
   href="#"
 >

diff --git a/packages/react/src/components/Clickable/index.tsx b/packages/react/src/components/Clickable/index.tsx
@@ -31,9 +31,14 @@ const Clickable = React.forwardRef<ClickableElement, ClickableProps>(
     const isLink = 'to' in props
     const as = isLink ? Link : 'button'
     const ariaDisabled = isLink && props.disabled === true ? true : undefined
+    let rest = props
+    if (isLink) {
+      const { disabled, ..._rest } = props
+      rest = _rest
+    }
     return (
       <StyledClickableDiv
-        {...props}
+        {...rest}
         ref={ref}
         as={as}
         aria-disabled={ariaDisabled}