docs(challenge-04): keyboard and screen reader steps for creating a branch (#259)

The branch field both filters existing branches and names a new one, so a
screen reader user hears that no branches match and then has to Tab past the
Tags tab to reach Create branch. The Challenge 4 template (both copies), the
challenge hub, the reference solution and the Day 1 agenda now say so.

Closes #246. Reported by @DebeeArmstrong; the wording draws on pull requests
#256 and #257 by @abinyads-dev and #258 by @Valeriia458.





Claude-Session: https://claude.ai/code/session_01PmRBrUTuhzYnQBFxUCN6Vr

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: DebeeArmstrong <DebeeArmstrong@users.noreply.github.com>
Co-authored-by: abinyads-dev <abinyads-dev@users.noreply.github.com>
Co-authored-by: Valeriia458 <Valeriia458@users.noreply.github.com>

Author: 5 people

.github/ISSUE_TEMPLATE/challenge-04-branch-out.yml

@@ -15,9 +15,11 @@ body:
         ### Instructions
 
         1. Make sure you are on the **Code** tab of the learning-room repository.
-        2. Find the branch dropdown (it shows "main" by default).
-        3. Type `learn/YOUR-USERNAME` (replace YOUR-USERNAME with your actual GitHub username).
-        4. Select **Create branch: learn/YOUR-USERNAME from main**.
+        2. Find the branch button near the top of the file list. It shows the current branch, so a screen reader reads it as "main branch". Press `Enter` or `Space` to open it.
+        3. A text field opens. It is labelled for finding branches, and it is also where you type the name of a **new** branch. Type `learn/YOUR-USERNAME` (replace YOUR-USERNAME with your actual GitHub username).
+        4. GitHub may announce that no branches match. That is expected: the branch does not exist yet.
+        5. Press `Tab` until you reach **Create branch: learn/YOUR-USERNAME from main**. It is usually two presses, past the Tags tab. Press `Enter` or `Space`.
+        6. GitHub creates the branch and switches you to it. The branch button now reads `learn/YOUR-USERNAME`.
 
         ### Branch naming convention
 
@@ -51,7 +53,8 @@ body:
 
         | Symptom | Try this |
         |---|---|
-        | I cannot find the branch dropdown | Look for a button that says "main" with a dropdown arrow, near the top-left of the file list. Screen reader users: it is a button labeled "Switch branches/tags". |
+        | I cannot find the branch dropdown | Look for a button that says "main" with a dropdown arrow, near the top-left of the file list. Screen readers read it as "main branch". |
+        | I typed the name and it says no branches were found | That is expected for a new branch. Press `Tab` until you reach **Create branch**, then press `Enter`. |
         | It says the branch already exists | If you already created it, you are done. Switch to it and confirm your username is in the name. |
         | I typed the name wrong | Create a new branch with the correct name. The old one will not cause problems. |
         | I finished but want to check my work | [View the reference solution](https://github.com/Community-Access/git-going-with-github/blob/main/docs/solutions/solution-04-branch-out.md) |

admin/DAY1_AGENDA.md

@@ -253,9 +253,9 @@ Challenge 4 asks you to create a personal branch named `learn/YOUR-USERNAME`.
 **Step by step:**
 
 1. Make sure you are on the Code tab of your repository
-2. Find the branch dropdown (it shows "main" by default) -- use `B` to navigate buttons
-3. Type `learn/YOUR-USERNAME` (replace with your actual GitHub username)
-4. Select "Create branch: learn/YOUR-USERNAME from main"
+2. Find the branch dropdown (it shows "main" by default; screen readers read "main branch") -- use `B` to navigate buttons, then press `Enter`
+3. In the text field that opens, type `learn/YOUR-USERNAME` (replace with your actual GitHub username). The field also filters existing branches, so "no branches found" is expected
+4. Press `Tab` until you reach "Create branch: learn/YOUR-USERNAME from main" (usually two presses, past the Tags tab), then press `Enter` or `Space`
 
 > **Why branches matter:** A branch is your private workspace. You can make changes without affecting anyone else. When you are ready, you open a pull request to propose merging your changes into `main`. This is how every contribution works in open source.
 

docs/CHALLENGES.md

@@ -80,8 +80,9 @@ A branch is a safe workspace. It lets you try a change without rewriting the mai
 
 **What to do:**
 
-- Find the branch selector on the Code tab
-- Create a branch named `learn/YOUR-USERNAME` from `main`
+- Find the branch selector on the Code tab. Screen readers read it as "main branch".
+- Open it. The text field that opens is for finding branches and also for naming a new one. Type `learn/YOUR-USERNAME`; "no branches found" is expected.
+- Press `Tab` until you reach **Create branch: learn/YOUR-USERNAME from main** (usually two presses, past the Tags tab), then press `Enter` or `Space`
 - Confirm the branch selector now names your branch
 
 **Evidence to post:** Write the branch name you created and how you confirmed you were on it.

docs/solutions/solution-04-branch-out.md

@@ -5,11 +5,11 @@ This shows how to create a branch from each tool. You only needed to use one.
 ## On github.com
 
 1. Go to the repository's Code tab
-2. Click the branch dropdown (it says "main")
-3. Type a new branch name like `fix/welcome-todo`
-4. Click "Create branch: fix/welcome-todo from main"
+2. Open the branch dropdown (it says "main"; a screen reader reads it as "main branch")
+3. Type a new branch name like `fix/welcome-todo` in the text field that opens. The same field filters existing branches and names a new one, so "no branches found" is expected
+4. Select "Create branch: fix/welcome-todo from main". With a keyboard, press `Tab` until you reach it (usually two presses, past the Tags tab), then press `Enter` or `Space`
 
-The branch now exists on GitHub. You can switch to it using the same dropdown.
+The branch now exists on GitHub and is active. You can switch to it using the same dropdown.
 
 ## In VS Code (with Git)
 

html/admin/DAY1_AGENDA.html

@@ -574,9 +574,9 @@ <h3 id="part-a---challenge-4-branch-out-20-min">Part A - Challenge 4: Branch Out
 <p><strong>Step by step:</strong></p>
 <ol>
 <li>Make sure you are on the Code tab of your repository</li>
-<li>Find the branch dropdown (it shows &quot;main&quot; by default) -- use <code>B</code> to navigate buttons</li>
-<li>Type <code>learn/YOUR-USERNAME</code> (replace with your actual GitHub username)</li>
-<li>Select &quot;Create branch: learn/YOUR-USERNAME from main&quot;</li>
+<li>Find the branch dropdown (it shows &quot;main&quot; by default; screen readers read &quot;main branch&quot;) -- use <code>B</code> to navigate buttons, then press <code>Enter</code></li>
+<li>In the text field that opens, type <code>learn/YOUR-USERNAME</code> (replace with your actual GitHub username). The field also filters existing branches, so &quot;no branches found&quot; is expected</li>
+<li>Press <code>Tab</code> until you reach &quot;Create branch: learn/YOUR-USERNAME from main&quot; (usually two presses, past the Tags tab), then press <code>Enter</code> or <code>Space</code></li>
 </ol>
 <blockquote>
 <p><strong>Why branches matter:</strong> A branch is your private workspace. You can make changes without affecting anyone else. When you are ready, you open a pull request to propose merging your changes into <code>main</code>. This is how every contribution works in open source.</p>

html/docs/CHALLENGES.html

@@ -284,8 +284,9 @@ <h2 id="day-1-you-belong-here-challenges-1-9">Day 1: You Belong Here (Challenges
 <p>A branch is a safe workspace. It lets you try a change without rewriting the main version of the project. In this challenge, you create your own branch and confirm that you know where your work will happen.</p>
 <p><strong>What to do:</strong></p>
 <ul>
-<li>Find the branch selector on the Code tab</li>
-<li>Create a branch named <code>learn/YOUR-USERNAME</code> from <code>main</code></li>
+<li>Find the branch selector on the Code tab. Screen readers read it as &quot;main branch&quot;.</li>
+<li>Open it. The text field that opens is for finding branches and also for naming a new one. Type <code>learn/YOUR-USERNAME</code>; &quot;no branches found&quot; is expected.</li>
+<li>Press <code>Tab</code> until you reach <strong>Create branch: learn/YOUR-USERNAME from main</strong> (usually two presses, past the Tags tab), then press <code>Enter</code> or <code>Space</code></li>
 <li>Confirm the branch selector now names your branch</li>
 </ul>
 <p><strong>Evidence to post:</strong> Write the branch name you created and how you confirmed you were on it.</p>

html/docs/solutions/solution-04-branch-out.html

@@ -220,11 +220,11 @@ <h2 class="onpage-title">On This Page</h2>
 <h2 id="on-githubcom">On github.com</h2>
 <ol>
 <li>Go to the repository&#39;s Code tab</li>
-<li>Click the branch dropdown (it says &quot;main&quot;)</li>
-<li>Type a new branch name like <code>fix/welcome-todo</code></li>
-<li>Click &quot;Create branch: fix/welcome-todo from main&quot;</li>
+<li>Open the branch dropdown (it says &quot;main&quot;; a screen reader reads it as &quot;main branch&quot;)</li>
+<li>Type a new branch name like <code>fix/welcome-todo</code> in the text field that opens. The same field filters existing branches and names a new one, so &quot;no branches found&quot; is expected</li>
+<li>Select &quot;Create branch: fix/welcome-todo from main&quot;. With a keyboard, press <code>Tab</code> until you reach it (usually two presses, past the Tags tab), then press <code>Enter</code> or <code>Space</code></li>
 </ol>
-<p>The branch now exists on GitHub. You can switch to it using the same dropdown.</p>
+<p>The branch now exists on GitHub and is active. You can switch to it using the same dropdown.</p>
 <h2 id="in-vs-code-with-git">In VS Code (with Git)</h2>
 <pre><code class="hljs"><span class="hljs-symbol">git</span> checkout -<span class="hljs-keyword">b</span> fix/welcome-todo</code></pre>
 <p>Or use the Source Control sidebar: click the branch name in the bottom-left status bar, then select &quot;Create new branch.&quot;</p>