Merge pull request #477 from js43o/mogaco-list

[Refactor] 모각코 리스트 페이지 스크린 리더 & 키보드 접근성 개선
boostcampwm2023 · Dec 13, 2023 · 5380f20 · 5380f20
2 parents 9f4dcdd + eeb0953
commit 5380f20
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 64 deletions.
diff --git a/app/frontend/src/components/MogacoItem/index.tsx b/app/frontend/src/components/MogacoItem/index.tsx
@@ -36,25 +36,32 @@ export function MogacoItem({
   );
 
   return (
-    <NavLink to={`/mogaco/${id}`} className={styles.container}>
+    <NavLink
+      to={`/mogaco/${id}`}
+      className={styles.container}
+      aria-label={`${title}, ${status}`}
+    >
       <div className={styles.titleArea}>
         {MogacoLabel}
-        <div className={styles.title}>{title}</div>
+        <h2 className={styles.title}>{title}</h2>
       </div>
-      <div className={styles.group}>{groupTitle}</div>
+      <span className={styles.group}>{groupTitle}</span>
       <div className={styles.content}>
-        <div className={styles.detail}>{contents}</div>
+        <p className={styles.detail}>{contents}</p>
         <div className={styles.info}>
-          <div className={styles.infoContent}>
+          <address className={styles.infoContent}>
             <Map className={styles.icon} width={20} height={20} />
-            <div className={styles.infoText}>{address}</div>
-          </div>
-          <div className={styles.infoContent}>
+            <span className={styles.infoText}>{address}</span>
+          </address>
+          <time
+            className={styles.infoContent}
+            dateTime={dayjs(date).format('YYYY-MM-DD HH:MM')}
+          >
             <Calendar className={styles.icon} width={20} height={20} />
-            <div className={styles.infoText}>
-              {dayjs(date).format('YYYY/MM/DD HH:mm~')}
-            </div>
-          </div>
+            <span className={styles.infoText}>
+              {dayjs(date).format('YYYY-MM-DD HH:mm~')}
+            </span>
+          </time>
         </div>
       </div>
     </NavLink>

diff --git a/app/frontend/src/pages/Mogaco/MogacoList.tsx b/app/frontend/src/pages/Mogaco/MogacoList.tsx
@@ -49,25 +49,26 @@ export function MogacoList({ currentPage }: MogacoListProp) {
   }
 
   return (
-    <main className={styles.container}>
+    <ul className={styles.container}>
       {mogacoList && mogacoList.length > 0 ? (
         mogacoList.map(
           ({ id, title, contents, date, address, status, group }) => (
-            <MogacoItem
-              key={id}
-              id={id}
-              group={group}
-              title={title}
-              contents={contents}
-              date={date}
-              address={address}
-              status={status}
-            />
+            <li key={id}>
+              <MogacoItem
+                id={id}
+                group={group}
+                title={title}
+                contents={contents}
+                date={date}
+                address={address}
+                status={status}
+              />
+            </li>
           ),
         )
       ) : (
         <EmptyPage />
       )}
-    </main>
+    </ul>
   );
 }
diff --git a/app/frontend/src/pages/Mogaco/index.tsx b/app/frontend/src/pages/Mogaco/index.tsx
@@ -21,7 +21,7 @@ export function MogacoPage() {
   const maxPage = Math.floor((allMogacoList?.length || 0) / PAGE_UNIT + 1);
 
   return (
-    <div className={styles.container}>
+    <main className={styles.container}>
       <MogacoListHeader />
       <MogacoList currentPage={currentPage} />
       {mogacoList?.length !== 0 && (
@@ -34,6 +34,6 @@ export function MogacoPage() {
           onClickPrev={onClickPrev}
         />
       )}
-    </div>
+    </main>
   );
 }
diff --git a/app/frontend/src/pages/MogacoDetail/DetailInfo.tsx b/app/frontend/src/pages/MogacoDetail/DetailInfo.tsx
@@ -76,14 +76,17 @@ export function DetailInfo({ id, latitude, longitude }: DetailInfoProps) {
           />
         ))}
       </div>
-      <div className={styles.infoItem}>
+      <time
+        className={styles.infoItem}
+        dateTime={dayjs(mogacoData.date).format('YYYY-MM-DD HH:MM')}
+      >
         <Calendar width={24} height={24} fill={vars.color.grayscale200} />
-        <span>{dayjs(mogacoData.date).format('YYYY/MM/DD HH:mm~')}</span>
-      </div>
-      <div className={styles.infoItem}>
+        <span>{dayjs(mogacoData.date).format('YYYY-MM-DD HH:MM~')}</span>
+      </time>
+      <address className={styles.infoItem}>
         <Map width={24} height={24} fill={vars.color.grayscale200} />
         <span>{mogacoData.address}</span>
-      </div>
+      </address>
       <img
         className={styles.map}
         src={staticMapURL}

diff --git a/packages/morak-ui/src/components/Pagination/index.tsx b/packages/morak-ui/src/components/Pagination/index.tsx
@@ -24,43 +24,52 @@ export function Pagination({
 }: PaginationProps) {
   const [start, end] = get10UnitRange(currentPage);
   const lastPageNum = pageCount ? Math.min(end, pageCount) : end;
-  const array = createRangeArray(start, lastPageNum);
+  const pageNumbers = createRangeArray(start, lastPageNum);
   const arrow = <Arrow width={16} height={16} fill={grayscale200} />;
   const isFirstPage = currentPage === 1;
   const isLastPage = currentPage === lastPageNum;
 
   return (
-    <div className={`${styles.container} ${className}`}>
-      <button
-        type="button"
-        onClick={onClickPrev}
-        disabled={isFirstPage}
-        aria-label="prev-page"
-      >
-        {arrow}
-      </button>
-      {array.map((page) => (
-        <button
-          onClick={onClickItem}
-          className={`${styles.page} ${
-            currentPage === page ? styles.current : ''
-          }`}
-          type="button"
-          key={page}
-          value={page}
-        >
-          {page}
-        </button>
-      ))}
-      <button
-        type="button"
-        className={styles.rotateArrow}
-        onClick={onClickNext}
-        disabled={isLastPage}
-        aria-label="next-page"
-      >
-        {arrow}
-      </button>
-    </div>
+    <nav role="navigation" aria-label="페이지 선택">
+      <ul className={`${styles.container} ${className}`}>
+        <li>
+          <button
+            type="button"
+            onClick={onClickPrev}
+            disabled={isFirstPage}
+            aria-label="이전 페이지"
+          >
+            {arrow}
+          </button>
+        </li>
+        {pageNumbers.map((page: number) => (
+          <li key={page}>
+            <button
+              onClick={onClickItem}
+              className={`${styles.page} ${
+                currentPage === page ? styles.current : ''
+              }`}
+              type="button"
+              value={page}
+              aria-current={currentPage === page}
+              aria-label={`${page} 페이지`}
+            >
+              {page}
+            </button>
+          </li>
+        ))}
+        <li>
+          <button
+            type="button"
+            className={styles.rotateArrow}
+            onClick={onClickNext}
+            disabled={isLastPage}
+            aria-label="다음 페이지"
+          >
+            {arrow}
+          </button>
+        </li>
+      </ul>
+    </nav>
   );
 }