@brightspace-ui/core 3.181.0 → 3.183.0

package/components/progress/README.md

@@ -18,7 +18,37 @@ A progress bar communicates information relating to the progress of completion o
 |---|---|---|
 | `max` | Number | The maximum value of the progress bar |
 | `value` | Number | The current value of the progress bar |
-| `label` | String | Label for the progress bar |
+| `label` | String, required | Label for the progress bar |
 | `label-hidden` | Boolean | Hide the bar's label |
+| `announce-label` | Boolean | Announce the label when it changes |
 | `value-hidden` | Boolean | Hide the bar's value |
 <!-- docs: end hidden content -->
+
+### Announce Label
+
+Use the `announce-label` property to announce changes to the progress label. This can be helpful to announce steps or completion to users.
+
+<!-- docs: demo code  -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/progress/progress.js';
+</script>
+<script>
+  const button = document.querySelector('button');
+  const progress = document.querySelector('d2l-progress');
+  button.addEventListener('click', () => {
+    for (let i = 0; i < 5; i++) {
+      setTimeout(() => {
+        if (i === 4) progress.label = 'Complete';
+        else if (i >= 2) progress.label = 'Validating...';
+        else progress.label = 'Uploading...';
+        progress.value = i * 25;
+      }, i * 1000);
+
+    }
+  });
+</script>
+
+<button>Start Animation</button>
+<d2l-progress label="Uploading..." announce-label></d2l-progress>
+```

package/components/progress/demo/progress.html

@@ -69,14 +69,19 @@
 			<d2l-demo-snippet>
 				<template>
 					<button>Start Animation</button>
-					<d2l-progress label="Progress"></d2l-progress>
+					<d2l-progress label="Uploading..." announce-label></d2l-progress>
 					<script data-demo-hide>
 						(demo => {
 							const button = demo.querySelector('button');
 							const progress = demo.querySelector('d2l-progress');
 							button.addEventListener('click', () => {
 								for (let i = 0; i < 5; i++) {
-									setTimeout(() => progress.value = i * 25, i * 500);
+									setTimeout(() => {
+										if (i === 4) progress.label = 'Complete';
+										else if (i >= 2) progress.label = 'Validating...';
+										else progress.label = 'Uploading...';
+										progress.value = i * 25;
+									}, i * 1000);
 
 								}
 							});

package/components/progress/progress.js

@@ -21,7 +21,7 @@ class Progress extends LocalizeCoreElement(LitElement) {
 			 */
 			value: { type: Number },
 			/**
-			 * Label for the progress bar
+			 * REQUIRED: Label for the progress bar
 			 * @type {string}
 			 */
 			label: { type: String },
@@ -30,6 +30,11 @@ class Progress extends LocalizeCoreElement(LitElement) {
 			 * @type {boolean}
 			 */
 			labelHidden: { type: Boolean, attribute: 'label-hidden' },
+			/**
+			 * Announce the label when it changes
+			 * @type {boolean}
+			 */
+			announceLabel: { type: Boolean, attribute: 'announce-label' },
 			/**
 			 * Hide the bar's value
 			 * @type {boolean}
@@ -39,7 +44,7 @@ class Progress extends LocalizeCoreElement(LitElement) {
 			 * The size of the progress bar
 			 * @type {'small'|'medium'|'large'}
 			 */
-			size: { type: String, reflect: true },
+			size: { type: String, reflect: true }
 		};
 	}
 
@@ -136,16 +141,21 @@ class Progress extends LocalizeCoreElement(LitElement) {
 
 	constructor() {
 		super();
+		this.announceLabel = false;
 		this.labelHidden = false;
 		this.max = 100;
+		this.size = 'medium';
 		this.value = 0;
 		this.valueHidden = false;
-		this.size = 'medium';
+	}
+
+	get isComplete() {
+		return this.value >= this.max;
 	}
 
 	render() {
 		const classes = {
-			'complete': this.value === this.max
+			'complete': this.isComplete
 		};
 		const textClasses = {
 			'd2l-body-small': this.size === 'small',
@@ -153,21 +163,18 @@ class Progress extends LocalizeCoreElement(LitElement) {
 		};
 		const valueClasses = { ...textClasses, value: true };
 
-		const percentage = Math.floor(100 * this.value / this.max) / 100;
-		const perecentageText = formatPercent(percentage);
-
+		const percentageText = formatPercent(this.isComplete ? 1 : Math.floor(100 * this.value / this.max) / 100);
 		return html`
-			<div ?hidden=${this.labelHidden} id="label" class=${classMap(textClasses)}>${this.label}</div>
+			<div aria-live=${this.announceLabel ? 'polite' : 'off'} ?hidden=${this.labelHidden} id="label" class=${classMap(textClasses)}>${this.label}</div>
 			<progress
 				aria-labelledby="${ifDefined(this.labelHidden ? undefined : 'label')}"
 				aria-label="${ifDefined(this.labelHidden ? this.label : undefined)}"
-				aria-valuetext="${perecentageText}"
+				aria-valuetext="${percentageText}"
 				class="${classMap(classes)}"
 				value="${this.value}"
 				max="${this.max}">
 			</progress>
-			<div ?hidden=${this.valueHidden} class=${classMap(valueClasses)}>${perecentageText}</div>
-
+			<div ?hidden=${this.valueHidden} class=${classMap(valueClasses)}>${percentageText}</div>
 		`;
 	}
 

package/custom-elements.json

@@ -11966,9 +11966,15 @@
       "attributes": [
         {
           "name": "label",
-          "description": "Label for the progress bar",
+          "description": "REQUIRED: Label for the progress bar",
           "type": "string"
         },
+        {
+          "name": "announce-label",
+          "description": "Announce the label when it changes",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "label-hidden",
           "description": "Hide the bar's label",
@@ -11981,6 +11987,12 @@
           "type": "number",
           "default": "100"
         },
+        {
+          "name": "size",
+          "description": "The size of the progress bar",
+          "type": "'small'|'medium'|'large'",
+          "default": "\"medium\""
+        },
         {
           "name": "value",
           "description": "The current value of the progress bar",
@@ -11992,21 +12004,26 @@
           "description": "Hide the bar's value",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "size",
-          "description": "The size of the progress bar",
-          "type": "'small'|'medium'|'large'",
-          "default": "\"medium\""
         }
       ],
       "properties": [
         {
           "name": "label",
           "attribute": "label",
-          "description": "Label for the progress bar",
+          "description": "REQUIRED: Label for the progress bar",
           "type": "string"
         },
+        {
+          "name": "isComplete",
+          "type": "boolean"
+        },
+        {
+          "name": "announceLabel",
+          "attribute": "announce-label",
+          "description": "Announce the label when it changes",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "labelHidden",
           "attribute": "label-hidden",
@@ -12021,6 +12038,13 @@
           "type": "number",
           "default": "100"
         },
+        {
+          "name": "size",
+          "attribute": "size",
+          "description": "The size of the progress bar",
+          "type": "'small'|'medium'|'large'",
+          "default": "\"medium\""
+        },
         {
           "name": "value",
           "attribute": "value",
@@ -12034,13 +12058,6 @@
           "description": "Hide the bar's value",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "size",
-          "attribute": "size",
-          "description": "The size of the progress bar",
-          "type": "'small'|'medium'|'large'",
-          "default": "\"medium\""
         }
       ]
     },

package/helpers/focus.js

@@ -1,6 +1,5 @@
 import { css, unsafeCSS } from 'lit';
 import { getComposedChildren, getComposedParent, getFirstVisibleAncestor, getNextAncestorSibling, getPreviousAncestorSibling, isVisible } from './dom.js';
-import { getFlag } from './flags.js';
 
 const focusableElements = {
 	a: true,
@@ -15,9 +14,6 @@ const focusableElements = {
 	textarea: true
 };
 
-// The default here cannot be changed, as BSI relies on it being true. Do not change the default without adding a way for BSI to override it.
-const focusVisibleSupportChangesEnabled = getFlag('focus-visible-support-changes-for-focus-rings', true);
-
 export function getComposedActiveElement() {
 	let node = document.activeElement;
 
@@ -80,22 +76,6 @@ export function getFocusPseudoClass() {
 	return isFocusVisibleSupported() ? 'focus-visible' : 'focus';
 }
 export function getFocusRingStyles(selector, { extraStyles = null } = {}) {
-	// Remove when cleaning up focus-visible-support-changes-for-focus-rings
-	if (!focusVisibleSupportChangesEnabled) {
-		const selectorDelegate = typeof selector === 'string' ? pseudoClass => `${selector}:${pseudoClass}` : selector;
-		const cssSelector = unsafeCSS(selectorDelegate(getFocusPseudoClass()));
-		return css`${cssSelector} {
-			${extraStyles ?? css``}
-			outline: 2px solid var(--d2l-focus-ring-color, var(--d2l-color-celestine));
-			outline-offset: var(--d2l-focus-ring-offset, 2px);
-		}
-		@media (prefers-contrast: more) {
-			${cssSelector} {
-				outline-color: Highlight;
-			}
-		}`;
-	}
-
 	const stylesDelegate = selector => css`
 		${selector} {
 			${extraStyles ?? css``}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.181.0",
+  "version": "3.183.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",