@brightspace-ui/core 3.53.0 → 3.55.0

package/components/meter/README.md

@@ -56,12 +56,14 @@ Linear meters show a horizontal progress bar.
 
 * `value` (required, Number): Current number of completed units. A positive, non-zero number that is less than or equal to `max`.
 * `max` (Number, default: `100`): Max number of units that are being measured by this meter. A positive, non-zero number.
-* `percent` Boolean: Shows a percentage instead of `value/max`.
-* `text-inline` Boolean: Keeps the meter to a single line. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
+* `percent` (Boolean): Shows a percentage instead of `value/max`.
+* `text-inline` (Boolean): Keeps the meter to a single line. 
+* `text` (String): Context information about what the meter is about. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
 	* `%` in the string will be replaced with percentage value
 	* `x/y` in the string will be replaced with fraction with the proper language support
 	* **DEPRECATED** `x` in the string will be replaced with `value`
 	* **DEPRECATED** `y` in the string will be replaced with `max`
+* `text-hidden` (Boolean): Hides the text visually
 <!-- docs: end hidden content -->
 
 ## Radial meter [d2l-meter-radial]
@@ -85,6 +87,7 @@ Radial meters appear as a half circle. They have more visual weight than a line
 * `text` (String): Context information about what the meter is about. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
 	* `%` in the string will be replaced with percentage value
 	* `x/y` in the string will be replaced with fraction with the proper language support
+* `text-hidden` (Boolean): Hides the text visually
 <!-- docs: end hidden content -->
 
 

package/components/meter/demo/meter.html

@@ -42,6 +42,7 @@
 						<d2l-meter-linear value="3" max="6"></d2l-meter-linear>
 						<d2l-meter-linear value="3" max="6" percent></d2l-meter-linear>
 						<d2l-meter-linear value="3" max="6" text="Visited: {x/y}" percent></d2l-meter-linear>
+						<d2l-meter-linear value="3" max="6" text="Visited: {x/y}" percent text-hidden></d2l-meter-linear>
 						<d2l-meter-linear value="3" max="6" text="Visited: {%}"></d2l-meter-linear>
 						<d2l-meter-linear value="3" max="6" text="You're doing great!" percent></d2l-meter-linear>
 					</div>
@@ -74,7 +75,7 @@
 					<div class="dark-background">
 						<d2l-meter-radial value="0" max="10" foreground-light></d2l-meter-radial>
 						<d2l-meter-radial value="5" max="13" foreground-light></d2l-meter-radial>
-						<d2l-meter-radial value="5" max="13" percent foreground-light></d2l-meter-radial>
+						<d2l-meter-radial value="5" max="13" percent foreground-light text="Made some progress" text-hidden></d2l-meter-radial>
 						<d2l-meter-radial value="10" max="10" foreground-light></d2l-meter-radial>
 						<d2l-meter-radial value="5" max="10" text="Completed" foreground-light></d2l-meter-radial>
 						<d2l-meter-radial value="19" max="26" style="width: 25%;" foreground-light></d2l-meter-radial>

package/components/meter/meter-linear.js

@@ -115,7 +115,9 @@ class MeterLinear extends MeterMixin(RtlMixin(LitElement)) {
 			'd2l-meter-linear-primary-ltr': !this.percent,
 			'd2l-meter-linear-primary': true
 		};
-		const secondaryTextElement = secondary ? html`<div class="d2l-meter-linear-secondary">${secondary}</div>` : nothing;
+		const secondaryTextElement = secondary && !this.textHidden
+			? html`<div class="d2l-meter-linear-secondary">${secondary}</div>`
+			: nothing;
 
 		return html `
 			<div

package/components/meter/meter-radial.js

@@ -32,7 +32,9 @@ class MeterRadial extends MeterMixin(RtlMixin(LitElement)) {
 		const secondary = this._secondary(this.value, this.max, this.text);
 		const primaryAria = this._primary(this.value, this.max, true) || '';
 		const secondaryAria = this._secondary(this.value, this.max, this.text, true) || '';
-		const secondaryTextElement = this.text ? html`<div class="d2l-body-small d2l-meter-text">${secondary}</div>` : nothing;
+		const secondaryTextElement = this.text && !this.textHidden
+			? html`<div class="d2l-body-small d2l-meter-text">${secondary}</div>`
+			: nothing;
 		const textClasses = {
 			'd2l-meter-text-ltr': !this.percent,
 			'd2l-heading-4': true,

package/components/tabs/README.md

@@ -100,3 +100,10 @@ Selecting a tab in the tab bar causes the relevant tab panel to be displayed. Ta
 ### Events
 - `d2l-tab-panel-selected`: dispatched when a tab is selected
 <!-- docs: end hidden content -->
+
+## Accessibility
+
+The `tabs` components were built following [W3C best practices for Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) with Manual Activation. Important features include:
+- Following recommended keyboard control patterns (with the exception of the "Optional" Home, End, and Delete key patterns)
+- Using the roles of `tablist` and `tab` appropriately in order to facilitate screen reader information (e.g., "tab, 2 of 7")
+- Using `aria-selected` to indicate `tab` selection state

package/components/tabs/tab-panel-mixin.js

@@ -21,7 +21,7 @@ export const TabPanelMixin = superclass => class extends superclass {
 			 */
 			selected: { type: Boolean, reflect: true },
 			/**
-			 * REQUIRED: The text used for the tab, as well as labelling the panel
+			 * ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel
 			 * @type {string}
 			 */
 			text: { type: String }

package/custom-elements.json

@@ -12586,7 +12586,7 @@
       "attributes": [
         {
           "name": "text",
-          "description": "REQUIRED: The text used for the tab, as well as labelling the panel",
+          "description": "ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel",
           "type": "string"
         },
         {
@@ -12606,7 +12606,7 @@
         {
           "name": "text",
           "attribute": "text",
-          "description": "REQUIRED: The text used for the tab, as well as labelling the panel",
+          "description": "ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel",
           "type": "string"
         },
         {

package/package.json

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