@momentum-design/components 0.120.37 → 0.121.0

package/dist/components/animation/animation.component.d.ts

@@ -37,7 +37,7 @@ declare class Animation extends Component {
     /**
      * Aria-labelledby attribute to be set for accessibility
      */
-    ariaLabelledBy: string | null;
+    ariaLabelledby: string | null;
     /**
      * Lottie animation instance
      */

package/dist/components/animation/animation.component.js

@@ -13,6 +13,7 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import lottie from 'lottie-web/build/player/lottie_light';
 import animationManifest from '@momentum-design/animations/dist/manifest';
 import { Component } from '../../models';
+import { ROLE } from '../../utils/roles';
 import styles from './animation.styles';
 import { DEFAULTS } from './animation.constants';
 /**
@@ -52,7 +53,7 @@ class Animation extends Component {
         /**
          * Aria-labelledby attribute to be set for accessibility
          */
-        this.ariaLabelledBy = null;
+        this.ariaLabelledby = null;
         /**
          * Container for the animation
          */
@@ -143,8 +144,8 @@ class Animation extends Component {
         if (changedProperties.has('name') || changedProperties.has('loop') || changedProperties.has('autoplay')) {
             this.getAnimationData();
         }
-        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledBy')) {
-            this.role = this.ariaLabel || this.ariaLabelledBy ? 'img' : null;
+        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledby')) {
+            this.role = this.ariaLabel || this.ariaLabelledby ? ROLE.IMG : null;
         }
     }
     disconnectedCallback() {
@@ -180,5 +181,5 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'aria-labelledby' }),
     __metadata("design:type", Object)
-], Animation.prototype, "ariaLabelledBy", void 0);
+], Animation.prototype, "ariaLabelledby", void 0);
 export default Animation;

package/dist/components/dialog/dialog.component.d.ts

@@ -117,7 +117,7 @@ declare class Dialog extends Dialog_base {
      * Defines a string value for the aria-describedby attribute that refers to the element
      * describing the dialog for accessibility
      */
-    ariaDescribedBy: string | null;
+    ariaDescribedby: string | null;
     /**
      * Defines a string value for the aria-description attribute that refers to the element
      * describing the dialog for accessibility

package/dist/components/dialog/dialog.component.js

@@ -131,7 +131,7 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
          * Defines a string value for the aria-describedby attribute that refers to the element
          * describing the dialog for accessibility
          */
-        this.ariaDescribedBy = null;
+        this.ariaDescribedby = null;
         /**
          * Defines a string value for the aria-description attribute that refers to the element
          * describing the dialog for accessibility
@@ -251,8 +251,8 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
             this.updateFooterButtonColors(this.variant);
         }
         if (changedProperties.has('ariaLabel') ||
-            changedProperties.has('ariaLabelledBy') ||
-            changedProperties.has('ariaDescribedBy') ||
+            changedProperties.has('ariaLabelledby') ||
+            changedProperties.has('ariaDescribedby') ||
             changedProperties.has('ariaDescription') ||
             changedProperties.has('headerText') ||
             changedProperties.has('descriptionText')) {
@@ -296,7 +296,7 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
             }
         }
         // If aria-describedby or aria-description is already set, do not override it
-        if (!this.ariaDescribedBy && !this.ariaDescription) {
+        if (!this.ariaDescribedby && !this.ariaDescription) {
             if (this.descriptionText) {
                 this.setAttribute('aria-description', this.descriptionText);
             }
@@ -462,7 +462,7 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true, attribute: 'aria-describedby' }),
     __metadata("design:type", Object)
-], Dialog.prototype, "ariaDescribedBy", void 0);
+], Dialog.prototype, "ariaDescribedby", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'aria-description' }),
     __metadata("design:type", Object)

package/dist/components/icon/icon.component.d.ts

@@ -72,7 +72,7 @@ declare class Icon extends Component {
     /**
      * Aria-labelledby attribute to be set for accessibility
      */
-    ariaLabelledBy: string | null;
+    ariaLabelledby: string | null;
     private readonly iconProviderContext;
     private abortController?;
     constructor();

package/dist/components/icon/icon.component.js

@@ -77,7 +77,7 @@ class Icon extends Component {
         /**
          * Aria-labelledby attribute to be set for accessibility
          */
-        this.ariaLabelledBy = null;
+        this.ariaLabelledby = null;
         this.iconProviderContext = providerUtils.consume({ host: this, context: IconProvider.Context });
         this.abortController = new AbortController(); // Initialize AbortController
     }
@@ -205,8 +205,8 @@ class Icon extends Component {
                 }
             });
         }
-        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledBy')) {
-            this.role = this.ariaLabel || this.ariaLabelledBy ? 'img' : null;
+        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledby')) {
+            this.role = this.ariaLabel || this.ariaLabelledby ? 'img' : null;
         }
         if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
             this.updateSize();
@@ -263,7 +263,7 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'aria-labelledby' }),
     __metadata("design:type", Object)
-], Icon.prototype, "ariaLabelledBy", void 0);
+], Icon.prototype, "ariaLabelledby", void 0);
 __decorate([
     state(),
     __metadata("design:type", AbortController)

package/dist/components/illustration/illustration.component.js

@@ -12,6 +12,7 @@ import { property, state } from 'lit/decorators.js';
 import { Component } from '../../models';
 import providerUtils from '../../utils/provider';
 import IllustrationProvider from '../illustrationprovider/illustrationprovider.component';
+import { ROLE } from '../../utils/roles';
 import styles from './illustration.styles';
 import { svgFetch } from './illustration.utils';
 import { DEFAULTS } from './illustration.constants';
@@ -181,8 +182,8 @@ class Illustration extends Component {
                 }
             });
         }
-        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledBy')) {
-            this.role = this.ariaLabel || this.ariaLabelledby ? 'img' : null;
+        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledby')) {
+            this.role = this.ariaLabel || this.ariaLabelledby ? ROLE.IMG : null;
         }
     }
     disconnectedCallback() {

package/dist/custom-elements.json

@@ -1637,7 +1637,7 @@
             },
             {
               "kind": "field",
-              "name": "ariaLabelledBy",
+              "name": "ariaLabelledby",
               "type": {
                 "text": "string | null"
               },
@@ -1775,7 +1775,7 @@
               },
               "default": "null",
               "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledBy"
+              "fieldName": "ariaLabelledby"
             }
           ],
           "superclass": {
@@ -2690,7 +2690,7 @@
             },
             {
               "kind": "field",
-              "name": "ariaDescribedBy",
+              "name": "ariaDescribedby",
               "type": {
                 "text": "string | null"
               },
@@ -3034,7 +3034,7 @@
               },
               "default": "null",
               "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
-              "fieldName": "ariaDescribedBy",
+              "fieldName": "ariaDescribedby",
               "inheritedFrom": {
                 "name": "Dialog",
                 "module": "src/components/dialog/dialog.component.ts"
@@ -15280,7 +15280,7 @@
             },
             {
               "kind": "field",
-              "name": "ariaDescribedBy",
+              "name": "ariaDescribedby",
               "type": {
                 "text": "string | null"
               },
@@ -16052,7 +16052,7 @@
               },
               "default": "null",
               "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
-              "fieldName": "ariaDescribedBy"
+              "fieldName": "ariaDescribedby"
             },
             {
               "name": "aria-description",
@@ -18254,7 +18254,7 @@
             },
             {
               "kind": "field",
-              "name": "ariaLabelledBy",
+              "name": "ariaLabelledby",
               "type": {
                 "text": "string | null"
               },
@@ -18386,7 +18386,7 @@
               },
               "default": "null",
               "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledBy"
+              "fieldName": "ariaLabelledby"
             }
           ],
           "superclass": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.120.37",
+  "version": "0.121.0",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"