fix: aria-live 속성을 동적으로 바꾸지 않음

src/HelptipManager.js

@@ -51,13 +51,13 @@ class HelptipManager {
   #show() {
     this.#check();
     this.#helptipElement.classList.add('show');
-    this.#helptipMessageElement.setAttribute('aria-live', 'assertive');
+    // this.#helptipMessageElement.setAttribute('aria-live', 'assertive');
   }
 
   #hide() {
     this.#check();
     this.#helptipElement.classList.remove('show');
-    this.#helptipMessageElement.setAttribute('aria-live', 'polite');
+    // this.#helptipMessageElement.setAttribute('aria-live', 'polite');
   }
 
   #check() {

src/SnackbarManager.js

@@ -21,7 +21,7 @@ class SnackbarManager {
     this.#check();
     this.#element.classList.add('show');
     this.#element.textContent = message;
-    this.#element.setAttribute('aria-live', 'assertive');
+    // this.#element.setAttribute('aria-live', 'assertive');
     this.#timer && clearTimeout(this.#timer);
     this.#timer = setTimeout(() => {
       this.hide();
@@ -30,7 +30,7 @@ class SnackbarManager {
 
   hide() {
     this.#check();
-    this.#element.setAttribute('aria-live', 'off');
+    // this.#element.setAttribute('aria-live', 'off');
     this.#element.classList.remove('show');
   }
 }

src/index.html

@@ -36,6 +36,6 @@ <h2>승객 선택</h2>
         </div>
       </div>
     </div>
-    <div id="snackbar" role="status"></div>
+    <div id="snackbar" role="status" aria-live="polite"></div>
   </body>
 </html>

src/main.js

@@ -34,7 +34,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     $adultPassengerSpinInput.value = Math.max(0, Math.min(MAX_RESERVABLE_ADULT_PASSENGER_COUNT, nextValue));
     $adultPassengerSpinAriaLiveMessage.textContent = `성인 승객 추가 ${$adultPassengerSpinInput.value}`;
-    $adultPassengerSpinAriaLiveMessage.setAttribute('aria-live', 'assertive');
+    // $adultPassengerSpinAriaLiveMessage.setAttribute('aria-live', 'assertive');
   });
 
   $adultPassengerSpinInput.addEventListener('input', e => {
@@ -65,7 +65,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     if (isProperRange) {
       $adultPassengerSpinAriaLiveMessage.textContent = `성인 승객 추가 ${target.value}`;
-      $adultPassengerSpinAriaLiveMessage.setAttribute('aria-live', 'assertive');
+      // $adultPassengerSpinAriaLiveMessage.setAttribute('aria-live', 'assertive');
     }
   });
 });

src/style/style.scss

@@ -24,13 +24,7 @@ input[type='number'] {
 
 .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;
+  text-indent: -9999px;
 }
 
 #page {