copyleftie
/
pinafore
1
0
Fork 0
Code Issues Pull Requests Releases Activity

fix: improve focus style on dialog list item (#1208) 

fixes #1201
This commit is contained in:
Nolan Lawson 2019-05-11 10:01:14 -07:00 committed by GitHub
parent 5f01a1ba96
commit 9e6bc60abe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/routes/_components/dialog/components/GenericDialogList.html
View File

@ -1,7 +1,10 @@
<ul class="generic-dialog-list">
{#each items as item (item.key)}
<li class="generic-dialog-list-item">
<button class="generic-dialog-list-button" on:click="fire('click', item)">
<button
class="generic-dialog-list-button"
on:applyFocusStylesToParent="noop()"
on:click="fire('click', item)">
<SvgIcon className="generic-dialog-list-item-svg" href={item.icon} />
<span class="generic-dialog-list-button-span">
{item.label}
@ -26,6 +29,7 @@
border: 1px solid var(--settings-list-item-border);
font-size: 1.2em;
display: flex;
outline-width: 4px;
}
:global(.generic-dialog-list-item-svg) {
width: 24px;
@ -41,6 +45,9 @@
display: flex;
flex-direction: row;
}
.generic-dialog-list-button:focus {
outline: none; /* focus style is on parent instead */
}
.generic-dialog-list-button-span {
flex: 1;
margin-left: 20px;
@ -86,8 +93,16 @@
</style>
<script>
import SvgIcon from '../../SvgIcon.html'
import { applyFocusStylesToParent } from '../../../_utils/events'
import noop from 'lodash-es/noop'
export default {
events: {
applyFocusStylesToParent
},
methods: {
noop
},
components: {
SvgIcon
}