krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 15:48:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10819 from ianoxley/9796-keyboard-a11y

Browse Source 
Add <button> and focus styles for keyboard users
This commit is contained in:
Matteo Pagliazzi
2019-03-24 12:29:07 +01:00
committed by GitHub
parent abb8dc4dc1 7835fe1deb
commit fe636b9bd2
6 changed files with 60 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
website/client/components/tasks/task.vue
View File

@@ -5,11 +5,11 @@
.d-flex(:class="{'task-not-scoreable': isUser !== true}")
// Habits left side control
.left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up.bg")
.task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null")
button.task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null")
.svg-icon.positive(v-html="icons.positive")
// Dailies and todos left side control
.left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass.bg")
.task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
button.task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
.svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}")
// Task title, description and icons
.task-content(:class="contentClass")
@@ -98,10 +98,10 @@
// Habits right side control
.right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down.bg")
.task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
button.task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
.svg-icon.negative(v-html="icons.negative")
// Rewards right side control
.right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
button.right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
.svg-icon(v-html="icons.gold")
.small-text {{task.value}}
approval-footer(:task='task', v-if='this.task.group.id', :group='group')
@@ -180,11 +180,15 @@
}
.task /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
background: $white;
border: 0;
border-radius: 0;
opacity: 0;
padding: 0 8px;
transition: opacity 0.15s ease-in;
}
.task /deep/ .habitica-menu-dropdown:focus .habitica-menu-dropdown-toggle,
.task:hover /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
opacity: 1;
}
@@ -197,6 +201,7 @@
}
}
.task-clickable-area /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:focus .svg-icon,
.task-clickable-area /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:hover .svg-icon {
color: $purple-400 !important;
}
@@ -417,11 +422,13 @@
}
.left-control {
align-items: center;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
min-height: 60px;
border: 1px solid transparent;
border-right: none;
flex-direction: row;
& + .task-content {
border-left: none;
@@ -439,7 +446,14 @@
}
.task-control:not(.task-disabled-habit-control-inner), .reward-control {
align-items: center;
cursor: pointer;
margin: 0;
padding: 0;
}
.task-control {
border: none;
}
.task-not-scoreable {