@brightspace-ui/core 3.193.0 → 3.194.1

package/components/inputs/docs/input-color.md

@@ -55,11 +55,12 @@ input.addEventListener('change', (e) => {
 * `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
-### Accessibility Properties
+## Accessibility
 
-To make your usage of `d2l-input-color` accessible, use the following properties when applicable:
+At its core, the color input is a button, so it relies on standard button semantics and adheres to [W3C's Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button) to ensure a smooth experience for all assistive technologies, but there are a few interesting details to note:
 
-| Attribute | Description |
-|---|---|
-| `label` | **REQUIRED** when type is `custom`. [Acts as a primary label for the button](https://www.w3.org/WAI/tutorials/forms/labels/). Visible unless `label-hidden` is also used. |
-| `label-hidden` | Use if label should be visually hidden. |
+ * `label` is required if `type` is `custom`, since it acts as a primary label for the button
+   * However, if `type` is set to `background` or `foreground` a simple default will be used if `label` is left empty
+ * `label-hidden` can be used to hide the label when there is sufficient visual context for sighted users; the label will remain available to screen reader users who may lack the visual context
+ * `associated-value` allows you to set a hex color against which the input's color contrast will be measured, which ensures end users will get appropriate warnings if they choose inaccessible color combinations
+ * The color input remains focusable even when `disabled` or in `read-only` mode, so that users can access the tooltip giving the current value

package/components/inputs/input-color.js

@@ -91,7 +91,7 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
 	static get properties() {
 		return {
 			/**
-			 * Value of an associated color as a HEX which will be used for color contrast analysis
+			 * ACCESSIBILITY: Value of an associated color as a HEX which will be used for color contrast analysis
 			 * @type {string}
 			 */
 			associatedValue: { attribute: 'associated-value', type: String },
@@ -106,7 +106,7 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
 			 */
 			disallowNone: { attribute: 'disallow-none', type: Boolean },
 			/**
-			 * REQUIRED: Label for the input, comes with a default value for background & foreground types.
+			 * ACCESSIBILITY: REQUIRED: Label for the input, comes with a default value for background & foreground types.
 			 * @type {string}
 			 */
 			label: {

package/components/typography/styles.js

@@ -171,10 +171,10 @@ const getHeadingFocusStyles = (selector) => {
 /**
  * A private helper method that should not be used by general consumers
  */
-export const _generateHeading1Styles = (selector) => {
+export const _generateHeading1Styles = (selector, includeFocus = false) => {
 	if (!_isValidCssSelector(selector)) return;
 
-	const focusStyles = getHeadingFocusStyles(selector);
+	const focusStyles = includeFocus ? getHeadingFocusStyles(selector) : unsafeCSS('');
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -194,7 +194,7 @@ export const _generateHeading1Styles = (selector) => {
 	`;
 };
 export const heading1Styles = css`
-	${_generateHeading1Styles('.d2l-heading-1')}
+	${_generateHeading1Styles('.d2l-heading-1', true)}
 	:host([skeleton]) .d2l-heading-1.d2l-skeletize {
 		height: 2.4rem;
 		overflow: hidden;
@@ -217,10 +217,10 @@ export const heading1Styles = css`
 /**
  * A private helper method that should not be used by general consumers
  */
-export const _generateHeading2Styles = (selector) => {
+export const _generateHeading2Styles = (selector, includeFocus = false) => {
 	if (!_isValidCssSelector(selector)) return;
 
-	const focusStyles = getHeadingFocusStyles(selector);
+	const focusStyles = includeFocus ? getHeadingFocusStyles(selector) : unsafeCSS('');
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -241,7 +241,7 @@ export const _generateHeading2Styles = (selector) => {
 	`;
 };
 export const heading2Styles = css`
-	${_generateHeading2Styles('.d2l-heading-2')}
+	${_generateHeading2Styles('.d2l-heading-2', true)}
 	:host([skeleton]) .d2l-heading-2.d2l-skeletize {
 		height: 1.8rem;
 		overflow: hidden;
@@ -264,10 +264,10 @@ export const heading2Styles = css`
 /**
  * A private helper method that should not be used by general consumers
  */
-export const _generateHeading3Styles = (selector) => {
+export const _generateHeading3Styles = (selector, includeFocus = false) => {
 	if (!_isValidCssSelector(selector)) return;
 
-	const focusStyles = getHeadingFocusStyles(selector);
+	const focusStyles = includeFocus ? getHeadingFocusStyles(selector) : unsafeCSS('');
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -287,7 +287,7 @@ export const _generateHeading3Styles = (selector) => {
 	`;
 };
 export const heading3Styles = css`
-	${_generateHeading3Styles('.d2l-heading-3')}
+	${_generateHeading3Styles('.d2l-heading-3', true)}
 	:host([skeleton]) .d2l-heading-3.d2l-skeletize {
 		height: 1.5rem;
 		overflow: hidden;
@@ -310,10 +310,10 @@ export const heading3Styles = css`
 /**
  * A private helper method that should not be used by general consumers
  */
-export const _generateHeading4Styles = (selector) => {
+export const _generateHeading4Styles = (selector, includeFocus = false) => {
 	if (!_isValidCssSelector(selector)) return;
 
-	const focusStyles = getHeadingFocusStyles(selector);
+	const focusStyles = includeFocus ? getHeadingFocusStyles(selector) : unsafeCSS('');
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -326,7 +326,7 @@ export const _generateHeading4Styles = (selector) => {
 	`;
 };
 export const heading4Styles = css`
-	${_generateHeading4Styles('.d2l-heading-4')}
+	${_generateHeading4Styles('.d2l-heading-4', true)}
 	:host([skeleton]) .d2l-heading-4.d2l-skeletize {
 		height: 1.2rem;
 		overflow: hidden;

package/components/typography/typography.js

@@ -20,10 +20,10 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
 		${_generateBodyCompactStyles('.d2l-typography .d2l-body-compact', false)}
 		${_generateBodySmallStyles('.d2l-typography .d2l-body-small', false)}
 		${_generateLabelStyles('.d2l-typography .d2l-label-text', false)}
-		${_generateHeading1Styles('.d2l-typography .d2l-heading-1')}
-		${_generateHeading2Styles('.d2l-typography .d2l-heading-2')}
-		${_generateHeading3Styles('.d2l-typography .d2l-heading-3')}
-		${_generateHeading4Styles('.d2l-typography .d2l-heading-4')}
+		${_generateHeading1Styles('.d2l-typography .d2l-heading-1', true)}
+		${_generateHeading2Styles('.d2l-typography .d2l-heading-2', true)}
+		${_generateHeading3Styles('.d2l-typography .d2l-heading-3', true)}
+		${_generateHeading4Styles('.d2l-typography .d2l-heading-4', true)}
 		${_generateBlockquoteStyles('.d2l-typography .d2l-blockquote')}
 	`;
 	document.head.appendChild(style);

package/custom-elements.json

@@ -5476,12 +5476,12 @@
       "attributes": [
         {
           "name": "label",
-          "description": "REQUIRED: Label for the input, comes with a default value for background & foreground types.",
+          "description": "ACCESSIBILITY: REQUIRED: Label for the input, comes with a default value for background & foreground types.",
           "type": "string"
         },
         {
           "name": "associated-value",
-          "description": "Value of an associated color as a HEX which will be used for color contrast analysis",
+          "description": "ACCESSIBILITY: Value of an associated color as a HEX which will be used for color contrast analysis",
           "type": "string"
         },
         {
@@ -5534,13 +5534,13 @@
         {
           "name": "label",
           "attribute": "label",
-          "description": "REQUIRED: Label for the input, comes with a default value for background & foreground types.",
+          "description": "ACCESSIBILITY: REQUIRED: Label for the input, comes with a default value for background & foreground types.",
           "type": "string"
         },
         {
           "name": "associatedValue",
           "attribute": "associated-value",
-          "description": "Value of an associated color as a HEX which will be used for color contrast analysis",
+          "description": "ACCESSIBILITY: Value of an associated color as a HEX which will be used for color contrast analysis",
           "type": "string"
         },
         {

package/helpers/mathjax.js

@@ -1,5 +1,3 @@
-import { getFlag } from './flags.js';
-
 /* When updating MathJax, update mathjaxBaseUrl to use the new version
  * and verify that the font mappings included in mathjaxFontMappings
  * match what's present in the MathJax-src repo.
@@ -40,16 +38,10 @@ class HtmlBlockMathRenderer {
 
 	async render(elem, options) {
 		if (!options.contextValues) return elem;
-		let context = options.contextValues.get(mathjaxContextKey);
-
-		if (getFlag('shield-12649-mathjax-default-context', true)) {
-			context = context || {
-				renderLatex: false,
-				outputScale: 1
-			};
-		} else {
-			if (context === undefined) return elem;
-		}
+		const context = options.contextValues.get(mathjaxContextKey) || {
+			renderLatex: false,
+			outputScale: 1
+		};
 
 		if (!elem.querySelector('math') && !(context.renderLatex && /\$\$|\\\(|\\\[|\\begin{|\\ref{|\\eqref{/.test(elem.innerHTML))) return elem;
 

package/package.json

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