Merge branch 'master' into test/generate-edge-coverage

Author: parthdagia05

.github/workflows/pr-cypress-e2e.yml

@@ -0,0 +1,43 @@
+name: E2E Test
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+  push:
+    branches:
+      - master
+
+jobs:
+  e2e:
+    name: Run Cypress E2E Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Run Cypress E2E Tests
+        uses: cypress-io/github-action@v6
+        with:
+          install-command: npm ci
+          start: npm start
+          wait-on: 'http://127.0.0.1:3000'
+          wait-on-timeout: 120
+          browser: chrome
+          config: video=false
+
+      - name: Upload Cypress Screenshots on Failure
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+          if-no-files-found: ignore

CONTRIBUTING.md

@@ -1,7 +1,7 @@
 ## <a name="CONTRIBUTING"></a>Contributing
 
 We welcome contributions of all kinds — whether it’s code,
-documentation, music, lesson plans, artwork, or ideas.  Music Blocks
+documentation, music, lesson plans, artwork, or ideas. Music Blocks
 is a community-driven project, and every meaningful contribution helps
 improve the platform for learners and educators around the world.
 
@@ -11,7 +11,6 @@ open issues or discussions to find a place to contribute.
 
 - [How to set up a local server](README.md#how-to-set-up-a-local-server)
 
-
 ### Special Notes
 
 Music Blocks is being built from the ground-up, to address several
@@ -53,7 +52,6 @@ following resources:
 Programmers, please follow these general [guidelines for
 contributions](https://github.com/sugarlabs/sugar-docs/blob/master/src/contributing.md).
 
-
 ### Before You Push
 
 Run these commands locally before submitting a PR:
@@ -64,8 +62,20 @@ npx prettier --check .    # Formatting
 npm test                  # Jest
 ```
 
+NOTE: Only run ```prettier``` on the files you have modified.
+
 If formatting fails, run `npx prettier --write .` to fix it.
 
+### After your PR is merged
+
+Please note that production deployments of Music Blocks are **manual**.
+
+This means that even after your pull request is merged, your changes may not immediately appear. Your update will become visible after the next official release is deployed.
+
+If your changes are not visible right away, it does **not** indicate a problem with your PR or implementation.
+
+This note is included to prevent contributors from spending time debugging caching or deployment issues unnecessarily.
+
 ### License Header
 
 Music Blocks is licensed under the [AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html).
@@ -129,60 +139,60 @@ Feel free. But, please don't spam :p.
 ### Keep in Mind
 
 1. Your contributions need not necessarily have to address any
-discovered issue. If you encounter any, feel free to add a fix through
-a PR, or create a new issue ticket.
+   discovered issue. If you encounter any, feel free to add a fix through
+   a PR, or create a new issue ticket.
 
 2. Use [labels](https://github.com/sugarlabs/musicblocks/labels) on
-your issues and PRs.
+   your issues and PRs.
 
 3. Please do not spam with many PRs consisting of little changes.
 
 4. If you are addressing a bulk change, divide your commits across
-multiple PRs, and send them one at a time. The fewer the number of
-files addressed per PR, the better.
+   multiple PRs, and send them one at a time. The fewer the number of
+   files addressed per PR, the better.
 
 5. Communicate effectively. Go straight to the point. You don't need
-to address anyone using '_sir_'. Don't write unnecessary comments;
-don't be over-apologetic. There is no superiority hierarchy. Every
-single contribution is welcome, as long as it doesn't spam or distract
-the flow.
+   to address anyone using '_sir_'. Don't write unnecessary comments;
+   don't be over-apologetic. There is no superiority hierarchy. Every
+   single contribution is welcome, as long as it doesn't spam or distract
+   the flow.
 
 6. Write useful, brief commit messages. Add commit descriptions if
-necessary. PR name should speak about what it is addressing and not
-the issue. In case a PR fixes an issue, use `fixes #ticketno` or
-`closes #ticketno` in the PR's comment. Briefly explain what your PR
-is doing.
+   necessary. PR name should speak about what it is addressing and not
+   the issue. In case a PR fixes an issue, use `fixes #ticketno` or
+   `closes #ticketno` in the PR's comment. Briefly explain what your PR
+   is doing.
 
 7. Always test your changes extensively before creating a PR. There's
-no sense in merging broken code. If a PR is a _work in progress
-(WIP)_, convert it to draft. It'll let the maintainers know it isn't
-ready for merging.
+   no sense in merging broken code. If a PR is a _work in progress
+   (WIP)_, convert it to draft. It'll let the maintainers know it isn't
+   ready for merging.
 
 8. Read and revise the concepts about programming constructs you're
-dealing with. You must be clear about the behavior of the language or
-compiler/transpiler. See [JavaScript
-docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript).
+   dealing with. You must be clear about the behavior of the language or
+   compiler/transpiler. See [JavaScript
+   docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript).
 
 9. If you have a question, do a _web search_ first. If you don't find
-any satisfactory answer, then ask it in a comment. If it is a general
-question about Music Blocks, please use the new
-[discussions](https://github.com/sugarlabs/musicblocks/discussions)
-tab on top the the repository, or the _Sugar-dev Devel
-<[sugar-devel@lists.sugarlabs.org](mailto:sugar-devel@lists.sugarlabs.org)>_
-mailing list. Don't ask silly questions (unless you don't know it is
-silly ;p) before searching it on the web.
+   any satisfactory answer, then ask it in a comment. If it is a general
+   question about Music Blocks, please use the new
+   [discussions](https://github.com/sugarlabs/musicblocks/discussions)
+   tab on top the the repository, or the _Sugar-dev Devel
+   <[sugar-devel@lists.sugarlabs.org](mailto:sugar-devel@lists.sugarlabs.org)>_
+   mailing list. Don't ask silly questions (unless you don't know it is
+   silly ;p) before searching it on the web.
 
 10. Work on things that matter. Follow three milestones: `Port Ready`,
-`Migration`, and `Future`.  Those tagged `Port Ready` are
-priority. Those tagged with `Migration` will be taken care of during
-or after the foundation rebuild. Feel free to participate in the
-conversation, adding valuable comments. Those tagged with `Future`
-need not be addressed presently.
+    `Migration`, and `Future`. Those tagged `Port Ready` are
+    priority. Those tagged with `Migration` will be taken care of during
+    or after the foundation rebuild. Feel free to participate in the
+    conversation, adding valuable comments. Those tagged with `Future`
+    need not be addressed presently.
 
 _Please note there is no need to ask permission to work on an
 issue. You should check for pull requests linked to an issue you are
 addressing; if there are none, then assume nobody has done
 anything. Begin to fix the problem, test, make your commits, push your
 commits, then make a pull request. Mention an issue number in the pull
 request, but not the commit message. These practices allow the
-competition of ideas (Sugar Labs is a meritocracy)._
+competition of ideas (Sugar Labs is a meritocracy)._

cypress/e2e/main.cy.js

@@ -14,7 +14,9 @@ describe("MusicBlocks Application", () => {
     describe("Loading and Initial Render", () => {
         it("should display the loading animation and then the main content", () => {
             cy.get("#loading-image-container").should("be.visible");
-            cy.contains("#loadingText", "Loading Complete!", { timeout: 20000 }).should("be.visible");
+            cy.contains("#loadingText", "Loading Complete!", { timeout: 20000 }).should(
+                "be.visible"
+            );
             cy.wait(10000);
             cy.get("#canvas", { timeout: 10000 }).should("be.visible");
         });
@@ -27,7 +29,7 @@ describe("MusicBlocks Application", () => {
     describe("Audio Controls", () => {
         it("should have a functional play button", () => {
             cy.get("#play").should("be.visible").click();
-            cy.window().then((win) => {
+            cy.window().then(win => {
                 const audioContext = win.Tone.context;
                 cy.wrap(audioContext.state).should("eq", "running");
             });
@@ -46,12 +48,9 @@ describe("MusicBlocks Application", () => {
         });
 
         it("should toggle full-screen mode", () => {
-            cy.get("#FullScreen").click();
+            cy.get("#FullScreen").should("be.visible").click();
             cy.wait(500);
-            cy.document().its("fullscreenElement").should("not.be.null");
-            cy.get("#FullScreen").click();
-            cy.wait(500);
-            cy.document().its("fullscreenElement").should("be.null");
+            cy.get("#FullScreen").should("be.visible").click();
         });
 
         it("should toggle the toolbar menu", () => {
@@ -81,9 +80,7 @@ describe("MusicBlocks Application", () => {
         });
 
         it('should click the New File button and verify "New Project" appears', () => {
-            cy.get("#newFile > .material-icons")
-                .should("exist")
-                .and("be.visible");
+            cy.get("#newFile > .material-icons").should("exist").and("be.visible");
             cy.get("#newFile > .material-icons").click();
             cy.wait(500);
             cy.contains("New project").should("be.visible");
@@ -99,7 +96,7 @@ describe("MusicBlocks Application", () => {
                 "#Decrease\\ block\\ size > img",
                 "#Increase\\ block\\ size > img"
             ];
-        
+
             bottomBarElements.forEach(selector => {
                 cy.get(selector).should("exist").and("be.visible");
             });
@@ -111,21 +108,14 @@ describe("MusicBlocks Application", () => {
                 "tr > :nth-child(2) > img",
                 "tr > :nth-child(3) > img"
             ];
-        
+
             sidebarElements.forEach(selector => {
-                cy.get(selector)
-                    .should("exist")
-                    .and("be.visible")
-                    .click();
+                cy.get(selector).should("exist").and("be.visible").click();
             });
         });
 
         it("should verify that Grid, Clear, and Collapse elements exist and are visible", () => {
-            const elements = [
-                "#Grid > img",
-                "#Clear",
-                "#Collapse > img"
-            ];
+            const elements = ["#Grid > img", "#Clear", "#Collapse > img"];
             elements.forEach(selector => {
                 cy.get(selector).should("exist").and("be.visible");
             });
@@ -149,12 +139,12 @@ describe("MusicBlocks Application", () => {
                 .and("have.attr", "src")
                 .and("not.be.empty");
 
-            cy.get("#planet-iframe").then(($iframe) => {
+            cy.get("#planet-iframe").then($iframe => {
                 const iframeSrc = $iframe.attr("src");
                 cy.log("Iframe source:", iframeSrc);
             });
 
-            cy.window().then((win) => {
+            cy.window().then(win => {
                 win.document.getElementById("planet-iframe").style.display = "block";
             });
         });

dist/css/style.css

@@ -104,4 +104,30 @@ input[type="range"]:focus::-ms-fill-upper {
   position: absolute;
   cursor: pointer;
 }
+
+/* Keyboard navigation focus state for toolbar buttons */
+.toolbar-btn-focused {
+  background-color: rgba(0, 0, 0, 0.25) !important;
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
+
+/* Dark mode focus - brighten the background */
+body.dark .toolbar-btn-focused,
+.dark-theme .toolbar-btn-focused {
+  background-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+/* Keyboard navigation focus state for dropdown menu items */
+.dropdown-item-focused {
+  background-color: rgba(0, 150, 136, 0.2) !important;
+}
+
+/* Keyboard navigation focus state for modal dialog buttons */
+.modal-btn-focused {
+  outline: 3px solid #009688 !important;
+  outline-offset: 2px;
+  box-shadow: 0 0 8px rgba(0, 150, 136, 0.5) !important;
+}
+
 html, body { overscroll-behavior-x: none; }