chore: 접근성 테스트 직접 해보기

GDSC-Hongik · May 25, 2024 · 7898967 · 7898967
1 parent d070f9e
commit 7898967
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/.eslintcache b/.eslintcache
@@ -1 +1 @@
-[{"/Users/eugene/github/wow-design-system/packages/wow-ui/src/components/Chip/Chip.stories.ts":"1","/Users/eugene/github/wow-design-system/packages/wow-ui/src/components/Chip/index.tsx":"2","/Users/eugene/github/wow-design-system/packages/wow-ui/src/types/button.ts":"3","/Users/eugene/github/wow-design-system/packages/wow-ui/src/types/index.ts":"4","/Users/eugene/github/wow-design-system/apps/wow-docs/app/page.tsx":"5","/Users/eugene/github/wow-design-system/packages/theme/src/color.ts":"6","/Users/eugene/github/wow-design-system/packages/wow-ui/src/types/Polymorphic.ts":"7","/Users/eugene/github/wow-design-system/packages/wow-icons/src/CloseButton.tsx":"8","/Users/eugene/github/wow-design-system/packages/wow-icons/src/index.ts":"9","/Users/eugene/github/wow-design-system/packages/wow-ui/src/components/Chip/closeButton.tsx":"10"},{"size":3380,"mtime":1716657913265,"results":"11","hashOfConfig":"12"},{"size":5583,"mtime":1716657104272,"results":"13","hashOfConfig":"12"},{"size":2991,"mtime":1716654141266,"results":"14","hashOfConfig":"12"},{"size":57,"mtime":1716631427241,"results":"15","hashOfConfig":"12"},{"size":370,"mtime":1716648638607,"results":"16","hashOfConfig":"12"},{"size":5061,"mtime":1716648586995,"results":"17","hashOfConfig":"12"},{"size":423,"mtime":1716631402622,"results":"18","hashOfConfig":"12"},{"size":328,"mtime":1716654901735,"results":"19","hashOfConfig":"12"},{"size":112,"mtime":1716654851710,"results":"20","hashOfConfig":"12"},{"size":349,"mtime":1716655646913,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","suppressedMessages":"24","errorCount":0,"fatalErrorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"8oyd96",{"filePath":"25","messages":"26","suppressedMessages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","suppressedMessages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","suppressedMessages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","suppressedMessages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"37","messages":"38","suppressedMessages":"39","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"40","messages":"41","suppressedMessages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","suppressedMessages":"45","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","suppressedMessages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","suppressedMessages":"51","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/eugene/github/wow-design-system/packages/wow-ui/src/components/Chip/Chip.stories.ts",["52","53"],[],"/Users/eugene/github/wow-design-system/packages/wow-ui/src/components/Chip/index.tsx",["54","55","56","57","58"],[],"/Users/eugene/github/wow-design-system/packages/wow-ui/src/types/button.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-ui/src/types/index.ts",[],[],"/Users/eugene/github/wow-design-system/apps/wow-docs/app/page.tsx",["59"],[],"/Users/eugene/github/wow-design-system/packages/theme/src/color.ts",["60"],[],"/Users/eugene/github/wow-design-system/packages/wow-ui/src/types/Polymorphic.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-icons/src/CloseButton.tsx",[],[],"/Users/eugene/github/wow-design-system/packages/wow-icons/src/index.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-ui/src/components/Chip/closeButton.tsx",[],[],{"ruleId":"61","severity":1,"message":"62","line":3,"column":18,"nodeType":"63","endLine":3,"endColumn":37},{"ruleId":"64","severity":1,"message":"65","line":142,"column":7,"nodeType":"66","messageId":"67","endLine":142,"endColumn":14},{"ruleId":"61","severity":1,"message":"68","line":2,"column":21,"nodeType":"63","endLine":2,"endColumn":41},{"ruleId":"61","severity":1,"message":"69","line":3,"column":24,"nodeType":"63","endLine":3,"endColumn":44},{"ruleId":"61","severity":1,"message":"70","line":7,"column":25,"nodeType":"63","endLine":7,"endColumn":56},{"ruleId":"71","severity":1,"message":"72","line":127,"column":11,"nodeType":"73","endLine":127,"endColumn":50},{"ruleId":"74","severity":1,"message":"75","line":127,"column":11,"nodeType":"73","endLine":127,"endColumn":50},{"ruleId":"61","severity":1,"message":"76","line":1,"column":21,"nodeType":"63","endLine":1,"endColumn":45},{"ruleId":"77","severity":1,"message":"78","line":4,"column":10,"nodeType":"66","messageId":"79","endLine":4,"endColumn":15},"import/no-unresolved","Unable to resolve path to module '@/components/Chip'.","Literal","no-undef","'console' is not defined.","Identifier","undef","Unable to resolve path to module '@styled-system/css'.","Unable to resolve path to module '@styled-system/jsx'.","Unable to resolve path to module '@/components/Chip/closeButton'.","jsx-a11y/click-events-have-key-events","Visible, non-interactive elements with click handlers must have at least one keyboard listener.","JSXOpeningElement","jsx-a11y/no-static-element-interactions","Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.","Unable to resolve path to module '@styled-system/css/css'.","no-unused-vars","'black' is defined but never used.","unusedVar"]
+[{"/Users/eugene/github/wow-design-system/packages/wow-ui/src/components/Chip/Chip.stories.ts":"1","/Users/eugene/github/wow-design-system/packages/wow-ui/src/components/Chip/index.tsx":"2","/Users/eugene/github/wow-design-system/packages/wow-ui/src/types/button.ts":"3","/Users/eugene/github/wow-design-system/packages/wow-ui/src/types/index.ts":"4","/Users/eugene/github/wow-design-system/apps/wow-docs/app/page.tsx":"5","/Users/eugene/github/wow-design-system/packages/theme/src/color.ts":"6","/Users/eugene/github/wow-design-system/packages/wow-ui/src/types/Polymorphic.ts":"7","/Users/eugene/github/wow-design-system/packages/wow-icons/src/CloseButton.tsx":"8","/Users/eugene/github/wow-design-system/packages/wow-icons/src/index.ts":"9","/Users/eugene/github/wow-design-system/packages/wow-ui/src/components/Chip/closeButton.tsx":"10"},{"size":3423,"mtime":1716658675949,"results":"11","hashOfConfig":"12"},{"size":5796,"mtime":1716659204027,"results":"13","hashOfConfig":"12"},{"size":2014,"mtime":1716658340646,"results":"14","hashOfConfig":"12"},{"size":57,"mtime":1716631427241,"results":"15","hashOfConfig":"12"},{"size":370,"mtime":1716648638607,"results":"16","hashOfConfig":"12"},{"size":5061,"mtime":1716648586995,"results":"17","hashOfConfig":"12"},{"size":423,"mtime":1716631402622,"results":"18","hashOfConfig":"12"},{"size":328,"mtime":1716654901735,"results":"19","hashOfConfig":"12"},{"size":112,"mtime":1716654851710,"results":"20","hashOfConfig":"12"},{"size":349,"mtime":1716655646913,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","suppressedMessages":"24","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"8oyd96",{"filePath":"25","messages":"26","suppressedMessages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","suppressedMessages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","suppressedMessages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","suppressedMessages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"37","messages":"38","suppressedMessages":"39","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"40","messages":"41","suppressedMessages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","suppressedMessages":"45","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","suppressedMessages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","suppressedMessages":"51","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/eugene/github/wow-design-system/packages/wow-ui/src/components/Chip/Chip.stories.ts",["52"],["53"],"/Users/eugene/github/wow-design-system/packages/wow-ui/src/components/Chip/index.tsx",["54","55","56"],[],"/Users/eugene/github/wow-design-system/packages/wow-ui/src/types/button.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-ui/src/types/index.ts",[],[],"/Users/eugene/github/wow-design-system/apps/wow-docs/app/page.tsx",["57"],[],"/Users/eugene/github/wow-design-system/packages/theme/src/color.ts",["58"],[],"/Users/eugene/github/wow-design-system/packages/wow-ui/src/types/Polymorphic.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-icons/src/CloseButton.tsx",[],[],"/Users/eugene/github/wow-design-system/packages/wow-icons/src/index.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-ui/src/components/Chip/closeButton.tsx",[],[],{"ruleId":"59","severity":1,"message":"60","line":3,"column":18,"nodeType":"61","endLine":3,"endColumn":37},{"ruleId":"62","severity":2,"message":"63","line":143,"column":7,"nodeType":"64","messageId":"65","endLine":143,"endColumn":14,"suppressions":"66"},{"ruleId":"59","severity":1,"message":"67","line":2,"column":21,"nodeType":"61","endLine":2,"endColumn":41},{"ruleId":"59","severity":1,"message":"68","line":3,"column":24,"nodeType":"61","endLine":3,"endColumn":44},{"ruleId":"59","severity":1,"message":"69","line":7,"column":25,"nodeType":"61","endLine":7,"endColumn":56},{"ruleId":"59","severity":1,"message":"70","line":1,"column":21,"nodeType":"61","endLine":1,"endColumn":45},{"ruleId":"71","severity":1,"message":"72","line":4,"column":10,"nodeType":"64","messageId":"73","endLine":4,"endColumn":15},"import/no-unresolved","Unable to resolve path to module '@/components/Chip'.","Literal","no-undef","'console' is not defined.","Identifier","undef",["74"],"Unable to resolve path to module '@styled-system/css'.","Unable to resolve path to module '@styled-system/jsx'.","Unable to resolve path to module '@/components/Chip/closeButton'.","Unable to resolve path to module '@styled-system/css/css'.","no-unused-vars","'black' is defined but never used.","unusedVar",{"kind":"75","justification":"76"},"directive",""]
diff --git a/packages/wow-ui/src/components/Chip/Chip.stories.ts b/packages/wow-ui/src/components/Chip/Chip.stories.ts
@@ -124,23 +124,23 @@ export const Positive: Story = {
   args: {
     label: "Chip",
     variant: "positive",
+    clickable: false,
   },
 };
 
 export const Negative: Story = {
   args: {
     label: "Chip",
     variant: "negative",
+    clickable: false,
   },
 };
-
 export const CanDelete: Story = {
   args: {
     label: "Chip",
     variant: "default",
     onDelete: () => {
-      // eslint-disable-next-line no-undef
-      console.log("삭제합니다.");
+      alert("delete");
     },
   },
 };
diff --git a/packages/wow-ui/src/components/Chip/index.tsx b/packages/wow-ui/src/components/Chip/index.tsx
@@ -81,7 +81,7 @@ const Chip: ChipComponent = forwardRef(
     const [isActived, setIsActive] = useState(() =>
       isSelected ? isSelected : defaultSelected
     );
-    const closeButtonRef = useRef<HTMLDivElement>(null);
+    const closeButtonRef = useRef<HTMLButtonElement>(null);
 
     useEffect(() => {
       if (isSelected !== undefined) {
@@ -94,7 +94,7 @@ const Chip: ChipComponent = forwardRef(
       clickable ? setIsActive((prev) => !prev) : null;
     };
 
-    const handleDeleteButtonClick = (event: MouseEvent<HTMLDivElement>) => {
+    const handleDeleteButtonClick = (event: MouseEvent<HTMLButtonElement>) => {
       event.stopPropagation();
       onDelete?.();
     };
@@ -125,15 +125,15 @@ const Chip: ChipComponent = forwardRef(
       >
         <ChipLabel isActived={isActived} label={label} variant={variant} />
         {onDelete ? (
-          <div
+          <button
+            aria-label="chip delete button"
             ref={closeButtonRef}
-            role="button"
             tabIndex={0}
             onClick={handleDeleteButtonClick}
             onKeyDown={onDelete}
           >
             <CloseButton color={isActived ? "#ffffff" : "#8f8f8f"} size={14} />
-          </div>
+          </button>
         ) : null}
       </Component>
     );