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

fix visually hidden labels in buttons

Browse Source
This commit is contained in:
Cory LaViska
2024-06-20 15:40:46 -04:00
parent 1cdbf8d36d
commit 6318d84a1d
2 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/button/button.styles.ts
View File

@@ -344,6 +344,10 @@ export default css`
height: 0.875em;
}
.button--caret:not(.button--visually-hidden-label) .button__caret {
margin-inline-start: 0.75em;
}
/*
* Loading modifier
*/
@@ -410,8 +414,7 @@ export default css`
margin-inline-end: 0.75em;
}
.button ::slotted([slot='suffix']),
.button .button__caret {
.button ::slotted([slot='suffix']) {
margin-inline-start: 0.75em;
}

17
src/components/button/button.ts
View File

@@ -67,6 +67,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@query('.button') button: HTMLButtonElement | HTMLLinkElement;
@state() private hasFocus = false;
@state() visuallyHiddenLabel = false;
@state() invalid = false;
@property() title = ''; // make reactive to pass through
@@ -198,6 +199,15 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
this.dispatchEvent(new WaInvalidEvent());
}
private handleLabelSlotChange(event: Event) {
// If the only thing slotted in is a visually hidden element, we consider it a visually hidden label and apply a
// class so we can adjust styles accordingly.
const elements = (event.target as HTMLSlotElement).assignedElements({ flatten: true });
if (elements.length === 1 && elements[0].localName === 'wa-visually-hidden') {
this.visuallyHiddenLabel = true;
}
}
private isButton() {
return this.href ? false : true;
}
@@ -213,7 +223,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
// eslint-disable-next-line
setValue(..._args: Parameters<WebAwesomeFormAssociatedElement['setValue']>) {
// This is just a stub. We dont ever actually want to set a value on the form. That happens when the button is clicked and added
// This is just a stub. We don't ever actually want to set a value on the form. That happens when the button is clicked and added
// via the light dom button.
}
@@ -260,7 +270,8 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
'button--outline': this.appearance === 'outline',
'button--text': this.appearance === 'text',
'button--pill': this.pill,
'button--rtl': this.localize.dir() === 'rtl'
'button--rtl': this.localize.dir() === 'rtl',
'button--visually-hidden-label': this.visuallyHiddenLabel
})}
?disabled=${ifDefined(isLink ? undefined : this.disabled)}
type=${ifDefined(isLink ? undefined : this.type)}
@@ -280,7 +291,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@click=${this.handleClick}
>
<slot name="prefix" part="prefix" class="button__prefix"></slot>
<slot part="label" class="button__label"></slot>
<slot part="label" class="button__label" @slotchange=${this.handleLabelSlotChange}></slot>
<slot name="suffix" part="suffix" class="button__suffix"></slot>
${
this.caret