feat: moved accessibility global class script into an external mixin.

removed duplicate accesibility scripts from Base button, radio, and switch

dev/views/ButtonGroup.vue

@@ -27,6 +27,56 @@
  label="Contractors"
  disabled/>
  </FishTankButtonGroup>
+ <br>
+ <FishTankButtonGroup small>
+ <FishTankBGButton
+ v-model="bgValue"
+ value="All"
+ label="All"/>
+ <FishTankBGButton
+ v-model="bgValue"
+ value="Members"
+ label="Members"/>
+ <FishTankBGButton
+ v-model="bgValue" 
+ value="Staff"
+ label="Staff"/>
+ <FishTankBGButton
+ v-model="bgValue"
+ value="Agency"
+ label="Agency"/>
+ <FishTankBGButton 
+ v-model="bgValue"
+ value="Lobbyist"
+ label="Lobbyist"/>
+ <FishTankBGButton 
+ v-model="bgValue"
+ value="Contractors"
+ label="Contractors"
+ disabled/>
+ </FishTankButtonGroup>
+ <br>
+ <FishTankButtonGroup>
+ <FishTankBGButton
+ v-model="bgValueAlt"
+ value="All"
+ label="All"/>
+ <FishTankBGButton
+ v-model="bgValueAlt"
+ value="Members"
+ label="Members"/>
+ <FishTankBGButton
+ v-model="bgValueAlt" 
+ value="Staff"
+ label="Staff"/>
+ </FishTankButtonGroup>
+
+ <div v-if="bgValue ==='All'"> All Tab</div>
+ <div v-if="bgValue ==='Members'">Members Tab</div>
+ <div v-if="bgValue ==='Staff'">Staff Tab</div>
+ <div v-if="bgValue ==='Agency'">Agency Tab</div>
+ <div v-if="bgValue ==='Lobbyist'">Lobbyist Tab</div>
+ <div v-if="bgValue ===' Contractors'">Contractors Tab</div>
  </div>
 </template>
 <script lang="ts">
@@ -40,7 +90,9 @@ export default Vue.extend({
  },
  data: function(){
  return {
- bgValue:"Members"
+ bgValue:"Lobbyist",
+ bgValueAltBeta:"All",
+ bgValueAlt:"Staff"
  }
  }
 })

src/components/BaseButton.vue

@@ -10,28 +10,13 @@
 
 <script lang="ts">
 import Vue from "vue"
-
-function handleFirstTab(e:KeyboardEvent) {
- if (e.keyCode === 9) {
- document.body.classList.add('user-is-tabbing');
- 
- window.removeEventListener('keydown', handleFirstTab);
- window.addEventListener('mousedown', handleMouseDownOnce);
- }
-}
-
-function handleMouseDownOnce() {
- document.body.classList.remove('user-is-tabbing');
- 
- window.removeEventListener('mousedown', handleMouseDownOnce);
- window.addEventListener('keydown', handleFirstTab);
-}
-
-window.addEventListener('keydown', handleFirstTab);
-
+import a11y from '@/util/a11y'
 
 export default Vue.extend({
  name: "BaseButton",
+ mixins:[
+ a11y
+ ],
  props: {
  disabled: {
  type: Boolean,

src/components/FishTankButtonGroup.vue

@@ -1,17 +1,41 @@
 <template>
- <div 
- :class="[{'ft-small':small}, 'ft-buttongroup']">
+ <div
+ :id="(id !==null? id: labelId)"
+ :aria-labelledby="'ft-buttongroup'+(id !==null? id: labelId)" 
+ :class="[ 'ft-buttongroup',{'ft-buttongroup__small':small}, {'ft-buttongroup--is-focused':isFocused}]"
+ tabindex="0">
  <slot/>
  </div>
 </template>
 <script lang="ts">
 import Vue from 'vue'
-import { setTimeout } from 'timers';
+import a11y from '@/util/a11y'
+
 export default Vue.extend({
+ mixins:[
+ a11y
+ ],
  model:{
  prop: 'modelValue',
  event:'change'
  },
+ provide: function(){
+ const fishtankButtonGroupShared = {}
+
+ Object.defineProperty(fishtankButtonGroupShared, 'isSmall', {
+ enumerable: true,
+ get: () => this.isSmall,
+ set: (val)=> this.isSmall = val
+ })
+
+ Object.defineProperty(fishtankButtonGroupShared, 'isFocused', {
+ enumerable: true,
+ get: () => this.isFocused,
+ set: (val)=> this.isFocused = val
+ })
+
+ return {fishtankButtonGroupShared}
+ },
  props:{
  small:{
  required:false,
@@ -23,6 +47,22 @@ export default Vue.extend({
  default: "",
  require:true
  },
+ id:{
+ type:String,
+ default:null,
+ required:false
+ },
  },
+ data: function(){
+ return {
+ isSmall:this.small,
+ isFocused:false
+ }
+ },
+ computed:{
+ labelId(): string {
+ return `ft-button-group-button-${(this as any)._uid}`
+ },
+ }
 })
 </script>

src/components/FishTankButtonGroupButton.vue

@@ -1,28 +1,37 @@
 <template>
  <div 
- :class="[{'ft-buttongroup__button--active':shouldBeChecked},'ft-buttongroup__button']">
+ slot-scope="slotProps"
+ :class="[{'ft-buttongroup__button--active':shouldBeChecked},{'ft-buttongroup__button--disabled':disabled},'ft-buttongroup__button',{'ft-buttongroup__button--small':fishtankButtonGroupShared.isSmall},]" 
+ role="radio">
  <label 
  :for="(id !==null? id: labelId)"
- class="ft-buttongroup__button__label ft-baseButton">
+
+ :class="['ft-buttongroup__button__label', 'ft-baseButton', {'ft-baseButton--small':fishtankButtonGroupShared.isSmall}]">
  <input 
  :disabled="disabled" 
  :id="(id !==null? id: labelId)" 
  :value="value" 
  :checked ="shouldBeChecked" 
  class="ft-buttongroup__button__input" 
  type="radio" 
- v-on="listeners">
+ v-on="listeners"
+ @focus="fishtankButtonGroupShared.isFocused = true"
+ @blur="fishtankButtonGroupShared.isFocused = false">
  <div class="ft-buttongroup__button__icon"/>
- <div class="ft-buttongroup__button__label-content">
+ <div :class="['ft-buttongroup__button__label-content', {'ft-buttongroup__button__label-content--small':fishtankButtonGroupShared.isSmall}]">
  {{ label }}
  </div>
  </label>
  </div>
 </template>
 <script lang="ts">
 import Vue from 'vue'
+import a11y from '@/util/a11y'
 
 export default Vue.extend({
+ mixins:[
+ a11y
+ ],
  model: {
  prop: 'modelValue',
  event: 'change'
@@ -52,6 +61,17 @@ export default Vue.extend({
  type:String,
  default:null,
  required:false
+ },
+ fishtankButtonGroupShared:{
+ type:Object,
+ default:()=>{},
+ },
+ },
+ inject:{
+ fishtankButtonGroupShared:{
+ default:{
+ isSmall:false,
+ },
  }
  },
  computed:{
@@ -70,6 +90,6 @@ export default Vue.extend({
  labelId(): string {
  return `ft-button-group-button-${(this as any)._uid}`
  },
- }
+ },
 })
 </script>

src/components/InputRadio.vue

@@ -1,27 +1,30 @@
 <template>
- <div class="fishtank-radio">
+ <div class="ft-radio">
  <label 
  :for="(id !==null? id: labelId)"
- class="fishtank-radio__label">
+ class="ft-radio__label">
  <input 
  :disabled="disabled" 
  :id="(id !==null? id: labelId)" 
  :value="value" 
  :checked ="shouldBeChecked" 
- class="fishtank-radio__input" 
+ class="ft-radio__input" 
  type="radio" 
  v-on="listeners">
- <div class="fishtank-radio__icon"/>
- <div class="fishtank-radio__label-content">
+ <div class="ft-radio__icon"/>
+ <div class="ft-radio__label-content">
  {{ label }}
  </div>
  </label>
  </div>
 </template>
 <script lang="ts">
 import Vue from 'vue'
-
+import a11y from '@/util/a11y'
 export default Vue.extend({
+ mixins: [
+ a11y,
+ ],
  model: {
  prop: 'modelValue',
  event: 'change'

src/components/InputSwitch.vue

@@ -25,17 +25,13 @@
 </template>
 <script lang="ts">
 
-function handleFirstTab(e:KeyboardEvent) {
- if (e.keyCode === 9) { // tab key, user is a keyboard user
- document.body.classList.add('user-is-tabbing')
- window.removeEventListener('keydown', handleFirstTab)
- }
-}
-window.addEventListener('keydown', handleFirstTab)
-
 import Vue, { VNode }from 'vue'
+import a11y from '@/util/a11y'
 export default Vue.extend({
  name:"FishTankSwitch",
+ mixins: [
+ a11y,
+ ],
  model: {
  prop: 'modelValue',
  event: 'change'

src/components/InputTagRemove.vue

@@ -12,14 +12,6 @@
 
 <script lang="ts">
 
- function handleFirstTab(e:KeyboardEvent) {
- if (e.keyCode === 9) { // tab key, user is a keyboard user
- document.body.classList.add('user-is-tabbing')
- window.removeEventListener('keydown', handleFirstTab)
- }
- }
- window.addEventListener('keydown', handleFirstTab)
-
  import Vue from "vue"
  import InputText from "./InputText.vue"
  import Tag from "./Tag.vue"

src/styles/_mixins.scss

@@ -91,6 +91,15 @@ $breakpoint-small-min: 480px;
  font-family: $font-primary;
  font-weight: $fontweight-semi;
 
+ padding: 7px 11px 9px 11px;
+ height: $baseline*10;
+}
+
+@mixin baseButtonSm {
+ @include font-base-sm();
+ font-family: $font-primary;
+ font-weight: $fontweight-semi;
+
  padding: 7px 11px 9px 11px;
  height: $baseline*10;
 }