@brightspace-ui/core 3.53.0 → 3.54.0

package/components/meter/README.md

@@ -85,6 +85,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

@@ -74,7 +74,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-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.54.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",