♿️ 메인, 교수진, 연구실 접근성 개선 (#287)

wafflestudio · Dec 10, 2024 · 6ef8fec · 6ef8fec
1 parent ca4fe93
commit 6ef8fec
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 22 deletions.
diff --git a/app/[locale]/components/NewsCarousel.tsx b/app/[locale]/components/NewsCarousel.tsx
@@ -59,29 +59,31 @@ const PageIndicator = ({
   stopScroll: () => void;
 }) => {
   return (
-    <div className="relative flex gap-[0.63rem]">
+    <div className="relative flex">
       {[...Array(pageCnt).keys()].map((idx) => (
-        <button key={idx} onClick={() => setPage(idx)}>
-          <CapsuleIcon current={page === idx} />
+        <button
+          key={idx}
+          onClick={() => setPage(idx)}
+          aria-label={`${idx + 1}번째 페이지로 이동`}
+          className="flex h-[1.5rem] items-center justify-center duration-700 "
+          style={{ width: page === idx ? '3.5rem' : '1.5rem' }}
+        >
+          <div
+            className="mx-2 h-2 w-full rounded-full"
+            style={{ backgroundColor: page === idx ? '#E65615' : '#D4D4D4' }}
+          />
         </button>
       ))}
-      <button onClick={isScroll ? stopScroll : startScroll}>
+      <button
+        onClick={isScroll ? stopScroll : startScroll}
+        aria-label={isScroll ? '자동 스크롤 중지' : '자동 스크롤 시작'}
+      >
         {isScroll ? <PauseIcon /> : <PlayIcon />}
       </button>
     </div>
   );
 };
 
-const CapsuleIcon = ({ current }: { current: boolean }) => (
-  <div
-    className="h-2 rounded-full transition-all duration-700"
-    style={{
-      width: current ? '2.5rem' : '0.5rem',
-      backgroundColor: current ? '#E65615' : '#D4D4D4',
-    }}
-  />
-);
-
 const PauseIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none">
     <mask

diff --git a/app/[locale]/people/components/PeopleCell.tsx b/app/[locale]/people/components/PeopleCell.tsx
@@ -26,6 +26,7 @@ export default function PeopleCell({
         href={href}
         className="relative h-48 w-36 shrink-0 cursor-pointer overflow-hidden "
         style={{ filter: 'drop-shadow(0px 0px 4px rgba(0,0,0,0.15))' }}
+        aria-label={`${title} 교수 상세 페이지로 이동`}
       >
         <ImageWithFallback
           src={imageURL}

diff --git a/app/[locale]/research/labs/ResearchLabListHeader.tsx b/app/[locale]/research/labs/ResearchLabListHeader.tsx
@@ -8,13 +8,13 @@ export default function ResearchLabListHeader() {
   const t = useTranslations('Content');
 
   return (
-    <h5 className="hidden h-10 items-center gap-2 whitespace-nowrap bg-neutral-100 px-2 text-sm font-medium tracking-[0.02em] sm:flex">
+    <h4 className="hidden h-10 items-center gap-2 whitespace-nowrap bg-neutral-100 px-2 text-sm font-medium tracking-[0.02em] sm:flex">
       <span className={LAB_ROW_ITEM_WIDTH.name}>{t('연구실')}</span>
       <span className={LAB_ROW_ITEM_WIDTH.professor}>{t('지도교수')}</span>
       <span className={LAB_ROW_ITEM_WIDTH.location}>{t('연구실 위치')}</span>
       <span className={LAB_ROW_ITEM_WIDTH.tel}>{t('전화')}</span>
       <span className={LAB_ROW_ITEM_WIDTH.acronym}>{t('약자')}</span>
       <span className={LAB_ROW_ITEM_WIDTH.introMaterial}>{t('소개 자료')}</span>
-    </h5>
+    </h4>
   );
 }
diff --git a/components/layout/footer/Footer.tsx b/components/layout/footer/Footer.tsx
@@ -124,13 +124,13 @@ function FooterBottomLeft() {
 function FooterBottomRight() {
   return (
     <div className="mt-7 flex flex-wrap gap-7 sm:mt-0 sm:flex-nowrap sm:items-center">
-      <Link href={snucomLink}>
+      <Link href={snucomLink} aria-label="서울대 컴퓨터공학 동문회 홈페이지로 이동">
         <SnucomIcon />
       </Link>
-      <Link href={snuEngLink}>
+      <Link href={snuEngLink} aria-label="서울대 공과대학 홈페이지로 이동">
         <SnuEngineeringIcon />
       </Link>
-      <Link href={snuLink}>
+      <Link href={snuLink} aria-label="서울대 홈페이지로 이동">
         <SnuLogoWithText />
       </Link>
     </div>

diff --git a/components/layout/header/Header.tsx b/components/layout/header/Header.tsx
@@ -29,7 +29,7 @@ export default function Header() {
 
 function HeaderLeft() {
   return (
-    <Link href="/" className="cursor-pointer">
+    <Link href="/" className="cursor-pointer" aria-label="메인으로 이동">
       {/* mobile */}
       <HeaderLogoSVG className="hidden sm:block" />
 

diff --git a/components/layout/header/HeaderSearchBar.tsx b/components/layout/header/HeaderSearchBar.tsx
@@ -17,13 +17,14 @@ export default function HeaderSearchBar() {
       }}
     >
       <input
+        aria-label="통합검색"
         type="text"
         id="search"
         className="autofill-bg-neutral-200 w-full bg-transparent px-2 text-xs outline-none"
         value={text}
         onChange={(e) => setText(e.target.value)}
       />
-      <button className="material-symbols-rounded text-[1.25rem] text-neutral-800 hover:text-neutral-500">
+      <button className="material-symbols-rounded w-8 text-[1.25rem] text-neutral-800 hover:text-neutral-500">
         search
       </button>
     </form>

diff --git a/components/layout/navbar/NavbarRoot.tsx b/components/layout/navbar/NavbarRoot.tsx
@@ -23,7 +23,7 @@ export default function NavbarRoot() {
       onMouseEnter={() => setNavbarState({ type: 'expanded' })}
       style={{ width: `${width}rem` }}
     >
-      <Link href="/">
+      <Link href="/" aria-label="메인으로 이동">
         <SnuLogo className="fill-white" width="56" height="58" viewBox="0 0 45 47" />
       </Link>
 

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url';
 
 import { includeIgnoreFile } from '@eslint/compat';
 import pluginJs from '@eslint/js';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
 import pluginReact from 'eslint-plugin-react';
 import pluginReactHooks from 'eslint-plugin-react-hooks';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
@@ -65,4 +66,13 @@ export default [
       'unused-imports/no-unused-imports': 'error',
     },
   },
+  jsxA11y.flatConfigs.recommended,
+  {
+    rules: {
+      'jsx-a11y/label-has-associated-control': 'warn',
+      'jsx-a11y/click-events-have-key-events': 'warn',
+      'jsx-a11y/no-static-element-interactions': 'warn',
+      'jsx-a11y/no-noninteractive-element-interactions': 'warn',
+    },
+  },
 ];
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "@types/express": "^4.17.21",
     "@types/node": "^22.10.1",
     "eslint": "^9.15.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",