Issue 11450 Adding keyboard accessibility to task board controls and purchases (#12363)

* intial draft adding keyboard accessibility to task board controls

* cleanup

* finish adding keyboard accessibility for task dropdown, rewards

* add notEnough conditions to disable purchase button

* fix(lint): remove console.log from buy modal

* add missing comma, use focus-within instead of focus-visible

* missed one more focus visible

* override browser default focus styling

* move focus styling to tasks only

* add rounded border

* fix element height on focus, rounded borders

* fix dropdown margin to avoid element resizing

* styling updates on focus

* fix spacing around task checklist

* fix border around dropdown item

* remove spacing that made tasks with notes jump

* keep disabled habit control styling when not focused

* revert unintended spacing

Co-authored-by: Matteo Pagliazzi <matteopagliazzi@gmail.com>

website/client/src/components/tasks/column.vue

@@ -31,6 +31,8 @@
           class="filter small-text"
           :class="{active: activeFilter.label === filter}"
           @click="activateFilter(type, filter)"
+          @keypress.enter="activateFilter(type, filter)"
+          tabindex="0"
         >
           {{ $t(filter) }}
         </div>
@@ -128,6 +130,7 @@
               <span
                 class="badge-top"
                 @click.prevent.stop="togglePinned(ctx.item)"
+                @keypress.enter.prevent.stop="togglePinned(ctx.item)"
               >
                 <pin-badge
                   :pinned="ctx.item.pinned"
@@ -156,6 +159,10 @@
     display: block;
   }
 
+  .item:focus-within .badge-pin {
+    display: block;
+  }
+
   .tasks-column {
     min-height: 556px;
   }