changes

src/app/components/language-selector/language-selector.component.html

@@ -1,5 +1,5 @@
-<div class="language-selector">
-  <button class="language-button" (click)="toggleDropdown()">
+<div class="language-selector" role="listbox">
+  <button class="language-button" (click)="toggleDropdown()" (keydown)="onKeyDown($event)" aria-haspopup="listbox" [attr.aria-expanded]="dropdownOpen">
     <img [src]="languageService.getCurrentLanguage()?.flagSvg" 
          [alt]="languageService.getCurrentLanguage()?.name" 
          class="language-flag">
@@ -13,6 +13,8 @@
     @for (lang of languageService.languages; track lang.code) {
       <button 
         class="language-option" 
+        role="option"
+        [attr.aria-selected]="languageService.currentLanguage() === lang.code"
         [class.active]="languageService.currentLanguage() === lang.code"
         [class.disabled]="!lang.enabled"
         [disabled]="!lang.enabled"

src/app/components/language-selector/language-selector.component.ts

@@ -31,6 +31,15 @@ export class LanguageSelectorComponent {
     this.dropdownOpen = false;
   }
 
+  onKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      this.dropdownOpen = false;
+    } else if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.toggleDropdown();
+    }
+  }
+
   @HostListener('document:click', ['$event'])
   onClickOutside(event: Event): void {
     if (!this.elementRef.nativeElement.contains(event.target)) {