diff --git a/src/components/progress-bar/progress-bar.test.ts b/src/components/progress-bar/progress-bar.test.ts new file mode 100644 index 000000000..542314c12 --- /dev/null +++ b/src/components/progress-bar/progress-bar.test.ts @@ -0,0 +1,89 @@ +import { expect, fixture, html } from '@open-wc/testing'; + +import '../../../dist/shoelace.js'; +import type SlProgressBar from './progress-bar'; + +describe('', () => { + let el: SlProgressBar; + + describe('when provided just a value parameter', async () => { + before(async () => { + el = await fixture(html``); + }); + + it('should render a component that does not pass accessibility test.', async () => { + await expect(el).not.to.be.accessible(); + }); + }); + + describe('when provided a title, and value parameter', async () => { + let base: HTMLDivElement; + let indicator: HTMLDivElement; + + before(async () => { + el = await fixture( + html`` + ); + base = el.shadowRoot?.querySelector('[part="base"]') as HTMLDivElement; + indicator = el.shadowRoot?.querySelector('[part="indicator"]') as HTMLDivElement; + }); + + it('should render a component that passes accessibility test.', async () => { + await expect(el).to.be.accessible(); + }); + + it('uses the value parameter on the base, as aria-valuenow', async () => { + expect(base).attribute('aria-valuenow', '25'); + }); + + it('appends a % to the value, and uses it as the the value parameter to determine the width on the "indicator" part', async () => { + expect(indicator).attribute('style', 'width:25%;'); + }); + }); + + describe('when provided an indeterminate parameter', async () => { + let base: HTMLDivElement; + + before(async () => { + el = await fixture( + html`` + ); + base = el.shadowRoot?.querySelector('[part="base"]') as HTMLDivElement; + }); + + it('should render a component that passes accessibility test.', async () => { + await expect(el).to.be.accessible(); + }); + + it('should append a progress-bar--indeterminate class to the "base" part.', async () => { + expect(base.classList.value.trim()).to.eq('progress-bar progress-bar--indeterminate'); + }); + }); + + describe('when provided a ariaLabel, and value parameter', async () => { + before(async () => { + el = await fixture( + html`` + ); + }); + + it('should render a component that passes accessibility test.', async () => { + await expect(el).to.be.accessible(); + }); + }); + + describe('when provided a ariaLabelledBy, and value parameter', async () => { + before(async () => { + el = await fixture( + html` + + + ` + ); + }); + + it('should render a component that passes accessibility test.', async () => { + await expect(el).to.be.accessible(); + }); + }); +}); diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts index e9f010624..7d3958061 100644 --- a/src/components/progress-bar/progress-bar.ts +++ b/src/components/progress-bar/progress-bar.ts @@ -1,5 +1,6 @@ import { LitElement, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { classMap } from 'lit/directives/class-map.js'; import { styleMap } from 'lit/directives/style-map.js'; import styles from './progress-bar.styles'; @@ -29,6 +30,15 @@ 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 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; + render() { return html`
${!this.indeterminate