Add aria-label to elements in the helloworld app templates (#4760)

* Add aria-label to elements in the helloworld app templates so they can be directly tested by Appium based E2E test clients

* changelog updated

* fix: restore UNRELEASED_CHANGELOG.md to correct state

Remove accidentally merged changelog entries from other PRs and
restore the base entries from v3-alpha with only this PR's changelog entry.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Lea Anthony <lea.anthony@gmail.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

v3/UNRELEASED_CHANGELOG.md

@@ -1,6 +1,6 @@
 # Unreleased Changes
 
-<!--
+<!-- 
 This file is used to collect changelog entries for the next v3-alpha release.
 Add your changes under the appropriate sections below.
 
@@ -17,15 +17,16 @@ After processing, the content will be moved to the main changelog and this file
 
 ## Added
 <!-- New features, capabilities, or enhancements -->
+- Add origin to raw message handler by @APshenkin in [PR](https://github.com/wailsapp/wails/pull/4710)
+- Add universal link support for macOS by @APshenkin in [PR](https://github.com/wailsapp/wails/pull/4712)
+- Refactor binding transport layer by @APshenkin in [PR](https://github.com/wailsapp/wails/pull/4702)
+- Add aria-label identifiers to the helloworld templates so that the example app can be easily tested by Appium test clients by @chinenual in [PR](https://github.com/wailsapp/wails/pull/4760)
 
 ## Changed
 <!-- Changes in existing functionality -->
 
 ## Fixed
 <!-- Bug fixes -->
-- Added missing window name to request headers, so it can be logged with the window ID by @jasikpark in [#4687](https://github.com/wailsapp/wails/pull/4687)
-
-- Fix issue where `common:update:build-assets` command overwrites instead of updating plist files by @rxliuli in [#4636](https://github.com/wailsapp/wails/pull/4636)
 
 ## Deprecated
 <!-- Soon-to-be removed features -->

v3/internal/templates/base/frontend/index.html

@@ -19,10 +19,10 @@
     </div>
     <h1>Wails + Javascript</h1>
     <div class="card">
-        <div class="result" id="result">Please enter your name below 👇</div>
+        <div aria-label="result" class="result" id="result">Please enter your name below 👇</div>
         <div class="input-box" id="input">
-            <input class="input" id="name" type="text" autocomplete="off"/>
-            <button class="btn" onclick="doGreet()">Greet</button>
+            <input aria-label="input" class="input" id="name" type="text" autocomplete="off"/>
+            <button aria-label="greet-btn" class="btn" onclick="doGreet()">Greet</button>
         </div>
     </div>
     <div class="footer">

v3/internal/templates/lit-ts/frontend/src/my-element.ts.tmpl

@@ -53,12 +53,12 @@ export class MyElement extends LitElement {
                     </a>
                 </div>
                 <slot></slot>
-                <div class="result">${this.result}</div>
+                <div aria-label="result" class="result">${this.result}</div>
                 <div class="card">
                     <div class="input-box">
-                        <input class="input" .value=${this.name} @input=${(e: InputEvent) => this.name = (e.target as HTMLInputElement).value} type="text"
+                        <input aria-label="input" class="input" .value=${this.name} @input=${(e: InputEvent) => this.name = (e.target as HTMLInputElement).value} type="text"
                                autocomplete="off"/>
-                        <button class="btn" @click=${this.doGreet}>Greet</button>
+                        <button aria-label="greet-btn" class="btn" @click=${this.doGreet}>Greet</button>
                     </div>
                 </div>
                 <div class="footer">

v3/internal/templates/lit/frontend/src/my-element.js.tmpl

@@ -43,12 +43,12 @@ export class MyElement extends LitElement {
                     </a>
                 </div>
                 <slot></slot>
-                <div class="result">${this.result}</div>
+                <div aria-label="result" class="result">${this.result}</div>
                 <div class="card">
                     <div class="input-box">
-                        <input class="input" .value=${this.name} @input=${e => this.name = e.target.value} type="text"
+                        <input aria-label="input" class="input" .value=${this.name} @input=${e => this.name = e.target.value} type="text"
                                autocomplete="off"/>
-                        <button class="btn" @click=${this.doGreet}>Greet</button>
+                        <button aria-label="greet-btn" class="btn" @click=${this.doGreet}>Greet</button>
                     </div>
                 </div>
                 <div class="footer">

v3/internal/templates/qwik-ts/frontend/src/app.tsx.tmpl

@@ -38,11 +38,11 @@ export const App = component$(() => {
         </a>
       </div>
       <h1>Wails + Qwik</h1>
-      <div class="result">{result.value}</div>
+      <div aria-label="result" class="result">{result.value}</div>
       <div class="card">
         <div class="input-box">
-          <input class="input" value={name.value} onInput$={(e: InputEvent) => name.value = (e.target as HTMLInputElement).value} type="text" autocomplete="off"/>
-          <button class="btn" onClick$={doGreet}>Greet</button>
+          <input aria-label="input" class="input" value={name.value} onInput$={(e: InputEvent) => name.value = (e.target as HTMLInputElement).value} type="text" autocomplete="off"/>
+          <button aria-label="greet-btn" class="btn" onClick$={doGreet}>Greet</button>
         </div>
       </div>
       <div class="footer">

v3/internal/templates/qwik/frontend/src/app.jsx.tmpl

@@ -38,11 +38,11 @@ export const App = component$(() => {
         </a>
       </div>
       <h1>Wails + Qwik</h1>
-      <div class="result">{result.value}</div>
+      <div aria-label="result" class="result">{result.value}</div>
       <div class="card">
         <div class="input-box">
-          <input class="input" value={name.value} onInput$={(e) => name.value = e.target.value} type="text" autocomplete="off"/>
-          <button class="btn" onClick$={doGreet}>Greet</button>
+          <input aria-label="input" class="input" value={name.value} onInput$={(e) => name.value = e.target.value} type="text" autocomplete="off"/>
+          <button aria-label="greet-btn" class="btn" onClick$={doGreet}>Greet</button>
         </div>
       </div>
       <div class="footer">

v3/internal/templates/solid-ts/frontend/src/App.tsx.tmpl

@@ -36,11 +36,11 @@ function App() {
         </a>
       </div>
       <h1>Wails + Solid</h1>
-      <div class="result">{result()}</div>
+      <div aria-label="result" class="result">{result()}</div>
       <div class="card">
         <div class="input-box">
-          <input class="input" value={name()} onInput={(e) => setName(e.currentTarget.value)} type="text" autocomplete="off"/>
-          <button class="btn" onClick={doGreet}>Greet</button>
+          <input aria-label="input" class="input" value={name()} onInput={(e) => setName(e.currentTarget.value)} type="text" autocomplete="off"/>
+          <button aria-label="greet-btn" class="btn" onClick={doGreet}>Greet</button>
         </div>
       </div>
       <div class="footer">

v3/internal/templates/svelte-ts/frontend/src/App.svelte.tmpl

@@ -33,11 +33,11 @@
     </span>
   </div>
   <h1>Wails + Svelte</h1>
-  <div class="result">{result}</div>
+  <div aria-label="result" class="result">{result}</div>
   <div class="card">
     <div class="input-box">
-      <input class="input" bind:value={name} type="text" autocomplete="off"/>
-      <button class="btn" on:click={doGreet}>Greet</button>
+      <input aria-label="input" class="input" bind:value={name} type="text" autocomplete="off"/>
+      <button aria-label="greet-btn" class="btn" on:click={doGreet}>Greet</button>
     </div>
   </div>
   <div class="footer">

v3/internal/templates/svelte/frontend/src/App.svelte.tmpl

@@ -33,11 +33,11 @@ Events.On('time', (timeValue) => {
     </span>
   </div>
   <h1>Wails + Svelte</h1>
-  <div class="result">{result}</div>
+  <div aria-label="result" class="result">{result}</div>
   <div class="card">
     <div class="input-box">
-      <input class="input" bind:value={name} type="text" autocomplete="off"/>
-      <button class="btn" on:click={doGreet}>Greet</button>
+      <input aria-label="input" class="input" bind:value={name} type="text" autocomplete="off"/>
+      <button aria-label="greet-btn" class="btn" on:click={doGreet}>Greet</button>
     </div>
   </div>
   <div class="footer">

v3/internal/templates/sveltekit-ts/frontend/src/routes/+page.svelte.tmpl

@@ -33,11 +33,11 @@ Events.On('time', (timeValue) => {
     </span>
   </div>
   <h1>Wails + Svelte</h1>
-  <div class="result">{result}</div>
+  <div aria-label="result" class="result">{result}</div>
   <div class="card">
     <div class="input-box">
-      <input class="input" bind:value={name} type="text" autocomplete="off"/>
-      <button class="btn" on:click={doGreet}>Greet</button>
+      <input aria-label="input" class="input" bind:value={name} type="text" autocomplete="off"/>
+      <button aria-label="greet-btn" class="btn" on:click={doGreet}>Greet</button>
     </div>
   </div>
   <div class="footer">

v3/internal/templates/sveltekit/frontend/src/routes/+page.svelte.tmpl

@@ -33,11 +33,11 @@ Events.On('time', (timeValue) => {
     </span>
   </div>
   <h1>Wails + Svelte</h1>
-  <div class="result">{result}</div>
+  <div aria-label="result" class="result">{result}</div>
   <div class="card">
     <div class="input-box">
-      <input class="input" bind:value={name} type="text" autocomplete="off"/>
-      <button class="btn" on:click={doGreet}>Greet</button>
+      <input aria-label="input" class="input" bind:value={name} type="text" autocomplete="off"/>
+      <button aria-label="greet-btn" class="btn" on:click={doGreet}>Greet</button>
     </div>
   </div>
   <div class="footer">

v3/internal/templates/vanilla-ts/frontend/index.html

@@ -18,11 +18,11 @@
         </a>
     </div>
     <h1>Wails + Typescript</h1>
-    <div class="result" id="result">Please enter your name below 👇</div>
+    <div aria-label="result" class="result" id="result">Please enter your name below 👇</div>
     <div class="card">
         <div class="input-box" id="input">
-            <input class="input" id="name" type="text" autocomplete="off"/>
-            <button class="btn" id="greet">Greet</button>
+            <input aria-label="input" class="input" id="name" type="text" autocomplete="off"/>
+            <button aria-label="greet-btn" class="btn" id="greet">Greet</button>
         </div>
     </div>
     <div class="footer">

v3/internal/templates/vanilla/frontend/index.html

@@ -19,10 +19,10 @@
     </div>
     <h1>Wails + Javascript</h1>
     <div class="card">
-        <div class="result" id="result">Please enter your name below 👇</div>
+        <div aria-label="result" class="result" id="result">Please enter your name below 👇</div>
         <div class="input-box" id="input">
-            <input class="input" id="name" type="text" autocomplete="off"/>
-            <button class="btn" onclick="doGreet()">Greet</button>
+            <input aria-label="input" class="input" id="name" type="text" autocomplete="off"/>
+            <button aria-label="greet-btn" class="btn" onclick="doGreet()">Greet</button>
         </div>
     </div>
     <div class="footer">

v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue.tmpl

@@ -32,11 +32,11 @@ onMounted(() => {
 <template>
   <h1>{{ "{{" }} msg {{ "}}" }}</h1>
 
-  <div class="result">{{ "{{" }} result {{ "}}" }}</div>
+  <div aria-label="result" class="result">{{ "{{" }} result {{ "}}" }}</div>
   <div class="card">
     <div class="input-box">
-      <input class="input" v-model="name" type="text" autocomplete="off"/>
-      <button class="btn" @click="doGreet">Greet</button>
+      <input aria-label="input" class="input" v-model="name" type="text" autocomplete="off"/>
+      <button aria-label="greet-btn" class="btn" @click="doGreet">Greet</button>
     </div>
   </div>
 

v3/internal/templates/vue/frontend/src/components/HelloWorld.vue.tmpl

@@ -34,11 +34,11 @@ defineProps({
 <template>
   <h1>{{ "{{" }} msg {{ "}}" }}</h1>
 
-  <div class="result">{{ "{{" }} result {{ "}}" }}</div>
+  <div aria-label="result" class="result">{{ "{{" }} result {{ "}}" }}</div>
   <div class="card">
     <div class="input-box">
-      <input class="input" v-model="name" type="text" autocomplete="off"/>
-      <button class="btn" @click="doGreet">Greet</button>
+      <input aria-label="input" class="input" v-model="name" type="text" autocomplete="off"/>
+      <button aria-label="greet-btn" class="btn" @click="doGreet">Greet</button>
     </div>
   </div>