ARIA fixes and improvements

Missing form labels. Replaced tab index on canvas with a skip to 3D canvas link.

AI use: Interactive session with Opus 4.8. Decision making, review and testing.

Author: tracygardner

flock.js

@@ -1457,6 +1457,9 @@ export const flock = {
 
     flock.engine.disableUniformBuffers = true; // Meshes with alpha black on Samsung A14
 
+    // Set on the engine, not the element: Babylon reapplies its default on every pointer move.
+    flock.engine.canvasTabIndex = 0;
+
     if (!flock._webglContextLostListenerAdded) {
       flock._webglContextLostListenerAdded = true;
       // Call preventDefault() on the raw event so the browser is willing to restore.

index.html

@@ -301,6 +301,9 @@
     </div>
 
     <h1 class="sr-only">FlockXR</h1>
+    <a id="skip-to-scene" class="skip-link" href="#renderCanvas" data-i18n="skip_to_scene"
+      >Skip to 3D scene</a
+    >
     <label for="importFile" class="sr-only" aria-hidden="true" data-i18n="import_project_file"
       >Import project file</label
     >
@@ -409,7 +412,7 @@ <h1 class="sr-only">FlockXR</h1>
                     aria-labelledby="project-menu-item"
                     hidden
                   >
-                    <li>
+                    <li role="none">
                       <a
                         href="#"
                         id="project-new"
@@ -419,7 +422,7 @@ <h1 class="sr-only">FlockXR</h1>
                         >New</a
                       >
                     </li>
-                    <li>
+                    <li role="none">
                       <a
                         href="#"
                         id="project-open"
@@ -429,7 +432,7 @@ <h1 class="sr-only">FlockXR</h1>
                         >Open</a
                       >
                     </li>
-                    <li>
+                    <li role="none">
                       <a
                         href="#"
                         id="project-save"
@@ -494,12 +497,12 @@ <h1 class="sr-only">FlockXR</h1>
                         >Deutsch</a
                       >
                   </li-->
-                    <li>
+                    <li role="none">
                       <a href="#" data-lang="en" role="menuitem" tabindex="-1"
                         >English</a
                       >
                     </li>
-                    <li>
+                    <li role="none">
                       <a href="#" data-lang="es" role="menuitem" tabindex="-1"
                         >Español</a
                       >
@@ -578,7 +581,7 @@ <h1 class="sr-only">FlockXR</h1>
                     aria-labelledby="theme-menu-item"
                     hidden
                   >
-                    <li>
+                    <li role="none">
                       <a
                         href="#"
                         data-theme-target="light"
@@ -589,7 +592,7 @@ <h1 class="sr-only">FlockXR</h1>
                         >Light</a
                       >
                     </li>
-                    <li>
+                    <li role="none">
                       <a
                         href="#"
                         data-theme-target="dark-contrast"
@@ -599,7 +602,7 @@ <h1 class="sr-only">FlockXR</h1>
                         >Dark</a
                       >
                     </li>
-                    <li>
+                    <li role="none">
                       <a
                         href="#"
                         data-theme-target="dark"
@@ -609,7 +612,7 @@ <h1 class="sr-only">FlockXR</h1>
                         >Dark 2</a
                       >
                     </li>
-                    <li>
+                    <li role="none">
                       <a
                         href="#"
                         data-theme-target="contrast"
@@ -619,7 +622,7 @@ <h1 class="sr-only">FlockXR</h1>
                         >Contrast</a
                       >
                     </li>
-                    <li>
+                    <li role="none">
                       <a
                         href="#"
                         data-theme-target="low-vision"
@@ -1354,6 +1357,9 @@ <h2 id="modal-title" data-i18n="about_heading">
             aria-label="Drag to resize panels"
             role="separator"
             aria-orientation="vertical"
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-valuenow="50"
             tabindex="0"
           ></div>
           <section id="codePanel" aria-label="Code editor panel">
@@ -1481,6 +1487,7 @@ <h2 id="modal-title" data-i18n="about_heading">
           rel="noopener noreferrer"
           id="bottombar-flocklink"
           class="bottombar-flocklink"
+          data-i18n="info_panel_link"
           aria-label="Visit Flock XR website (opens in new tab)"
           title="Visit Flock XR website"
         >

locale/de.js

@@ -49,6 +49,7 @@ export default {
   pick_color_from_screen: 'Farbe vom Bildschirm auswählen',
   more_options: 'Weitere Optionen',
   hex_placeholder: 'ff0000 oder red',
+  hex_color: 'Hex-Farbe', // ai
   skin_tone: 'Hautton',
   color_wheel_aria: 'Farbrad: Verwenden Sie die Pfeiltasten, um Farbton und Sättigung auszuwählen',
 
@@ -1070,6 +1071,7 @@ export default {
   camera_button_ui: "Kamera-Steuerung",
   eye_button_ui: "Um ausgewähltes Objekt kreisen",
   info_panel_link_ui: "Flock XR Webseite (neuer Tab)",
+  skip_to_scene_ui: "Zur 3D-Szene springen", // ai
   project_name_ui: "Projektname",
   keyboard_controls_ui: "Tastatursteuerung [Ctrl + /]",
   keyboard_menu_ui: "Hauptmenü",

locale/en.js

@@ -49,6 +49,7 @@ export default {
   pick_color_from_screen: 'Pick color from screen',
   more_options: 'More options',
   hex_placeholder: 'ff0000 or red',
+  hex_color: 'Hex color',
   skin_tone: 'Skin tone',
   color_wheel_aria: 'Color wheel: use arrow keys to select hue and saturation',
 
@@ -1126,6 +1127,7 @@ export default {
   eye_button_ui: "Orbit around selected object",
 
   info_panel_link_ui: "Visit Flock XR website (opens in new tab)",
+  skip_to_scene_ui: "Skip to 3D scene",
 
   project_name_ui: "Project name",
 

locale/es.js

@@ -49,6 +49,7 @@ export default {
   pick_color_from_screen: 'Seleccionar color de la pantalla', // human
   more_options: 'Más opciones', // human
   hex_placeholder: 'ff0000 o rojo', // human
+  hex_color: 'Color hexadecimal', // ai
   skin_tone: 'Tono de piel', // human
   color_wheel_aria: 'Rueda de color: usa las teclas de flecha para seleccionar tono y saturación', // human
 
@@ -1120,6 +1121,7 @@ export default {
 
   info_panel_link_ui:
     "Visitar pagina web de Flock XR (se abre en una pestaña nueva)", // human
+  skip_to_scene_ui: "Saltar a la escena 3D", // ai
 
   project_name_ui: "Nombre del proyecto", // human
 

locale/fr.js

@@ -49,6 +49,7 @@ export default {
   pick_color_from_screen: "Prélever la couleur de l'écran",
   more_options: "Plus d'options",
   hex_placeholder: 'ff0000 ou red',
+  hex_color: 'Couleur hexadécimale', // ai
   skin_tone: 'Ton de peau',
   color_wheel_aria:
     'Roue chromatique: utilisez les touches fléchées pour sélectionner la teinte et la saturation',
@@ -1065,6 +1066,7 @@ export default {
   eye_button_ui: "Orbiter autour de l'objet sélectionné",
 
   info_panel_link_ui: 'Visiter le site web de Flock XR (ouvre dans un nouvel onglet)',
+  skip_to_scene_ui: 'Aller à la scène 3D', // ai
 
   project_name_ui: 'Nom du projet',
 

locale/it.js

@@ -49,6 +49,7 @@ export default {
   pick_color_from_screen: 'Prendi colore dallo schermo',
   more_options: 'Altre opzioni',
   hex_placeholder: 'ff0000 o red',
+  hex_color: 'Colore esadecimale', // ai
   skin_tone: 'Tono della pelle',
   color_wheel_aria: 'Ruota dei colori: usa le frecce per scegliere tonalità e saturazione',
 
@@ -1073,6 +1074,7 @@ export default {
   eye_button_ui: "Orbita attorno all'oggetto selezionato",
 
   info_panel_link_ui: 'Visita il sito Flock XR (apre in una nuova scheda)',
+  skip_to_scene_ui: 'Vai alla scena 3D', // ai
 
   project_name_ui: 'Nome progetto',
 

locale/pl.js

@@ -49,6 +49,7 @@ export default {
   pick_color_from_screen: 'Wybierz kolor z ekranu',
   more_options: 'Więcej opcji',
   hex_placeholder: 'ff0000 lub red',
+  hex_color: 'Kolor szesnastkowy', // ai
   skin_tone: 'Odcień skóry',
   color_wheel_aria: 'Koło kolorów: użyj klawiszy strzałek, aby wybrać odcień i nasycenie',
 
@@ -1062,6 +1063,7 @@ export default {
   eye_button_ui: "Obracaj wokół wybranego obiektu",
 
   info_panel_link_ui: "Odwiedź stronę Flock XR (otwiera się w nowej karcie)",
+  skip_to_scene_ui: "Przejdź do sceny 3D", // ai
 
   project_name_ui: "Nazwa projektu",
 

locale/pt.js

@@ -49,6 +49,7 @@ export default {
   pick_color_from_screen: 'Selecionar cor da tela',
   more_options: 'Mais opções',
   hex_placeholder: 'ff0000 ou red',
+  hex_color: 'Cor hexadecimal', // ai
   skin_tone: 'Tom de pele',
   color_wheel_aria: 'Roda de cores: use as teclas de seta para selecionar matiz e saturação',
 
@@ -1072,6 +1073,7 @@ export default {
   eye_button_ui: "Orbitar ao redor do objeto selecionado",
 
   info_panel_link_ui: "Visitar o site do Flock XR (abre num novo separador)",
+  skip_to_scene_ui: "Ir para a cena 3D", // ai
 
   project_name_ui: "Nome do projeto",
 

locale/sv.js

@@ -49,6 +49,7 @@ export default {
   pick_color_from_screen: 'Välj färg från skärmen',
   more_options: 'Fler alternativ',
   hex_placeholder: 'ff0000 eller red',
+  hex_color: 'Hexfärg', // ai
   skin_tone: 'Hudton',
   color_wheel_aria: 'Färghjul: använd piltangenterna för att välja nyans och mättnad',
 
@@ -1051,6 +1052,7 @@ export default {
   eye_button_ui: "Kretsa runt valt objekt",
 
   info_panel_link_ui: "Besök Flock XR:s webbplats (öppnas i ny flik)",
+  skip_to_scene_ui: "Hoppa till 3D-scenen", // ai
 
   project_name_ui: "Projektnamn",