Merge origin/master

- Added focusedIndex state to track keyboard focus
- Enhanced handleKeyDown to support ArrowDown, ArrowUp, Enter, and Escape keys
- Added visual focus indicator with orange ring (ring-2 ring-orange-500)
- Implemented aria-activedescendant for screen reader support
- Added unique IDs to language options for accessibility
- Reset focusedIndex when dropdown opens/closes

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/contact/ContactForm.tsx

@@ -15,8 +15,6 @@ interface FormData {
 export function ContactForm() {
   const t = useTranslations('pages.contact');
 
-  const MAX_MESSAGE_LENGTH = 1000;
-
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
   const [errorMessage, setErrorMessage] = useState<string>('');
@@ -28,8 +26,6 @@ export function ContactForm() {
   const [errors, setErrors] = useState<Partial<FormData>>({});
   const [remainingAttempts, setRemainingAttempts] = useState<number | null>(null);
 
-  const messageLength = formData.message.length;
-
   const validateForm = () => {
     const newErrors: Partial<FormData> = {};
 
@@ -323,7 +319,6 @@ export function ContactForm() {
                       onChange={handleChange}
                       placeholder={t('contactForm.message.placeholder')}
                       rows={6}
-                      maxLength={MAX_MESSAGE_LENGTH}
                       disabled={isSubmitting}
                       aria-required="true"
                       aria-invalid={!!errors.message}
@@ -333,19 +328,6 @@ export function ContactForm() {
                     {errors.message && (
                       <p id="message-error" role="alert" className="text-sm text-red-400">{errors.message}</p>
                     )}
-                    <div className="flex justify-end">
-                      <p
-                        className={`text-xs transition-colors ${
-                          messageLength > MAX_MESSAGE_LENGTH
-                            ? 'text-red-500'
-                            : messageLength >= MAX_MESSAGE_LENGTH * 0.8
-                            ? 'text-yellow-500'
-                            : 'text-zinc-500'
-                        }`}
-                      >
-                        {t('contactForm.characterCounter', { current: messageLength, max: MAX_MESSAGE_LENGTH })}
-                      </p>
-                    </div>
                   </div>
                 </div>
 

src/components/layout/LanguageSwitcher.tsx

@@ -11,6 +11,7 @@ const LanguageSwitcher = () => {
   const pathname = usePathname();
   const [isOpen, setIsOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState<number>(-1);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   const languages = [
@@ -30,8 +31,28 @@ const LanguageSwitcher = () => {
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      setIsOpen(false);
+    if (!isOpen) return;
+
+    switch (e.key) {
+      case 'Escape':
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        setFocusedIndex(prev => (prev + 1) % languages.length);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setFocusedIndex(prev => (prev - 1 + languages.length) % languages.length);
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (focusedIndex >= 0) {
+          handleLanguageChange(languages[focusedIndex].code);
+          setFocusedIndex(-1);
+        }
+        break;
     }
   };
 
@@ -63,7 +84,10 @@ const LanguageSwitcher = () => {
              px-4 py-2 rounded-full transition-all duration-200
              hover:bg-zinc-800/50 border border-transparent hover:border-zinc-800
              hover:scale-105 active:scale-95"
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={() => {
+          setIsOpen(!isOpen);
+          setFocusedIndex(-1);
+        }}
         aria-expanded={isOpen}
         aria-haspopup="listbox"
         aria-label="Select language"
@@ -79,18 +103,21 @@ const LanguageSwitcher = () => {
                    ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'}`}
         role="listbox"
         aria-label="Languages"
+        aria-activedescendant={focusedIndex >= 0 ? `lang-option-${languages[focusedIndex].code}` : undefined}
         onKeyDown={handleKeyDown}
       >
         <div className="py-1">
-          {languages.map((lang) => (
+          {languages.map((lang, index) => (
             <button
               key={lang.code}
+              id={`lang-option-${lang.code}`}
               className={`w-full text-left px-4 py-2 text-sm transition-colors duration-200
                 hover:bg-zinc-800/50
                 ${locale === lang.code
                   ? 'bg-zinc-800 text-white'
                   : 'text-zinc-400 hover:text-white'
-              }`}
+                }
+                ${focusedIndex === index ? 'ring-2 ring-orange-500 ring-inset' : ''}`}
               onClick={() => handleLanguageChange(lang.code)}
               role="option"
               aria-selected={locale === lang.code}

src/messages/de.json

@@ -394,7 +394,6 @@
           "label": "Nachricht",
           "placeholder": "Ihre Nachricht an mich..."
         },
-        "characterCounter": "{current}/{max} Zeichen",
         "submit": "Nachricht senden",
         "submitting": "Nachricht wird gesendet...",
         "successMessage": "Vielen Dank für Ihre Nachricht! Ich werde mich so schnell wie möglich bei Ihnen melden.",

src/messages/en.json

@@ -409,7 +409,6 @@
           "label": "Message",
           "placeholder": "Your message to me..."
         },
-        "characterCounter": "{current}/{max} characters",
         "submit": "Send Message",
         "submitting": "Sending message...",
         "successMessage": "Thank you for your message! I will get back to you as soon as possible.",

src/messages/sr.json

@@ -416,7 +416,6 @@
           "label": "Poruka",
           "placeholder": "Vasa poruka za mene..."
         },
-        "characterCounter": "{current}/{max} karaktera",
         "submit": "Posalji poruku",
         "submitting": "Slanje poruke...",
         "successMessage": "Hvala vam na poruci! Javicu vam se sto je pre moguce.",