kopia lustrzana https://github.com/shoelace-style/shoelace
use label attrib
rodzic
45ceff4c08
commit
fb6d5d89b8
|
@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
|
||||
## Next
|
||||
|
||||
- Added `label` attribute to `<sl-progress-bar>` and `<sl-progress-ring>` to improve a11y
|
||||
- Updated to Bootstrap Icons to 1.6.0
|
||||
|
||||
## 2.0.0-beta.57
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
"license": "MIT",
|
||||
"main": "dist/shoelace.js",
|
||||
"module": "dist/shoelace.js",
|
||||
"customElements": "docs/dist/custom-elements.json",
|
||||
"customElements": "dist/custom-elements.json",
|
||||
"type": "module",
|
||||
"types": "dist/shoelace.d.ts",
|
||||
"files": [
|
||||
|
|
|
@ -11,9 +11,6 @@ export default css`
|
|||
--label-color: rgb(var(--sl-color-neutral-0));
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
background-color: var(--track-color);
|
||||
height: var(--height);
|
||||
|
|
|
@ -11,8 +11,8 @@ describe('<sl-progress-bar>', () => {
|
|||
el = await fixture<SlProgressBar>(html`<sl-progress-bar value="25"></sl-progress-bar>`);
|
||||
});
|
||||
|
||||
it('should render a component that does not pass accessibility test.', async () => {
|
||||
await expect(el).not.to.be.accessible();
|
||||
it('should render a component that passes accessibility test.', async () => {
|
||||
await expect(el).to.be.accessible();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -30,14 +30,8 @@ export default class SlProgressBar extends LitElement {
|
|||
/** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
|
||||
@property({ type: Boolean, reflect: true }) indeterminate = false;
|
||||
|
||||
/** When set, will place a hoverable title on the progress bar. */
|
||||
@property() title: string;
|
||||
|
||||
/** When set, will place a label on the progress bar. */
|
||||
@property() ariaLabel: string;
|
||||
|
||||
/** When set, will place a labelledby on the progress bar. */
|
||||
@property() ariaLabelledBy: string;
|
||||
/** The progress bar's aria label. */
|
||||
@property() label = 'Progress'; // TODO - i18n
|
||||
|
||||
render() {
|
||||
return html`
|
||||
|
@ -49,11 +43,10 @@ export default class SlProgressBar extends LitElement {
|
|||
})}
|
||||
role="progressbar"
|
||||
title=${ifDefined(this.title)}
|
||||
aria-label=${ifDefined(this.ariaLabel)}
|
||||
aria-labelledby=${ifDefined(this.ariaLabelledBy)}
|
||||
aria-label=${ifDefined(this.label)}
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-valuenow="${this.indeterminate ? 0 : this.value}"
|
||||
aria-valuenow=${this.indeterminate ? 0 : this.value}
|
||||
>
|
||||
<div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: this.value + '%' })}>
|
||||
${!this.indeterminate
|
||||
|
|
|
@ -11,8 +11,8 @@ describe('<sl-progress-ring>', () => {
|
|||
el = await fixture<SlProgressRing>(html`<sl-progress-ring value="25"></sl-progress-ring>`);
|
||||
});
|
||||
|
||||
it('should render a component that does not pass accessibility test.', async () => {
|
||||
await expect(el).not.to.be.accessible();
|
||||
it('should render a component that passes accessibility test.', async () => {
|
||||
await expect(el).to.be.accessible();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -28,14 +28,8 @@ export default class SlProgressRing extends LitElement {
|
|||
/** The current progress, 0 to 100. */
|
||||
@property({ type: Number, reflect: true }) value = 0;
|
||||
|
||||
/** When set, will place a hoverable title on the progress ring. */
|
||||
@property() title: string;
|
||||
|
||||
/** When set, will place a label on the progress ring. */
|
||||
@property() ariaLabel: string;
|
||||
|
||||
/** When set, will place a labelledby on the progress ring. */
|
||||
@property() ariaLabelledBy: string;
|
||||
/** The progress ring's aria label. */
|
||||
@property() label = 'Progress'; // TODO - i18n
|
||||
|
||||
updated(changedProps: Map<string, any>) {
|
||||
super.updated(changedProps);
|
||||
|
@ -60,9 +54,7 @@ export default class SlProgressRing extends LitElement {
|
|||
part="base"
|
||||
class="progress-ring"
|
||||
role="progressbar"
|
||||
title=${ifDefined(this.title)}
|
||||
aria-label=${ifDefined(this.ariaLabel)}
|
||||
aria-labelledby=${ifDefined(this.ariaLabelledBy)}
|
||||
aria-label=${ifDefined(this.label)}
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-valuenow="${this.value}"
|
||||
|
|
Ładowanie…
Reference in New Issue