feat(a11y): add aria-labels to toolbar icons for screen reader suppor… (#6309)

* feat(a11y): add aria-labels to toolbar icons for screen reader support (#5948)

- Add aria-label to play, stop, fullscreen, new project, open, save,
  planet, menu and help toolbar icons in index.html
- Add keydown Enter/Space handlers in toolbar.js for play and stop
- Addresses WCAG 2.1 AA screen reader accessibility requirements

* feat(a11y): add aria-labels to toolbar icons for screen reader support (#5948)

* Fix toolbar tests: add setAttribute mock for aria-label changes

* fix(a11y): wrap aria-label strings in _() for i18n

Author: abhnish

js/__tests__/toolbar.test.js

@@ -237,15 +237,18 @@ describe("Toolbar Class", () => {
         const elements = {
             play: {
                 onclick: null,
-                addEventListener: jest.fn()
+                addEventListener: jest.fn(),
+                setAttribute: jest.fn()
             },
             stop: {
                 style: { color: "" },
                 addEventListener: jest.fn(),
-                removeEventListener: jest.fn()
+                removeEventListener: jest.fn(),
+                setAttribute: jest.fn()
             },
             record: {
-                className: ""
+                className: "",
+                setAttribute: jest.fn()
             }
         };
 
@@ -284,7 +287,12 @@ describe("Toolbar Class", () => {
     });
 
     test("renderStopIcon sets onclick and updates stop button behavior", () => {
-        const stopIcon = { onclick: null, style: { color: "" } };
+        const stopIcon = {
+            onclick: null,
+            style: { color: "" },
+            setAttribute: jest.fn(),
+            addEventListener: jest.fn()
+        };
         const recordButton = { className: "recording" };
 
         global.docById.mockImplementation(id =>

js/toolbar.js

@@ -467,6 +467,15 @@ class Toolbar {
         const playIcon = docById("play");
         const stopIcon = docById("stop");
         const recordButton = docById("record");
+        playIcon.setAttribute("role", "button");
+        playIcon.setAttribute("aria-label", _("Play project"));
+        playIcon.setAttribute("tabindex", "0");
+        playIcon.addEventListener("keydown", e => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                playIcon.click();
+            }
+        });
         let isPlayIconRunning = false;
 
         function handleClick() {
@@ -520,6 +529,15 @@ class Toolbar {
     renderStopIcon(onclick) {
         const stopIcon = docById("stop");
         const recordButton = docById("record");
+        stopIcon.setAttribute("role", "button");
+        stopIcon.setAttribute("aria-label", _("Stop project"));
+        stopIcon.setAttribute("tabindex", "0");
+        stopIcon.addEventListener("keydown", e => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                stopIcon.click();
+            }
+        });
         stopIcon.onclick = () => {
             onclick(this.activity);
             stopIcon.style.color = "white";