kopia lustrzana https://github.com/shoelace-style/shoelace
fix radio group tabbing
rodzic
a48eef2575
commit
b98e1f6b20
|
@ -12,6 +12,7 @@ This release improves how component dependencies are imported. If you've been ch
|
|||
|
||||
- Added "Reflects" column to the properties table
|
||||
- Dependencies are now automatically imported for all components
|
||||
- Fixed a bug where tabbing into `sl-radio-group` would not always focus the checked radio
|
||||
- Improved base path utility logic
|
||||
|
||||
## 2.0.0-beta.46
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { LitElement, html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit-html/directives/class-map';
|
||||
import type SlRadio from '../radio/radio';
|
||||
import styles from './radio-group.styles';
|
||||
|
||||
/**
|
||||
|
@ -17,12 +18,25 @@ import styles from './radio-group.styles';
|
|||
export default class SlRadioGroup extends LitElement {
|
||||
static styles = styles;
|
||||
|
||||
@query('slot:not([name])') defaultSlot: HTMLSlotElement;
|
||||
|
||||
/** The radio group label. Required for proper accessibility. Alternatively, you can use the label slot. */
|
||||
@property() label = '';
|
||||
|
||||
/** Hides the fieldset and legend that surrounds the radio group. The label will still be read by screen readers. */
|
||||
@property({ type: Boolean, attribute: 'no-fieldset' }) noFieldset = false;
|
||||
|
||||
handleFocusIn() {
|
||||
// When focusing into the fieldset, make sure it lands on the checked radio
|
||||
const checkedRadio = [...this.defaultSlot.assignedElements({ flatten: true })].find(
|
||||
el => el.tagName.toLowerCase() === 'sl-radio' && (el as SlRadio).checked
|
||||
) as SlRadio;
|
||||
|
||||
if (checkedRadio) {
|
||||
checkedRadio.focus();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<fieldset
|
||||
|
@ -32,6 +46,7 @@ export default class SlRadioGroup extends LitElement {
|
|||
'radio-group--no-fieldset': this.noFieldset
|
||||
})}
|
||||
role="radiogroup"
|
||||
@focusin=${this.handleFocusIn}
|
||||
>
|
||||
<legend part="label" class="radio-group__label">
|
||||
<slot name="label">${this.label}</slot>
|
||||
|
|
Ładowanie…
Reference in New Issue