feat: aria-live를 통일한다

woowacourse · Oct 10, 2022 · 54a0b1e · 54a0b1e
1 parent 55d1a96
commit 54a0b1e
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 21 deletions.
diff --git a/src/HelptipManager.js b/src/HelptipManager.js
@@ -5,7 +5,8 @@ class HelptipManager {
   #helptipCloser = null;
   #helptipElement = null;
   #helptipContent = null;
-  #helptipContentAria = null;
+  #onShowHandler = null;
+  #onHideHandler = null;
 
   constructor(containerSelector = '.helptip-container', $parent = document) {
     const $container = $(containerSelector, $parent);
@@ -14,13 +15,13 @@ class HelptipManager {
     this.#helptipCloser = $('.helptip-closer', $container);
     this.#helptipElement = $('.helptip', $container);
     this.#helptipContent = $('.helptip > .helptip-content', $container);
-    this.#helptipContentAria = $('.helptip span[aria-live="polite"]', $container);
-    console.log('this.#helptipContentAria', this.#helptipContentAria);
     this.#check();
   }
 
-  start() {
+  start(onShow = null, onHide = null) {
     this.#check();
+    this.#onShowHandler = onShow;
+    this.#onHideHandler = onHide;
     window.addEventListener('click', this.#clickOutsideHandler);
     this.#helptipTrigger.addEventListener('click', this.#eventHandler);
     this.#helptipCloser.addEventListener('click', this.#eventHandler);
@@ -54,22 +55,21 @@ class HelptipManager {
   #show() {
     this.#check();
     this.#helptipElement.classList.add('show');
-    this.#helptipContentAria.textContent = this.#helptipContent.textContent;
+    this.#onShowHandler && this.#onShowHandler();
   }
 
   #hide() {
     this.#check();
     this.#helptipElement.classList.remove('show');
-    this.#helptipContentAria.textContent = '';
+    this.#onHideHandler && this.#onHideHandler();
   }
 
   #check() {
     if (
       this.#helptipElement === null ||
       this.#helptipTrigger === null ||
       this.#helptipCloser === null ||
-      this.#helptipContent === null ||
-      this.#helptipContentAria === null
+      this.#helptipContent === null
     ) {
       throw new Error('helptip selector를 다시 확인해 주세요');
     }

diff --git a/src/SnackbarManager.js b/src/SnackbarManager.js
@@ -17,20 +17,21 @@ class SnackbarManager {
     }
   }
 
-  show(message = '오류가 발생했습니다') {
+  show(message = '오류가 발생했습니다', onHide = null) {
     this.#check();
     this.#element.classList.add('show');
     this.#element.textContent = message;
     this.#timer && clearTimeout(this.#timer);
     this.#timer = setTimeout(() => {
-      this.hide();
+      this.hide(onHide);
     }, this.#delay);
   }
 
-  hide() {
+  hide(onHide = null) {
     this.#check();
     this.#element.classList.remove('show');
     this.#element.textContent = '';
+    onHide && onHide();
   }
 }
 

diff --git a/src/index.html b/src/index.html
@@ -17,7 +17,6 @@ <h2>승객 선택</h2>
             <button type="button" class="helptip-trigger" aria-label="성인 기준 상세 안내 열기"><span>?</span></button>
             <div class="helptip">
               <span class="helptip-content">국제선 만 12세 이상, 국내선 만 13세 이상</span>
-              <span class="aria-hidden" aria-hidden="true" aria-live="polite"></span>
               <button type="button" class="helptip-closer" aria-label="성인 기준 상세 안내 닫기"><span>x</span></button>
             </div>
           </div>
@@ -33,10 +32,11 @@ <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" aria-live="polite"></div>
         </div>
       </div>
     </div>
-    <div id="snackbar" role="status" aria-live="assertive"></div>
+    <div id="snackbar" role="status"></div>
+    <div id="aria-live-polite-message" class="aria-hidden" aria-live="polite"></div>
+    <div id="aria-live-assertive-message" class="aria-hidden" aria-live="assertive"></div>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -11,12 +11,23 @@ const ERROR_MESSAGE = {
 document.addEventListener('DOMContentLoaded', () => {
   const $adultPassengerField = $('.adult-passenger-field');
   const helptipManager = new HelptipManager('.helptip-container', $adultPassengerField);
-  helptipManager.start();
 
   const snackbarManager = new SnackbarManager();
   const $adultPassengerSpin = $('.adult-passenger-spin', $adultPassengerField);
   const $adultPassengerSpinInput = $('input', $adultPassengerSpin);
-  const $adultPassengerSpinAriaLiveMessage = $('.spin-input-aria-live-message', $adultPassengerSpin);
+  const $ariaLivePolite = $('#aria-live-polite-message');
+  const $ariaLiveAssertive = $('#aria-live-polite-message');
+
+  // @TODO: 위의 element들 null check
+
+  helptipManager.start(
+    () => {
+      $ariaLivePolite.textContent = '국제선 만 12세 이상, 국내선 만 13세 이상';
+    },
+    () => {
+      $ariaLivePolite.textContent = '';
+    },
+  );
 
   $adultPassengerSpin.addEventListener('click', e => {
     if (!e.target) return;
@@ -31,12 +42,13 @@ document.addEventListener('DOMContentLoaded', () => {
 
     const nextValue = value + step;
     if (nextValue < 0 || nextValue > 3) {
-      snackbarManager.show(ERROR_MESSAGE.OVER_RESERVABLE_ADULT);
+      snackbarManager.show(ERROR_MESSAGE.OVER_RESERVABLE_ADULT, () => ($ariaLivePolite.textContent = ''));
+      $ariaLivePolite.textContent = ERROR_MESSAGE.OVER_RESERVABLE_ADULT;
       return;
     }
 
     $adultPassengerSpinInput.value = Math.max(0, Math.min(MAX_RESERVABLE_ADULT_PASSENGER_COUNT, nextValue));
-    $adultPassengerSpinAriaLiveMessage.textContent = `성인 승객 추가 ${$adultPassengerSpinInput.value}`;
+    $ariaLivePolite.textContent = `성인 승객 추가 ${$adultPassengerSpinInput.value}`;
   });
 
   $adultPassengerSpinInput.addEventListener('input', e => {
@@ -54,19 +66,21 @@ document.addEventListener('DOMContentLoaded', () => {
       if (target.value < Number(min)) {
         isProperRange = false;
         target.value = min;
-        snackbarManager.show(ERROR_MESSAGE.OVER_RESERVABLE_ADULT);
+        snackbarManager.show(ERROR_MESSAGE.OVER_RESERVABLE_ADULT, () => ($ariaLiveAssertive.textContent = ''));
+        $ariaLiveAssertive.textContent = ERROR_MESSAGE.OVER_RESERVABLE_ADULT;
       }
     }
     if (max !== null) {
       if (target.value > Number(max)) {
         isProperRange = false;
-        snackbarManager.show(ERROR_MESSAGE.OVER_RESERVABLE_ADULT);
+        snackbarManager.show(ERROR_MESSAGE.OVER_RESERVABLE_ADULT, () => ($ariaLiveAssertive.textContent = ''));
+        $ariaLiveAssertive.textContent = ERROR_MESSAGE.OVER_RESERVABLE_ADULT;
         target.value = max;
       }
     }
 
     if (isProperRange) {
-      $adultPassengerSpinAriaLiveMessage.textContent = `성인 승객 추가 ${target.value}`;
+      $ariaLivePolite.textContent = `성인 승객 추가 ${target.value}`;
     }
   });
 });