Improve Settings Popup Accessibility

src/app/features/settings/category.html

@@ -0,0 +1,2 @@
+<label class="category-header">{{ headerLabel() }}</label>
+<ng-content></ng-content>

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;
+}

src/app/features/settings/settings.html

@@ -5,9 +5,7 @@
   </div>
 
   <div class="settings-content">
-    <section class="settings-category">
+    <settings-category [headerLabel]="translation.settings.language">
-      <label class="category-header">{{ translation.settings.language }}</label>
-
       <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">
+    <settings-category [headerLabel]="translation.settings.appearance">
-      <label class="category-header">{{ translation.settings.appearance }}</label>
       <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>

src/app/features/settings/settings.scss

@@ -25,15 +25,7 @@
 
   padding-bottom: 12px;
 
-  section.settings-category {
+  settings-category {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    align-items: flex-start;
-    justify-content: flex-start;
-    margin: 0; padding: 0;
-    border: none;
-
     label {
       display: block;
       font-weight: 500;

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],
+  imports: [PopupComponent, Dropdown, Switch, NgOptimizedImage, SettingsCategory],
-  templateUrl: './popup.html',
+  templateUrl: './settings.html',
-  styleUrl: './popup.scss',
+  styleUrl: './settings.scss',
 })
 export class SettingsPopup {
   private popupService = inject(PopupService);