feat: 숫자가 바뀔때 스크린 리더가 숫자를 읽도록 설정

woowacourse · Oct 6, 2022 · 16fde3a · 16fde3a
1 parent aec709f
commit 16fde3a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/src/index.html b/src/index.html
@@ -32,6 +32,7 @@ <h2>승객 선택</h2>
             value="0"
           ></input>
           <button type="button" class="spin-button" data-step="1" aria-label="성인 탑승자 한 명 늘리기">+</button>
+          <div class="aria-hidden spin-input-aria-live-message"></div>
         </div>
       </div>
     </div>

diff --git a/src/main.js b/src/main.js
@@ -13,6 +13,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const snackbarManager = new SnackbarManager();
   const $adultPassengerSpin = $('.adult-passenger-spin', $adultPassengerField);
   const $adultPassengerSpinInput = $('input', $adultPassengerSpin);
+  const $adultPassengerSpinAriaLiveMessage = $('.spin-input-aria-live-message', $adultPassengerSpin);
 
   $adultPassengerSpin.addEventListener('click', e => {
     if (!e.target) return;
@@ -30,6 +31,8 @@ document.addEventListener('DOMContentLoaded', () => {
       return;
     }
     $adultPassengerSpinInput.value = Math.max(0, Math.min(MAX_RESERVABLE_ADULT_PASSENGER_COUNT, nextValue));
+    $adultPassengerSpinAriaLiveMessage.textContent = `성인 승객 추가 ${$adultPassengerSpinInput.value}`;
+    $adultPassengerSpinAriaLiveMessage.setAttribute('aria-live', 'assertive');
   });
 
   $adultPassengerSpinInput.addEventListener('input', e => {
@@ -39,19 +42,28 @@ document.addEventListener('DOMContentLoaded', () => {
 
     target.value = Number(target.value.replace(/[^0-9]/g, ''));
 
+    let isProperRange = true;
+
     const min = target.getAttribute('min');
     const max = target.getAttribute('max');
     if (min !== null) {
       if (target.value < Number(min)) {
+        isPropertRange = false;
         target.value = min;
         snackbarManager.show('인원수는 0명에서 3명까지만 가능합니다');
       }
     }
     if (max !== null) {
       if (target.value > Number(max)) {
+        isPropertRange = false;
         snackbarManager.show('인원수는 0명에서 3명까지만 가능합니다');
         target.value = max;
       }
     }
+
+    if (isProperRange) {
+      $adultPassengerSpinAriaLiveMessage.textContent = `성인 승객 추가 ${target.value}`;
+      $adultPassengerSpinAriaLiveMessage.setAttribute('aria-live', 'assertive');
+    }
   });
 });
diff --git a/src/style/style.scss b/src/style/style.scss
@@ -22,6 +22,17 @@ input[type='number'] {
   display: none;
 }
 
+.aria-hidden {
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(0 0 99.9% 99.9%);
+  overflow: hidden;
+  height: 1px;
+  width: 1px;
+  padding: 0;
+  margin: 0;
+}
+
 #page {
   display: flex;
   align-items: center;