fix: add aria-pressed to toggle buttons for screen reader accessibility (#555)

* Initial plan

* fix: Add aria-pressed to toggle buttons for screen reader accessibility (WCAG 4.1.2)

Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>

Author: Copilot

src/frontend/src/components/AppHostBuilder.astro

@@ -455,6 +455,7 @@ builder.Build().Run();`,
         data-toggle="frontend"
         data-tooltip-placement="top"
         title={Astro.locals.t('appHostBuilder.frontendTooltip')}
+        aria-pressed="true"
       >
         <Icon name="laptop" size="1.2rem" />
         <span>Front end</span>
@@ -465,6 +466,7 @@ builder.Build().Run();`,
         data-toggle="database"
         data-tooltip-placement="top"
         title={Astro.locals.t('appHostBuilder.databaseTooltip')}
+        aria-pressed="false"
       >
         <Icon name="seti:db" size="1.2rem" />
         <span>{Astro.locals.t('appHostBuilder.database')}</span>
@@ -475,6 +477,7 @@ builder.Build().Run();`,
         data-toggle="api"
         data-tooltip-placement="top"
         title={Astro.locals.t('appHostBuilder.apiTooltip')}
+        aria-pressed="false"
       >
         <Icon name="seti:json" size="1.2rem" />
         <span>{Astro.locals.t('appHostBuilder.api')}</span>
@@ -485,6 +488,7 @@ builder.Build().Run();`,
         data-toggle="container"
         data-tooltip-placement="top"
         title={Astro.locals.t('appHostBuilder.containerTooltip')}
+        aria-pressed="false"
       >
         <Icon name="seti:docker" size="1.2rem" />
         <span>{Astro.locals.t('appHostBuilder.container')}</span>
@@ -495,6 +499,7 @@ builder.Build().Run();`,
         data-toggle="deployment"
         data-tooltip-placement="top"
         title={Astro.locals.t('appHostBuilder.deploymentTooltip')}
+        aria-pressed="false"
       >
         <Icon name="rocket" size="1.2rem" />
         <span>{Astro.locals.t('appHostBuilder.deploy')}</span>
@@ -717,6 +722,7 @@ builder.Build().Run();`,
     toggleButtons.forEach((button) => {
       button.addEventListener('click', () => {
         button.classList.toggle('active');
+        button.setAttribute('aria-pressed', button.classList.contains('active').toString());
         updateCodeDisplay();
       });
     });

src/frontend/src/components/LocalVsProdEnvironments.astro

@@ -5,13 +5,13 @@ import { Code } from '@astrojs/starlight/components';
 <div class="orbit-section">
   <div class="environment-toggle">
     <div class="toggle-container">
-      <button class="active toggle-btn toggle-local">
+      <button class="active toggle-btn toggle-local" aria-pressed="true">
         {Astro.locals.t('landing.environments.local')}
       </button>
-      <button class="toggle-btn toggle-test">
+      <button class="toggle-btn toggle-test" aria-pressed="false">
         {Astro.locals.t('landing.environments.test')}
       </button>
-      <button class="toggle-btn toggle-prod">
+      <button class="toggle-btn toggle-prod" aria-pressed="false">
         {Astro.locals.t('landing.environments.prod')}
       </button>
     </div>
@@ -183,10 +183,15 @@ import { Code } from '@astrojs/starlight/components';
       return isMobileUA || (isSmallScreen && hasTouch);
     }
 
+    function setActiveEnvironment(activeBtn) {
+      [localBtn, testBtn, prodBtn].forEach((btn) => {
+        btn.setAttribute('aria-pressed', (btn === activeBtn).toString());
+        btn.classList.toggle('active', btn === activeBtn);
+      });
+    }
+
     localBtn.addEventListener('click', () => {
-      localBtn.classList.add('active');
-      testBtn.classList.remove('active');
-      prodBtn.classList.remove('active');
+      setActiveEnvironment(localBtn);
       container.classList.remove('test-active', 'prod-active');
       container.classList.add('local-active');
       localSubtitle.classList.add('local-active');
@@ -196,9 +201,7 @@ import { Code } from '@astrojs/starlight/components';
     });
 
     testBtn.addEventListener('click', () => {
-      testBtn.classList.add('active');
-      localBtn.classList.remove('active');
-      prodBtn.classList.remove('active');
+      setActiveEnvironment(testBtn);
       container.classList.remove('local-active', 'prod-active');
       container.classList.add('test-active');
       testSubtitle.classList.add('test-active');
@@ -208,9 +211,7 @@ import { Code } from '@astrojs/starlight/components';
     });
 
     prodBtn.addEventListener('click', () => {
-      prodBtn.classList.add('active');
-      localBtn.classList.remove('active');
-      testBtn.classList.remove('active');
+      setActiveEnvironment(prodBtn);
       container.classList.remove('local-active', 'test-active');
       container.classList.add('prod-active');
       prodSubtitle.classList.add('prod-active');