From f16392947a85e8b07bc70b8b11d2702454de071d Mon Sep 17 00:00:00 2001 From: Christos Hrousis Date: Sun, 10 Oct 2021 13:00:41 +1100 Subject: [PATCH 1/6] docs: ring uses css prop for track-width. --- docs/components/progress-ring.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/components/progress-ring.md b/docs/components/progress-ring.md index ba1c1a8c4d..75d656d536 100644 --- a/docs/components/progress-ring.md +++ b/docs/components/progress-ring.md @@ -20,10 +20,10 @@ Use the `--size` custom property to set the diameter of the progress ring. ### Track Width -Use the `track-width` attribute to set the width of the progress ring's track. +Use the `--track-width` custom property to set the width of the progress ring's track. ```html preview - + ``` ### Colors From eee97d7dba13b06d1760131e9a93ae38103ce39a Mon Sep 17 00:00:00 2001 From: Christos Hrousis Date: Sun, 10 Oct 2021 13:05:40 +1100 Subject: [PATCH 2/6] test: cover progress-ring - Add title to make ring accessibly hoverable. - Add label/labelledby as aria options. - Remove ununsed label slot. --- .../progress-ring/progress-ring.test.ts | 68 +++++++++++++++++++ src/components/progress-ring/progress-ring.ts | 18 +++-- 2 files changed, 81 insertions(+), 5 deletions(-) create mode 100644 src/components/progress-ring/progress-ring.test.ts diff --git a/src/components/progress-ring/progress-ring.test.ts b/src/components/progress-ring/progress-ring.test.ts new file mode 100644 index 0000000000..c8a4704bc4 --- /dev/null +++ b/src/components/progress-ring/progress-ring.test.ts @@ -0,0 +1,68 @@ +import { expect, fixture, html } from '@open-wc/testing'; + +import '../../../dist/shoelace.js'; +import type SlProgressRing from './progress-ring'; + +describe('', () => { + let el: SlProgressRing; + + 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; + + 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('uses the value parameter on the base, as aria-valuenow', async () => { + expect(base).attribute('aria-valuenow', '25'); + }); + + it('translates the value parameter to a percentage, and uses translation on the base, as percentage css variable', async () => { + expect(base).attribute('style', '--percentage: 0.25'); + }); + }); + + 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-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts index 1eeccd65a6..9b4761bfb5 100644 --- a/src/components/progress-ring/progress-ring.ts +++ b/src/components/progress-ring/progress-ring.ts @@ -1,5 +1,6 @@ import { LitElement, html } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; import styles from './progress-ring.styles'; /** @@ -9,7 +10,6 @@ import styles from './progress-ring.styles'; * @slot - A label to show inside the ring. * * @csspart base - The component's base wrapper. - * @csspart label - The progress ring label. * * @cssproperty --size - The diameter of the progress ring (cannot be a percentage). * @cssproperty --track-width - The width of the track. @@ -27,6 +27,15 @@ 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; + updated(changedProps: Map) { super.updated(changedProps); @@ -50,6 +59,9 @@ 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-valuemin="0" aria-valuemax="100" aria-valuenow="${this.value}" @@ -59,10 +71,6 @@ export default class SlProgressRing extends LitElement { - - - - `; } From 34447a3f2fb41addb7b67d78ab1882ec2ae63836 Mon Sep 17 00:00:00 2001 From: Christos Hrousis Date: Sun, 10 Oct 2021 13:24:01 +1100 Subject: [PATCH 3/6] test: migrate progress-ring tests to progress-bar - Match coverage with progress-ring - Attached titles/label/labelledby - Value '' on aria-valuenow is does not pass AXE --- .../progress-bar/progress-bar.test.ts | 89 +++++++++++++++++++ src/components/progress-bar/progress-bar.ts | 15 +++- 2 files changed, 103 insertions(+), 1 deletion(-) create mode 100644 src/components/progress-bar/progress-bar.test.ts 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 0000000000..542314c125 --- /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 e9f0106244..7d39580611 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 From 449f5e6c7f1fc77ae91473d4c09cd655d2d8bb66 Mon Sep 17 00:00:00 2001 From: Christos Hrousis Date: Sun, 10 Oct 2021 13:24:28 +1100 Subject: [PATCH 4/6] style: typo. --- src/components/progress-bar/progress-bar.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts index 7d39580611..5e6e39bef8 100644 --- a/src/components/progress-bar/progress-bar.ts +++ b/src/components/progress-bar/progress-bar.ts @@ -30,13 +30,13 @@ 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. */ + /** When set, will place a hoverable title on the progress bar. */ @property() title: string; - /** When set, will place a label on the progress ring. */ + /** When set, will place a label on the progress bar. */ @property() ariaLabel: string; - /** When set, will place a labelledby on the progress ring. */ + /** When set, will place a labelledby on the progress bar. */ @property() ariaLabelledBy: string; render() { From c4cbc894f594eb5c197b1180ce1a03f00d687488 Mon Sep 17 00:00:00 2001 From: Christos Hrousis Date: Sun, 10 Oct 2021 13:36:41 +1100 Subject: [PATCH 5/6] revert: misunderstood part/slot definition. --- src/components/progress-ring/progress-ring.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts index 9b4761bfb5..0f134a06fb 100644 --- a/src/components/progress-ring/progress-ring.ts +++ b/src/components/progress-ring/progress-ring.ts @@ -10,6 +10,7 @@ import styles from './progress-ring.styles'; * @slot - A label to show inside the ring. * * @csspart base - The component's base wrapper. + * @csspart label - The progress ring label. * * @cssproperty --size - The diameter of the progress ring (cannot be a percentage). * @cssproperty --track-width - The width of the track. @@ -72,6 +73,10 @@ export default class SlProgressRing extends LitElement {
+ + + + `; } } From 9a19cc2173f4ff2399b37a3370c92f7e74ebb453 Mon Sep 17 00:00:00 2001 From: Christos Hrousis Date: Sun, 10 Oct 2021 13:37:32 +1100 Subject: [PATCH 6/6] revert: misunderstood part/slot definition. --- src/components/progress-ring/progress-ring.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts index 0f134a06fb..687069419b 100644 --- a/src/components/progress-ring/progress-ring.ts +++ b/src/components/progress-ring/progress-ring.ts @@ -72,11 +72,11 @@ export default class SlProgressRing extends LitElement { -
- - - + + + + `; } }