feat: Added accessibility labels to some existing components. For But…

…ton group, added accessibility interactions to support button groups and focus on selected items
bloombergindustry · Nov 8, 2018 · 347c0c3 · 347c0c3
1 parent ed87e7f
commit 347c0c3
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 21 deletions.
diff --git a/dev/views/ButtonGroup.vue b/dev/views/ButtonGroup.vue
@@ -4,30 +4,36 @@
  <FishTankBGButton
  v-model="bgValue"
  value="All"
- label="All"/>
+ label="All"
+ name="options"/>
  <FishTankBGButton
  v-model="bgValue"
  value="Members"
- label="Members"/>
+ label="Members"
+ name="options"/>
  <FishTankBGButton
  v-model="bgValue" 
  value="Staff"
- label="Staff"/>
+ label="Staff"
+ name="options"/>
  </FishTankButtonGroup>
  <br>
  <FishTankButtonGroup small>
  <FishTankBGButton
  v-model="bgValueAltBeta"
  value="All"
- label="All"/>
+ label="All"
+ name="options2"/>
  <FishTankBGButton
  v-model="bgValueAltBeta"
  value="Members"
- label="Members"/>
+ label="Members"
+ name="options2"/>
  <FishTankBGButton
  v-model="bgValueAltBeta" 
  value="Staff"
- label="Staff"/>
+ label="Staff"
+ name="options2"/>
  </FishTankButtonGroup>
 
  <div v-if="bgValue ==='All'"> All Tab</div>

diff --git a/dev/views/Radios.vue b/dev/views/Radios.vue
@@ -3,21 +3,25 @@
  <InputRadio 
  v-model="val"
  value="alpha" 
- label="alpha"/>
+ label="alpha"
+ name="alpha"/>
  <InputRadio 
  v-model="val" 
  disabled
  value="alpha" 
- label="alpha"/>
+ label="alpha"
+ name="alpha"/>
  <InputRadio 
  v-model="val"
  value="beta" 
- label="beta"/>
+ label="beta"
+ name="beta"/>
  <InputRadio 
  v-model="val"
  disabled
  value="beta" 
- label="beta"/>
+ label="beta"
+ name="beta"/>
  {{ val }}
  </section>
 </template>

diff --git a/src/components/FishTankButtonGroupButton.vue b/src/components/FishTankButtonGroupButton.vue
@@ -1,25 +1,27 @@
 <template>
  <div 
  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">
+ :class="[{'ft-buttongroup__button--active':shouldBeChecked},{'ft-buttongroup__button--disabled':disabled},'ft-buttongroup__button',{'ft-buttongroup__button--small':fishtankButtonGroupShared.isSmall},]">
  <label 
  :for="(id !==null? id: labelId)"
-
- :class="['ft-buttongroup__button__label', {'ft-baseButton--small':fishtankButtonGroupShared.isSmall}]">
+ :tabindex="shouldBeChecked ? 0 : -1"
+ :class="['ft-buttongroup__button__label', {'ft-baseButton--small':fishtankButtonGroupShared.isSmall}]"
+ @focus="setFocusInput()">
  <input 
+ ref="input"
  :disabled="disabled" 
  :id="(id !==null? id: labelId)" 
  :value="value" 
  :checked ="shouldBeChecked" 
- :tabindex="shouldBeChecked ? getId : -1"
+ :tabindex="shouldBeChecked ? 0 : -1" 
  class="ft-buttongroup__button__input" 
- type="radio" 
+ type="radio"
  v-on="listeners"
  @focus="fishtankButtonGroupShared.isFocused = true"
  @blur="fishtankButtonGroupShared.isFocused = false">
  <!-- <div class="ft-buttongroup__button__icon"/> -->
- <div :class="['ft-buttongroup__button__label-content', {'ft-buttongroup__button__label-content--small':fishtankButtonGroupShared.isSmall}]">
+ <div 
+ :class="['ft-buttongroup__button__label-content', {'ft-buttongroup__button__label-content--small':fishtankButtonGroupShared.isSmall}]">
  {{ label }}
  </div>
  </label>
@@ -63,6 +65,11 @@ export default Vue.extend({
  default:null,
  required:false
  },
+ name:{
+ type:String,
+ default:"",
+ required:true
+ },
  fishtankButtonGroupShared:{
  type:Object,
  default:()=>{},
@@ -95,5 +102,10 @@ export default Vue.extend({
  return (this as any)._uid
  }
  },
+ methods:{
+ setFocusInput: function(){
+ (this.$refs.input as HTMLInputElement).focus()
+ }
+ }
 })
 </script>
diff --git a/src/components/FishTankLoaderSpinner.vue b/src/components/FishTankLoaderSpinner.vue
@@ -2,9 +2,9 @@
 <template>
  <div 
  :class="[gradientClass, spinnerSize, alignClass]" 
- class="ft-spinner"
- role="alert" 
- aria-busy="true">
+ :aria-busy="busy"
+ class="ft-spinner" 
+ role="alert">
  <svg 
  height="100" 
  width="100">
@@ -55,6 +55,11 @@ export default Vue.extend({
  type:String,
  default: "center",
  required: false
+ },
+ busy:{
+ type:Boolean,
+ default:true,
+ required:false
  }
  },
  data () {

diff --git a/src/components/FishTankTag.vue b/src/components/FishTankTag.vue
@@ -1,5 +1,7 @@
 <template>
- <div :class="[$style.wrap]">
+ <div 
+ :class="[$style.wrap]" 
+ :aria-label="removable ? `Remove ${label}`:null" >
  <label
  :for="(id !==null? id: labelId)"
  :class="$style.label"