diff --git a/README.md b/README.md index 002f489..bbd23db 100644 --- a/README.md +++ b/README.md @@ -1 +1,30 @@ -# self-paced-enhance-usability \ No newline at end of file +# self-paced-enhance-usability + +## 사전 미션 목표 + +본 미션 진행 전에 접근성 개선 작업의 맛보기를 해보는 시간입니다. +어떤 작업들을 진행하면 어떻게 개선되는지를 간단하게 체험해 보세요. + +## 기능 요구사항 + +- [x] 스크린 리더로 성인 승객 수를 늘리거나 줄일 수 있어야 한다. + - [x] 인원 수는 최소 1명, 최대 3명까지만 가능하게 구현한다. +- [x] 승객 수를 늘리는 경우 실제 스크린 리더는 아래와 같이 읽을 수 있어야 한다. + +```js +const result = "" + +항공권 예매 +성인 +성인 승객 감소, 버튼 +1 +성인 승객 증가, 버튼 +(선택) +성인 승객 증가 +2 +(선택) +성인 승객 증가 +3 +(선택) +최대 승객 수에 도달했습니다. +``` diff --git a/a11y/index.html b/a11y/index.html index 12fa3e7..e525729 100644 --- a/a11y/index.html +++ b/a11y/index.html @@ -1,16 +1,14 @@ - - - - - - - - Accessibility - - - -
- - + + + + + + + Accessibility + + +
+ + diff --git a/a11y/src/App.tsx b/a11y/src/App.tsx index a8159f9..9ec8e7b 100644 --- a/a11y/src/App.tsx +++ b/a11y/src/App.tsx @@ -6,11 +6,11 @@ import FlightBooking from "./components/FlightBooking"; function App() { return (
-
-
+
+
-
-
+ +
); } diff --git a/a11y/src/components/FlightBooking.css b/a11y/src/components/FlightBooking.css index d9d6083..5235c41 100644 --- a/a11y/src/components/FlightBooking.css +++ b/a11y/src/components/FlightBooking.css @@ -34,7 +34,7 @@ width: 30px; height: 30px; border-radius: 16px; - border: 1px solid #C0C0C0; + border: 1px solid #c0c0c0; background-color: #fff; cursor: pointer; display: flex; @@ -61,3 +61,15 @@ border-radius: 4px; cursor: pointer; } + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..34a78bf 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -3,33 +3,84 @@ import { useState } from "react"; import "./FlightBooking.css"; const MAX_PASSENGERS = 3; +const MIN_PASSENGERS = 1; const FlightBooking = () => { const [adultCount, setAdultCount] = useState(1); + const [statusMessage, setStatusMessage] = useState(""); const incrementCount = () => { - setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); + setAdultCount((prev) => { + const next = Math.min(MAX_PASSENGERS, prev + 1); + if (next === MAX_PASSENGERS && prev !== MAX_PASSENGERS) { + setStatusMessage("최대 승객 수에 도달했습니다."); + } else { + setStatusMessage(""); + } + return next; + }); }; const decrementCount = () => { - setAdultCount((prev) => Math.max(1, prev - 1)); + setAdultCount((prev) => { + const next = Math.max(MIN_PASSENGERS, prev - 1); + if (next === MIN_PASSENGERS && prev !== MIN_PASSENGERS) { + setStatusMessage("최소 승객 수입니다."); + } else { + setStatusMessage(""); + } + return next; + }); }; return (

항공권 예매

-
- 성인 +
+ + 성인 +
- - {adultCount} -
+
+ {statusMessage} +
); diff --git a/a11y/vite.config.ts b/a11y/vite.config.ts index 9cc50ea..d8d4e6c 100644 --- a/a11y/vite.config.ts +++ b/a11y/vite.config.ts @@ -4,4 +4,7 @@ import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + server: { + host: "0.0.0.0", + }, });