@brightspace-ui/core 1.238.0 → 1.239.0

package/components/button/README.md

@@ -51,7 +51,7 @@ The `d2l-button` element can be used just like the native button element, but al
 
 | Property | Type | Description |
 |--|--|--|
-| `description` | String | A description to be added to the `button` for accessibility |
+| `description` | String | A description to be added to the `button` for accessibility for additional context |
 | `disabled` | Boolean | Disables the button |
 | `disabledTooltip` | String | Tooltip text when disabled |
 | `primary` | Boolean | Styles the button as a primary button |
@@ -130,6 +130,7 @@ The `d2l-button-icon` element can be used just like the native `button`, for ins
 
 | Property | Type | Description |
 |--|--|--|
+| `description` | String | A description to be added to the `button` for accessibility for additional context |
 | `icon` | String, required | [Preset icon key](../../components/icons#preset-icons) (e.g. `tier1:gear`) |
 | `text` | String, required | Accessible text for the buton |
 | `disabled` | Boolean | Disables the button |
@@ -148,6 +149,7 @@ To make your `d2l-button-icon` accessible, use the following properties when app
 | `aria-expanded` | [Indicate expansion state of a collapsible element](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-expanded). Example: [d2l-more-less](https://github.com/BrightspaceUI/core/blob/f9f30d0975ee5a8479263a84541fc3b781e8830f/components/more-less/more-less.js#L158). |
 | `aria-haspopup` | [Indicate clicking the button opens a menu](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-haspopup). Example: [d2l-dropdown](https://github.com/BrightspaceUI/core/blob/main/components/dropdown/dropdown-opener-mixin.js#L46). |
 | `aria-label` | Acts as a primary label. If `text` AND `aria-label` are provided, `aria-label` is used as the primary label, `text` is used as the tooltip. |
+| `description` | Use when text on button does not provide enough context. |
 
 ## Floating Buttons [d2l-floating-buttons]
 

package/components/button/button-icon.js

@@ -17,6 +17,12 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 
 	static get properties() {
 		return {
+			/**
+			 * A description to be added to the button for accessibility when text on button does not provide enough context
+			 * @type {string}
+			 */
+			description: { type: String },
+
 			/**
 			 * Aligns the leading edge of text if value is set to "text"
 			 * @type {'text'|''}
@@ -146,11 +152,14 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 
 		/** @internal */
 		this._buttonId = getUniqueId();
+		/** @internal */
+		this._describedById = getUniqueId();
 	}
 
 	render() {
 		return html`
 			<button
+				aria-describedby="${ifDefined(this.description ? this._describedById : undefined)}"
 				aria-disabled="${ifDefined(this.disabled && this.disabledTooltip ? 'true' : undefined)}"
 				aria-expanded="${ifDefined(this.ariaExpanded)}"
 				aria-haspopup="${ifDefined(this.ariaHaspopup)}"
@@ -170,6 +179,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 				type="${this._getType()}">
 				<d2l-icon icon="${ifDefined(this.icon)}" class="d2l-button-icon"></d2l-icon>
 		</button>
+		${this.description ? html`<span id="${this._describedById}" hidden>${this.description}</span>` : null}
 		${this.disabled && this.disabledTooltip ? html`<d2l-tooltip for="${this._buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
 		`;
 	}

package/components/button/button-subtle.js

@@ -155,6 +155,8 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 
 		/** @internal */
 		this._buttonId = getUniqueId();
+		/** @internal */
+		this._describedById = getUniqueId();
 	}
 
 	render() {
@@ -162,10 +164,11 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 			html`<d2l-icon icon="${this.icon}" class="d2l-button-subtle-icon"></d2l-icon>` : '';
 		return html`
 			<button
+				aria-describedby="${ifDefined(this.description ? this._describedById : undefined)}"
 				aria-disabled="${ifDefined(this.disabled && this.disabledTooltip ? 'true' : undefined)}"
 				aria-expanded="${ifDefined(this.ariaExpanded)}"
 				aria-haspopup="${ifDefined(this.ariaHaspopup)}"
-				aria-label="${ifDefined(this.description || this.ariaLabel)}"
+				aria-label="${ifDefined(this.ariaLabel)}"
 				?autofocus="${this.autofocus}"
 				class="d2l-label-text"
 				?disabled="${this.disabled && !this.disabledTooltip}"
@@ -182,6 +185,7 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 				<span class="d2l-button-subtle-content">${this.text}</span>
 				<slot></slot>
 			</button>
+			${this.description ? html`<span id="${this._describedById}" hidden>${this.description}</span>` : null}
 			${this.disabled && this.disabledTooltip ? html`<d2l-tooltip for="${this._buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
 		`;
 	}

package/components/button/button.js

@@ -90,15 +90,18 @@ class Button extends ButtonMixin(LitElement) {
 
 		/** @internal */
 		this._buttonId = getUniqueId();
+		/** @internal */
+		this._describedById = getUniqueId();
 	}
 
 	render() {
 		return html`
 			<button
+				aria-describedby="${ifDefined(this.description ? this._describedById : undefined)}"
 				aria-disabled="${ifDefined(this.disabled && this.disabledTooltip ? 'true' : undefined)}"
 				aria-expanded="${ifDefined(this.ariaExpanded)}"
 				aria-haspopup="${ifDefined(this.ariaHaspopup)}"
-				aria-label="${ifDefined(this.description || this.ariaLabel)}"
+				aria-label="${ifDefined(this.ariaLabel)}"
 				?autofocus="${this.autofocus}"
 				class="d2l-label-text"
 				?disabled="${this.disabled && !this.disabledTooltip}"
@@ -113,6 +116,7 @@ class Button extends ButtonMixin(LitElement) {
 				type="${this._getType()}">
 				<slot></slot>
 			</button>
+			${this.description ? html`<span id="${this._describedById}" hidden>${this.description}</span>` : null}
 			${this.disabled && this.disabledTooltip ? html`<d2l-tooltip for="${this._buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
 		`;
 	}

package/custom-elements.json

@@ -336,6 +336,11 @@
       "path": "./components/button/button-icon.js",
       "description": "A button component that can be used just like the native button for instances where only an icon is displayed.",
       "attributes": [
+        {
+          "name": "description",
+          "description": "A description to be added to the button for accessibility when text on button does not provide enough context",
+          "type": "string"
+        },
         {
           "name": "h-align",
           "description": "Aligns the leading edge of text if value is set to \"text\"",
@@ -370,6 +375,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "A description to be added to the button for accessibility when text on button does not provide enough context",
+          "type": "string"
+        },
         {
           "name": "hAlign",
           "attribute": "h-align",

package/package.json

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