js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix checkbox focus visible

Browse Source
This commit is contained in:
Cory LaViska
2021-08-27 08:38:11 -04:00
parent 624f6ef5a1
commit 5933e948e1
2 changed files with 23 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/checkbox/checkbox.styles.ts
View File

@@ -35,7 +35,7 @@ export default css`
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
}
.checkbox__control input[type='checkbox'] {
input[type='checkbox'] {
position: absolute;
opacity: 0;
padding: 0;
@@ -61,10 +61,10 @@ export default css`
}
/* Focus */
.checkbox.checkbox--focused:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control {
.checkbox:not(.checkbox--checked):not(.checkbox--disabled) input[type='checkbox']:focus-visible ~ .checkbox__control {
border-color: rgb(var(--sl-input-border-color-focus));
background-color: rgb(var(--sl-input-background-color-focus));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
box-shadow: var(--sl-focus-ring);
}
/* Checked/indeterminate */
@@ -82,11 +82,11 @@ export default css`
}
/* Checked/indeterminate + focus */
.checkbox.checkbox--checked:not(.checkbox--disabled).checkbox--focused .checkbox__control,
.checkbox.checkbox--indeterminate:not(.checkbox--disabled).checkbox--focused .checkbox__control {
.checkbox.checkbox--checked:not(.checkbox--disabled) input[type='checkbox']:focus-visible ~ .checkbox__control,
.checkbox.checkbox--indeterminate:not(.checkbox--disabled) input[type='checkbox']:focus-visible ~ .checkbox__control {
border-color: rgb(var(--sl-color-primary-500));
background-color: rgb(var(--sl-color-primary-500));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
box-shadow: var(--sl-focus-ring);
}
/* Disabled */

41
src/components/checkbox/checkbox.ts
View File

@@ -112,12 +112,6 @@ export default class SlCheckbox extends LitElement {
emit(this, 'sl-focus');
}
handleLabelMouseDown(event: MouseEvent) {
// Prevent clicks on the label from briefly blurring the input
event.preventDefault();
this.input.focus();
}
@watch('checked', { waitUntilFirstUpdate: true })
@watch('indeterminate', { waitUntilFirstUpdate: true })
handleStateChange() {
@@ -136,8 +130,24 @@ export default class SlCheckbox extends LitElement {
'checkbox--indeterminate': this.indeterminate
})}
for=${this.inputId}
@mousedown=${this.handleLabelMouseDown}
>
<input
id=${this.inputId}
type="checkbox"
name=${ifDefined(this.name)}
value=${ifDefined(this.value)}
.indeterminate=${live(this.indeterminate)}
.checked=${live(this.checked)}
.disabled=${this.disabled}
.required=${this.required}
role="checkbox"
aria-checked=${this.checked ? 'true' : 'false'}
aria-labelledby=${this.labelId}
@click=${this.handleClick}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
/>
<span part="control" class="checkbox__control">
${this.checked
? html`
@@ -170,23 +180,6 @@ export default class SlCheckbox extends LitElement {
</span>
`
: ''}
<input
id=${this.inputId}
type="checkbox"
name=${ifDefined(this.name)}
value=${ifDefined(this.value)}
.indeterminate=${live(this.indeterminate)}
.checked=${live(this.checked)}
.disabled=${this.disabled}
.required=${this.required}
role="checkbox"
aria-checked=${this.checked ? 'true' : 'false'}
aria-labelledby=${this.labelId}
@click=${this.handleClick}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
/>
</span>
<span part="label" id=${this.labelId} class="checkbox__label">