Merge pull request #216 from doubletaco/master

Accessibility improvements

.github/FUNDING.yml

@@ -3,7 +3,7 @@
 github: builder555 # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 # patreon: # Replace with a single Patreon username
 # open_collective: # Replace with a single Open Collective username
-# ko_fi: # Replace with a single Ko-fi username
+ko_fi: builder555 # Replace with a single Ko-fi username
 # tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 # community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 # liberapay: # Replace with a single Liberapay username

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## v2.2.9
+
+* fix: better type annotations [1cde711](https://github.com/builder555/PineSAM/commit/1cde711445b6886366559a021e03ce801a5d2d72)
+* fix: add shortcut to format with black [639940c](https://github.com/builder555/PineSAM/commit/639940ceb0c5dcb2ddeae1f67fb6bf50f32919bc)
+* fix: bug when holding a mouse key and leaving + or - button [f20a562](https://github.com/builder555/PineSAM/commit/f20a562d90b964c72ab3e24c3cfbb91451066bf2)
+
+## v2.2.6
+
+* fix: clean up ui opening [fc5e548](https://github.com/builder555/PineSAM/commit/fc5e548df06acd38ca424984a3f7282199142501)
+
+## v2.2.5
+
+* fix: removed bluetooth check, better args parsing, auto-open browser from python [1ce7469](https://github.com/builder555/PineSAM/commit/1ce74692e45e81183e9dbb4d22e05d1b1f096b71)
+* fix: use PineSAM as name for binary [15707a8](https://github.com/builder555/PineSAM/commit/15707a8bd0a68fd0fa5f94149df90b9295c95fcd)
+
 ## v2.2.3
 
 * fix: add missing library [a170f33](https://github.com/builder555/PineSAM/commit/a170f335d2b672ceab58204ffc17bf926388315f)

Readme.md

@@ -183,9 +183,9 @@ pipenv run test
 <tr>
     <td align="center" style="word-wrap: break-word; width: 150.0; height: 150.0">
         <a href=https://github.com/builder555>
-            <img src=https://avatars.githubusercontent.com/u/85308587?v=4 width="100;"  style="border-radius:50%;align-items:center;justify-content:center;overflow:hidden;padding-top:10px" alt=Robert'); DROP TABLE students; --/>
+            <img src=https://avatars.githubusercontent.com/u/85308587?v=4 width="100;"  style="border-radius:50%;align-items:center;justify-content:center;overflow:hidden;padding-top:10px" alt=builder555/>
             <br />
-            <sub style="font-size:14px"><b>Robert'); DROP TABLE students; --</b></sub>
+            <sub style="font-size:14px"><b>builder555</b></sub>
         </a>
     </td>
     <td align="center" style="word-wrap: break-word; width: 150.0; height: 150.0">

ui/src/components/SettingCheckbox.vue

@@ -10,8 +10,8 @@ const cbName = 'cb-' + Math.random().toString(36);
       :checked="setting.value"
       :id="cbName"
       type="checkbox"
+      :aria-labelledby="`lbl_${ name }`"
       @change="store.updateSetting(name, $event.target.checked)"
     />
-    <label :for="cbName"></label>
   </div>
 </template>

ui/src/components/SettingDropdown.vue

@@ -10,7 +10,7 @@ watch(localValue, (value) => {
 </script>
 <template>
   <div class="is-flex-grow-1">
-    <select v-model="localValue" class="input py-0" style="height: auto">
+    <select :aria-labelledby="`lbl_${ name }`" v-model="localValue" class="input py-0" style="height: auto">
       <option v-for="option in setting.component.options" :key="option.value" :value="option.value">
         {{ option.text }}
       </option>

ui/src/components/SettingSlider.vue

@@ -35,6 +35,7 @@ watch(
   <div class="is-flex is-flex-grow-1">
     <input
       type="range"
+      :aria-labelledby="`lbl_${ name }`"
       class="mr-1 is-flex-grow-1"
       :min="setting.component.min"
       :max="setting.component.max"

ui/src/components/TheSettings.vue

@@ -84,12 +84,14 @@ for (const group of groups.value) {
   <div v-if="Object.keys(settings).length > 0" class="columns is-multiline restore-click">
     <div v-for="group in groups" :key="group.name" class="column is-4-widescreen is-6-tablet is-12-mobile">
       <div class="card no-shadow">
-        <header class="card-header navbar-link is-arrowless settings-header" @click="toggleGroup(group)">
+        <button class="card-header navbar-link is-arrowless settings-header"  style="border: 0cap;" @click="toggleGroup(group)" :aria-expanded="group.isVisible">
+        <h3 class="card-header navbar-link is-arrowless settings-header" >
           <p class="card-header-title">{{ group.name }}</p>
           <span class="icon">
             <i class="fa" :class="group.isVisible ? 'fa-angle-down' : 'fa-angle-right'"></i>
           </span>
-        </header>
+        </h3>
+        </button>
         <div v-show="group.isVisible" class="card-content">
           <form @submit.prevent="">
             <div
@@ -99,7 +101,8 @@ for (const group of groups.value) {
               class="mfield"
             >
               <div class="column is-half px-0">
-                <label class="label">{{ settings[name].display }}</label>
+                <label :id="'lbl_' + name" class="label">{{ settings[name].display }}</label>
+                
               </div>
               <div class="column is-half is-flex is-justify-content-end px-0">
                 <component
@@ -109,7 +112,7 @@ for (const group of groups.value) {
                   :name="name"
                 />
                 <div v-else>
-                  <input :value="settings[name].value" class="input py-0" type="text" style="height: auto" disabled />
+                  <input :aria-labelledby="`lbl_${ name }`" :value="settings[name].value" class="input py-0" type="text" style="height: auto" disabled />
                 </div>
               </div>
               <p v-show="isHintVisible" class="help">{{ settings[name].hint }}</p>

ui/src/components/TheWorkView.vue

@@ -75,6 +75,7 @@ const setExactTemperature = (temp) => {
       <div class="buttons are-large">
         <button
           class="button change minus primary"
+          aria-label="Decrease Temperature"
           @click="changeTemperature(-1)"
           @touchstart="onChangeTempBtnDown(-1)"
           @mousedown.left="onChangeTempBtnDown(-1)"
@@ -87,6 +88,7 @@ const setExactTemperature = (temp) => {
         </button>
         <button
           class="button change plus primary"
+          aria-label="Increase Temperature"
           @click="changeTemperature(1)"
           @touchstart="onChangeTempBtnDown(1)"
           @mousedown.left="onChangeTempBtnDown(1)"
@@ -98,7 +100,7 @@ const setExactTemperature = (temp) => {
           <i class="fas fa-plus"></i>
         </button>
       </div>
-      <div style="font-size: 0.3em; margin-bottom: 0.8em">
+      <div role="alert" style="font-size: 0.3em; margin-bottom: 0.8em">
         SET {{ store.settings?.SetTemperature?.value }}&deg;{{ store.settings?.TemperatureUnit?.value ? 'F' : 'C' }}
       </div>
       <i