Merge pull request #128 from Yangjaecheon-Otter-Guardians/feat/access…

…ibility refactor : 웹 접근성 개선
Yangjaecheon-Otter-Guardians · Apr 8, 2023 · 19585d3 · 19585d3
2 parents 764de4e + 8ea2f7d
commit 19585d3
Show file tree

Hide file tree

Showing 18 changed files with 1,720 additions and 279 deletions.
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -14,7 +14,7 @@ jobs:
       - name: Setup Node
         uses: actions/[email protected]
         with:
-          node-version: '12.x'
+          node-version: "12.x"
 
       - name: Cache dependencies
         uses: actions/cache@v2
@@ -23,7 +23,6 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
-
       - name: Install dependencies
         run: npm install
         working-directory: ${{ env.working-directory }}

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,10 +4,6 @@
   "homepage": "https://simple-thumbnail.com",
   "private": true,
   "dependencies": {
-    "@types/node": "^17.0.45",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@types/react-toastify": "^4.1.0",
     "axios": "^1.3.4",
     "downloadjs": "^1.4.7",
     "heic2any": "^0.0.3",
@@ -18,7 +14,6 @@
     "react-helmet-async": "^1.3.0",
     "react-icons": "^4.7.1",
     "react-redux": "^8.0.5",
-    "react-scripts": "5.0.1",
     "react-toastify": "^9.1.1",
     "recoil": "^0.7.6"
   },
@@ -49,7 +44,11 @@
   "devDependencies": {
     "@iconify/react": "^4.1.0",
     "@types/downloadjs": "^1.4.3",
+    "@types/node": "^17.0.45",
+    "@types/react": "^18.0.28",
     "@types/react-color": "^3.0.6",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-toastify": "^4.1.0",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
     "eslint": "^8.34.0",
@@ -62,6 +61,7 @@
     "eslint-plugin-react": "^7.32.2",
     "gh-pages": "^5.0.0",
     "prettier": "^2.8.4",
+    "react-scripts": "^5.0.1",
     "tailwindcss": "^3.2.7",
     "typescript": "^4.9.5"
   }

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
     <title>심플 썸네일</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.0" />
     <meta name="theme-color" content="#ffffff" />
     <meta name="description" content="3초만에 만드는 나만의 썸네일." />
     <meta name="keywords" content="썸네일, 블로그, 유튜브, 간단" />

diff --git a/frontend/src/atom/textAtom.ts b/frontend/src/atom/textAtom.ts
@@ -11,7 +11,6 @@ export type TextSizeType =
   | 'tablet:text-[34px] text-[21px]'
   | 'tablet:text-[26px] text-[16px]'
   | 'tablet:text-[22px] text-[14px]';
-
 export type TextType = {
   id: number;
   content: string;

diff --git a/frontend/src/components/ColorGradation.tsx b/frontend/src/components/ColorGradation.tsx
@@ -4,13 +4,13 @@ import { previewGradation } from 'atom';
 import { Icon } from '@iconify/react';
 
 export const gradationColorArray = [
-  { color: 'linear-gradient(134.01deg, #FFD9D9 9.35%, #FF2B2B 100%)' },
-  { color: 'linear-gradient(135deg, #87FAA9 0.01%, #BB86DD 100%)' },
-  { color: 'linear-gradient(137.82deg, #F8E92D 4.46%, #33E6F8 100%)' },
-  { color: 'linear-gradient(132.18deg, #FC941F 0%, #7836F8 95.54%)' },
-  { color: 'linear-gradient(135deg, #7EFBFE 0%, #2C2EDE 100%)' },
-  { color: 'linear-gradient(135deg, #FF79D1 0%, #FFCE33 100%)' },
-  { color: 'linear-gradient(135deg, #3FFA4B 0%, #453EF7 100%)' },
+  { color: 'linear-gradient(134.01deg, #FFD9D9 9.35%, #FF2B2B 100%)', label: '빨강-핑크-그라데이션' },
+  { color: 'linear-gradient(135deg, #87FAA9 0.01%, #BB86DD 100%)', label: '초록-보라-그라데이션' },
+  { color: 'linear-gradient(137.82deg, #F8E92D 4.46%, #33E6F8 100%)', label: '노랑-하늘-그라데이션' },
+  { color: 'linear-gradient(132.18deg, #FC941F 0%, #7836F8 95.54%)', label: '주황-보라-그라데이션' },
+  { color: 'linear-gradient(135deg, #7EFBFE 0%, #2C2EDE 100%)', label: '하늘-파랑-그라데이션' },
+  { color: 'linear-gradient(135deg, #FF79D1 0%, #FFCE33 100%)', label: '핑크-노랑-그라데이션' },
+  { color: 'linear-gradient(135deg, #3FFA4B 0%, #453EF7 100%)', label: '초록-파랑-그라데이션' },
 ];
 
 export const ColorGradation = () => {
@@ -38,22 +38,25 @@ export const ColorGradation = () => {
 
   return (
     <div className="flex justify-between tablet:justify-start " style={{ gap: '12px' }}>
-      {gradationColorArray.map((gradation, idx) => (
+      {gradationColorArray.map((gradation) => (
         <button
-          key={idx}
+          key={gradation.color}
           value={gradation.color}
           className={`flex justify-center items-center rounded border w-8 h-8 tablet:w-[48px] tablet:h-[48px]`}
           style={{ background: `${gradation.color}` }}
           onClick={(e) => onClick(e)}
+          aria-label={gradation.label}
         >
           {currentGradation.color === gradation.color && !currentGradation.isRandom && (
             <BsCheck className={'tablet:text-[32px]'} style={{ color: 'black' }} />
           )}
         </button>
       ))}
       <button
+        type="button"
         className="w-8 h-8 rounded border-2 flex justify-center items-center  tablet:w-[48px] tablet:h-[48px]"
         onClick={generateRandom}
+        aria-label="랜덤-그라데이션"
       >
         <Icon icon="vaadin:random" vFlip={true} />
       </button>

diff --git a/frontend/src/components/ColorSingle.tsx b/frontend/src/components/ColorSingle.tsx
@@ -6,13 +6,13 @@ import { IoMdClose } from 'react-icons/io';
 import { BsCheck } from 'react-icons/bs';
 
 export const singleColorArray = [
-  { hex: '#ff3737', name: 'bg-backRed' },
-  { hex: '#ff9549', name: 'bg-backOrange' },
-  { hex: '#ffe03c', name: 'bg-backYellow' },
-  { hex: '#4fcf00', name: 'bg-backGreen' },
-  { hex: '#30cdff', name: 'bg-backBlue' },
-  { hex: '#0E0E0E', name: 'bg-primary-100' },
-  { hex: '#ffffff', name: 'bg-bakcWhite' },
+  { hex: '#ff3737', name: 'bg-backRed', label: '빨강' },
+  { hex: '#ff9549', name: 'bg-backOrange', label: '주황' },
+  { hex: '#ffe03c', name: 'bg-backYellow', label: '노랑' },
+  { hex: '#4fcf00', name: 'bg-backGreen', label: '초록' },
+  { hex: '#30cdff', name: 'bg-backBlue', label: '하늘' },
+  { hex: '#0E0E0E', name: 'bg-primary-100', label: '검정' },
+  { hex: '#ffffff', name: 'bg-bakcWhite', label: '하양' },
 ];
 
 const ColorSingle = () => {
@@ -39,12 +39,13 @@ const ColorSingle = () => {
       {singleColorArray.map((color, idx) => (
         <button
           id={String(idx)}
-          key={idx}
+          key={color.hex}
           value={color.hex}
           onClick={(e) => onClick(e)}
           className={`flex justify-center items-center rounded border w-8 h-8 tablet:w-[48px] tablet:h-[48px] ${
             color.name
           } ${currentColor.color === color.hex && 'border'}`}
+          aria-label={color.label}
         >
           {currentColor.color === color.hex && !currentColor.isPicker && (
             <BsCheck className={'tablet:text-[32px]'} style={{ color: idx === 5 ? 'white' : 'black' }} />
@@ -56,6 +57,7 @@ const ColorSingle = () => {
           <button
             className="w-8 h-8 rounded border flex justify-center items-center tablet:w-[48px] tablet:h-[48px] bg-white"
             onClick={pop}
+            aria-label="컬러픽커"
           >
             <IoMdClose className={'tablet:text-[32px]'} style={{ color: 'black' }} />
           </button>

diff --git a/frontend/src/components/ColorUploader.tsx b/frontend/src/components/ColorUploader.tsx
@@ -13,13 +13,15 @@ const ColorUploader = () => {
     <div>
       <div className="flex text-sm font-medium">
         <button
+          type="button"
           className={`text-sm ${tab === '1' ? 'text-darken' : 'text-muted'}`}
           value="1"
           onClick={(e) => tabChanger(e)}
         >
           단색 배경
         </button>
         <button
+          type="button"
           className={`text-sm ml-3 ${tab === '2' ? 'text-darken' : 'text-muted'}`}
           value="2"
           onClick={(e) => tabChanger(e)}

diff --git a/frontend/src/components/DownloadButton.tsx b/frontend/src/components/DownloadButton.tsx
@@ -23,8 +23,10 @@ function DownloadButton({ previewRef }: Props) {
   return (
     <>
       <button
+        type="button"
         className="bg-primary-100 text-lighten text-md2 px-[20px] py-[10px] rounded-[100px] w-full flex flex-row justify-center gap-[5px] items-center mt-24 mb-16"
         onClick={handleClick}
+        aria-label="이미지-다운로드"
       >
         {isLoad ? <Loading /> : null}
         이미지 다운로드

diff --git a/frontend/src/components/ImageUploader.tsx b/frontend/src/components/ImageUploader.tsx
@@ -1,7 +1,6 @@
 import { Icon } from '@iconify/react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { isImageBright, previewImage } from '../atom';
-import heic2jpeg from 'heic2any';
 import heic2any from 'heic2any';
 
 const ImageUploader = () => {

diff --git a/frontend/src/components/Loading.tsx b/frontend/src/components/Loading.tsx
@@ -3,7 +3,7 @@ import LoadingSpin from '../assets/loading_reverse.png';
 const Loading = () => {
   return (
     <>
-      <img src={LoadingSpin} alt="Loading.." className="animate-spinner w-[16px]" />
+      <img src={LoadingSpin} alt="로딩중" className="animate-spinner w-[16px]" />
     </>
   );
 };

diff --git a/frontend/src/components/text/TextItem.tsx b/frontend/src/components/text/TextItem.tsx
@@ -83,6 +83,7 @@ const TextItem = ({ id, texts, setTexts, colors, setColors }: TextItemProps) =>
       <div className={styles.buttonGroup}>
         <div className={styles.buttonGroup}>
           <button
+            type="button"
             className={colors[id] === TEXT_WHITE ? styles.selectedColorButton : styles.colorButton}
             style={{ background: getRGB(TEXT_WHITE) }}
             onClick={() => {
@@ -91,10 +92,12 @@ const TextItem = ({ id, texts, setTexts, colors, setColors }: TextItemProps) =>
               setColorModal(false);
               handleColorChange(TEXT_WHITE);
             }}
+            aria-label="하양"
           >
             <BsCheck className={'tablet:text-[32px]'} />
           </button>
           <button
+            type="button"
             className={colors[id] === TEXT_BLACK ? styles.selectedColorButton : styles.colorButton}
             style={{ background: getRGB(TEXT_BLACK) }}
             onClick={() => {
@@ -103,11 +106,13 @@ const TextItem = ({ id, texts, setTexts, colors, setColors }: TextItemProps) =>
               setColorModal(false);
               handleColorChange(TEXT_BLACK);
             }}
+            aria-label="검정"
           >
             <BsCheck className={'tablet:text-[32px]'} style={{ color: 'white' }} />
           </button>
           <span style={{ position: 'relative' }}>
             <button
+              type="button"
               className={
                 colors[id] !== TEXT_BLACK && colors[id] !== TEXT_WHITE ? styles.selectedColorButton : styles.colorButton
               }
@@ -120,6 +125,7 @@ const TextItem = ({ id, texts, setTexts, colors, setColors }: TextItemProps) =>
                 setColors([...colors]);
                 setColorModal(!colorModal);
               }}
+              aria-label="컬러픽커"
             >
               {!colorModal ? (
                 <>
@@ -153,29 +159,35 @@ const TextItem = ({ id, texts, setTexts, colors, setColors }: TextItemProps) =>
         </div>
         <div className={styles.buttonGroup}>
           <button
+            type="button"
             className={contents.fontSize === TEXT_LG ? styles.selectedSizeButton : styles.sizeButton}
             style={{ fontSize: '20px' }}
             onClick={() => {
               handleSizeChange(TEXT_LG);
             }}
+            aria-label="글자크기-크게"
           >
             <FaFont />
           </button>
           <button
+            type="button"
             className={contents.fontSize === TEXT_MD ? styles.selectedSizeButton : styles.sizeButton}
             style={{ fontSize: '16px' }}
             onClick={() => {
               handleSizeChange(TEXT_MD);
             }}
+            aria-label="글자크기-중간"
           >
             <FaFont />
           </button>
           <button
+            type="button"
             className={contents.fontSize === TEXT_SM ? styles.selectedSizeButton : styles.sizeButton}
             style={{ fontSize: '12px' }}
             onClick={() => {
               handleSizeChange(TEXT_SM);
             }}
+            aria-label="글자크기-작게"
           >
             <FaFont />
           </button>

diff --git a/frontend/src/components/text/TextLayoutGroup.tsx b/frontend/src/components/text/TextLayoutGroup.tsx
@@ -16,15 +16,16 @@ const TextLayoutGroup = () => {
 
   return (
     <div className={styles.layoutButtonGroup}>
-      {getLayoutGroupList(count).map((item, index) => {
+      {getLayoutGroupList(count).map((item) => {
         return (
           <button
-            key={index}
+            key={item}
             className={`${layoutType !== item ? styles.commonStyle : styles.selectedStyle} ${layoutHandler(item)}`}
             onClick={() => {
               setLayoutType(item);
               setLayoutPosition(getLayoutTailwind(item));
             }}
+            aria-label={item}
           >
             <p className={styles.greyBar} />
             {count > 1 && (

diff --git a/frontend/src/sections/BackgroundTool.tsx b/frontend/src/sections/BackgroundTool.tsx
@@ -15,6 +15,7 @@ function BackgroundTool() {
       <div className="font-bold py-3">배경</div>
       <div className="w-full flex gap-[9px] justify-between text-sm">
         <button
+          type="button"
           className={`grow h-[36px] rounded-[50px] ${tab === '1' ? 'bg-primary-100' : 'bg-on-surface'} ${
             tab === '1' ? 'text-lighten' : 'text-darken'
           }`}
@@ -24,6 +25,7 @@ function BackgroundTool() {
           색상 배경
         </button>
         <button
+          type="button"
           className={`h-[36px] grow rounded-[50px] ${tab === '2' ? 'bg-primary-100' : 'bg-on-surface'} ${
             tab === '2' ? 'text-lighten' : 'text-darken'
           }`}
@@ -33,6 +35,7 @@ function BackgroundTool() {
           랜덤 이미지
         </button>
         <button
+          type="button"
           className={`font-SUIT grow h-[36px] rounded-[50px] ${tab === '3' ? 'bg-primary-100' : 'bg-on-surface'} ${
             tab === '3' ? 'text-lighten' : 'text-darken'
           }`}

diff --git a/frontend/src/sections/Footer.tsx b/frontend/src/sections/Footer.tsx
@@ -9,7 +9,7 @@ function Footer() {
         <span>© 2023 Simple Thumbnail all rights reserved.</span>
         <a href="https://github.com/Yangjaecheon-Otter-Guardians/simple-thumbnail" target="_blank">
           <div className="flex-center gap-1 font-bold">
-            <img src={github} alt="github icon" width="16rem" />
+            <img src={github} alt="깃허브" width="16rem" />
             <span>simple-thumbnail</span>
           </div>
         </a>

diff --git a/frontend/src/sections/Header.tsx b/frontend/src/sections/Header.tsx
@@ -15,10 +15,14 @@ function Header() {
       className="w-full flex-center bg-surface py-[12px]"
     >
       <div className="w-full px-5 flex flex-row justify-between align-items-center tablet:w-[768px] tablet:px-10">
-        <button className="w-[100px] text-left disabled:opacity-50 hover:font-bold" onClick={handleInitial}>
+        <button
+          type="button"
+          className="w-[100px] text-left disabled:opacity-50 hover:font-bold"
+          onClick={handleInitial}
+        >
           초기화
         </button>
-        <TEXT_LOGO style={{ height: '24px' }} />
+        <TEXT_LOGO role="img" style={{ height: '24px' }} />
         <div className="w-[100px]" />
       </div>
     </div>

diff --git a/frontend/src/sections/TextTool.tsx b/frontend/src/sections/TextTool.tsx
@@ -22,6 +22,7 @@ function TextTool() {
     return textCount.map((item, index) => {
       return (
         <button
+          type="button"
           key={index}
           className={count !== index ? styles.countButton : styles.selectedCountButton}
           onClick={() => setCount(index)}

diff --git a/frontend/src/styles/TextTool.module.css b/frontend/src/styles/TextTool.module.css
@@ -50,14 +50,14 @@
   height: 36px;
   flex-grow: 1;
   border-radius: 50px;
-  background-color: var(--bg-on-surface);
-  color: var(--text-active);
+  background-color: var(--bg-on-surface) !important;
+  color: var(--text-active) !important;
   margin-bottom: 16px;
   font-size: 0.875rem;
 }
 .selectedCountButton {
-  background-color: var(--bg-input-border-focus);
-  color: var(--text-lighten);
+  background-color: var(--bg-input-border-focus) !important;
+  color: var(--text-lighten) !important;
 }
 .commonStyle,
 .selectedStyle {