use label attrib

docs/resources/changelog.md

@@ -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

package.json

@@ -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": [

src/components/progress-bar/progress-bar.styles.ts

@@ -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);

src/components/progress-bar/progress-bar.test.ts

@@ -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();
     });
   });
 

src/components/progress-bar/progress-bar.ts

@@ -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

src/components/progress-ring/progress-ring.test.ts

@@ -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();
     });
   });
 

src/components/progress-ring/progress-ring.ts

@@ -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}"