fix: 스크린 리더가 snackbar를 읽도록 한다

woowacourse · Oct 10, 2022 · 3d5be27 · 3d5be27
1 parent 5cbc1ec
commit 3d5be27
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/SnackbarManager.js b/src/SnackbarManager.js
@@ -21,7 +21,6 @@ class SnackbarManager {
     this.#check();
     this.#element.classList.add('show');
     this.#element.textContent = message;
-    // this.#element.setAttribute('aria-live', 'assertive');
     this.#timer && clearTimeout(this.#timer);
     this.#timer = setTimeout(() => {
       this.hide();
@@ -30,8 +29,8 @@ class SnackbarManager {
 
   hide() {
     this.#check();
-    // this.#element.setAttribute('aria-live', 'off');
     this.#element.classList.remove('show');
+    this.#element.textContent = '';
   }
 }
 

diff --git a/src/main.js b/src/main.js
@@ -4,6 +4,9 @@ import './style/style.scss';
 import { $ } from './util';
 
 const MAX_RESERVABLE_ADULT_PASSENGER_COUNT = 3;
+const ERROR_MESSAGE = {
+  OVER_RESERVABLE_ADULT: '인원수는 0명에서 3명까지만 가능합니다',
+};
 
 document.addEventListener('DOMContentLoaded', () => {
   const $adultPassengerField = $('.adult-passenger-field');
@@ -28,13 +31,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
     const nextValue = value + step;
     if (nextValue < 0 || nextValue > 3) {
-      snackbarManager.show('인원수는 0명에서 3명까지만 가능합니다');
+      snackbarManager.show(ERROR_MESSAGE.OVER_RESERVABLE_ADULT);
       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 => {
@@ -52,20 +54,19 @@ document.addEventListener('DOMContentLoaded', () => {
       if (target.value < Number(min)) {
         isProperRange = false;
         target.value = min;
-        snackbarManager.show('인원수는 0명에서 3명까지만 가능합니다');
+        snackbarManager.show(ERROR_MESSAGE.OVER_RESERVABLE_ADULT);
       }
     }
     if (max !== null) {
       if (target.value > Number(max)) {
         isProperRange = false;
-        snackbarManager.show('인원수는 0명에서 3명까지만 가능합니다');
+        snackbarManager.show(ERROR_MESSAGE.OVER_RESERVABLE_ADULT);
         target.value = max;
       }
     }
 
     if (isProperRange) {
       $adultPassengerSpinAriaLiveMessage.textContent = `성인 승객 추가 ${target.value}`;
-      // $adultPassengerSpinAriaLiveMessage.setAttribute('aria-live', 'assertive');
     }
   });
 });