From 0586005191fe8cb7dc96bc08d3c82df9b7b50080 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=BB=A8=ED=8A=B8=EB=A1=A4DELTA?= <controld3785@gmail.com>
Date: Tue, 21 Apr 2026 15:54:00 +0900
Subject: [PATCH] Improve Settings Popup Accessibility

---
 src/app/features/settings/category.html         |  2 ++
 src/app/features/settings/category.scss         |  9 +++++++++
 .../settings/{popup.html => settings.html}      | 17 +++++++----------
 .../settings/{popup.scss => settings.scss}      | 10 +---------
 src/app/features/settings/settings.ts           | 16 +++++++++++++---
 5 files changed, 32 insertions(+), 22 deletions(-)
 create mode 100644 src/app/features/settings/category.html
 create mode 100644 src/app/features/settings/category.scss
 rename src/app/features/settings/{popup.html => settings.html} (81%)
 rename src/app/features/settings/{popup.scss => settings.scss} (87%)

diff --git a/src/app/features/settings/category.html b/src/app/features/settings/category.html
new file mode 100644
index 0000000..1afb591
--- /dev/null
+++ b/src/app/features/settings/category.html
@@ -0,0 +1,2 @@
+<label class="category-header">{{ headerLabel() }}</label>
+<ng-content></ng-content>
diff --git a/src/app/features/settings/category.scss b/src/app/features/settings/category.scss
new file mode 100644
index 0000000..d1adb73
--- /dev/null
+++ b/src/app/features/settings/category.scss
@@ -0,0 +1,9 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 0; padding: 0;
+  border: none;
+}
diff --git a/src/app/features/settings/popup.html b/src/app/features/settings/settings.html
similarity index 81%
rename from src/app/features/settings/popup.html
rename to src/app/features/settings/settings.html
index 961a8cb..7684e97 100644
--- a/src/app/features/settings/popup.html
+++ b/src/app/features/settings/settings.html
@@ -5,9 +5,7 @@
   </div>
 
   <div class="settings-content">
-    <section class="settings-category">
-      <label class="category-header">{{ translation.settings.language }}</label>
-
+    <settings-category [headerLabel]="translation.settings.language">
       <div class="settings-container">
         <dropdown [options]="languages"
                   [value]="settingsService.language()"
@@ -17,18 +15,17 @@
 
       <div class="settings-container">
         <div class="settings-name">
-          <span class="material-symbols-outlined icon-24 settings-icon">match_case</span>
+          <span class="material-symbols-outlined icon-24 settings-icon" aria-hidden="true">match_case</span>
           <span>{{ translation.settings.romanisation }}</span>
         </div>
         <switch [isActive]="settingsService.romanisation()" (toggle)="onRomanisationChange($event)"></switch>
       </div>
-    </section>
+    </settings-category>
 
-    <section class="settings-category">
-      <label class="category-header">{{ translation.settings.appearance }}</label>
+    <settings-category [headerLabel]="translation.settings.appearance">
       <div class="settings-container">
         <div class="settings-name">
-          <span class="material-symbols-outlined icon-24 settings-icon">dark_mode</span>
+          <span class="material-symbols-outlined icon-24 settings-icon" aria-hidden="true">dark_mode</span>
           <span>{{ translation.settings.darkMode }}</span>
         </div>
         <switch [isActive]="settingsService.darkMode()" (toggle)="onDarkModeChange($event)"></switch>
@@ -36,12 +33,12 @@
 
       <div class="settings-container">
         <div class="settings-name">
-          <span class="material-symbols-outlined icon-24 settings-icon">motion_photos_paused</span>
+          <span class="material-symbols-outlined icon-24 settings-icon" aria-hidden="true">motion_photos_paused</span>
           <span>{{ translation.settings.reduceAnimation }}</span>
         </div>
         <switch [isActive]="settingsService.reduceAnimation()" (toggle)="onReduceAnimationChange($event)"></switch>
       </div>
-    </section>
+    </settings-category>
   </div>
 
 </app-popup>
diff --git a/src/app/features/settings/popup.scss b/src/app/features/settings/settings.scss
similarity index 87%
rename from src/app/features/settings/popup.scss
rename to src/app/features/settings/settings.scss
index 1426fd1..2251376 100644
--- a/src/app/features/settings/popup.scss
+++ b/src/app/features/settings/settings.scss
@@ -25,15 +25,7 @@
 
   padding-bottom: 12px;
 
-  section.settings-category {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    align-items: flex-start;
-    justify-content: flex-start;
-    margin: 0; padding: 0;
-    border: none;
-
+  settings-category {
     label {
       display: block;
       font-weight: 500;
diff --git a/src/app/features/settings/settings.ts b/src/app/features/settings/settings.ts
index de77252..36cfd02 100644
--- a/src/app/features/settings/settings.ts
+++ b/src/app/features/settings/settings.ts
@@ -7,12 +7,22 @@ import { PopupService } from '../../services/popup.service';
 import { SettingsService, Language } from '../../services/settings.service';
 import { TranslationService } from '../../services/translation.service';
 
+@Component({
+  selector: 'settings-category',
+  standalone: true,
+  templateUrl: './category.html',
+  styleUrl: './category.scss',
+})
+export class SettingsCategory {
+  headerLabel = input<string>();
+}
+
 @Component({
   selector: 'settings-popup',
   standalone: true,
-  imports: [PopupComponent, Dropdown, Switch, NgOptimizedImage],
-  templateUrl: './popup.html',
-  styleUrl: './popup.scss',
+  imports: [PopupComponent, Dropdown, Switch, NgOptimizedImage, SettingsCategory],
+  templateUrl: './settings.html',
+  styleUrl: './settings.scss',
 })
 export class SettingsPopup {
   private popupService = inject(PopupService);