diff --git a/a11y/index.html b/a11y/index.html index 12fa3e7..1196860 100644 --- a/a11y/index.html +++ b/a11y/index.html @@ -1,16 +1,23 @@ - - - - - - - - Accessibility - - - -
- - - + + + + + + + Accessibility + + +
+ + diff --git a/a11y/src/App.tsx b/a11y/src/App.tsx index a8159f9..67e99a0 100644 --- a/a11y/src/App.tsx +++ b/a11y/src/App.tsx @@ -1,18 +1,18 @@ -import "./Typography.css"; -import "./App.css"; +import "./Typography.css" +import "./App.css" -import FlightBooking from "./components/FlightBooking"; +import FlightBooking from "./components/FlightBooking" function App() { return (
-
-
+
+
-
-
+ +
- ); + ) } -export default App; +export default App diff --git a/a11y/src/components/FlightBooking.css b/a11y/src/components/FlightBooking.css index d9d6083..b472fd0 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,10 @@ border-radius: 4px; cursor: pointer; } + +.visually-hidden { + padding: 8px 0; + color: #f00; + font-size: 14px; + text-align: right; +} diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..16bbb3a 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -1,19 +1,29 @@ -import { useState } from "react"; +import { useState } from "react" -import "./FlightBooking.css"; +import "./FlightBooking.css" -const MAX_PASSENGERS = 3; +const MAX_PASSENGERS = 3 +const MIN_PASSENGERS = 1 const FlightBooking = () => { - const [adultCount, setAdultCount] = useState(1); + const [adultCount, setAdultCount] = useState(1) + const [ariaLiveMessage, setAriaLiveMessage] = useState("") const incrementCount = () => { - setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); - }; + setAriaLiveMessage("") + if (adultCount === MAX_PASSENGERS) { + setAriaLiveMessage("최대 승객 수에 도달했습니다.") + } + setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)) + } const decrementCount = () => { - setAdultCount((prev) => Math.max(1, prev - 1)); - }; + setAriaLiveMessage("") + if (adultCount === MIN_PASSENGERS) { + setAriaLiveMessage("최소 1명의 승객이 필요합니다.") + } + setAdultCount((prev) => Math.max(1, prev - 1)) + } return (
@@ -21,18 +31,34 @@ const FlightBooking = () => {
성인
- - {adultCount} -
+ {ariaLiveMessage && ( +

+ {ariaLiveMessage} +

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