Resolve white spaces issue

inmanta · Dec 4, 2024 · e0a2097 · e0a2097
1 parent b2e511c
commit e0a2097
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/changelogs/unreleased/6087-white-spaces-stencil.yml b/changelogs/unreleased/6087-white-spaces-stencil.yml
@@ -0,0 +1,4 @@
+description: Change stencil names to aria-labels to avoid issue with class names not handling white spaces
+issue-nr: 6087
+change-type: patch
+destination-branches: [master]
diff --git a/src/UI/Components/Diagram/stencil/helpers.test.ts b/src/UI/Components/Diagram/stencil/helpers.test.ts
@@ -39,20 +39,20 @@ describe("createStencilElement", () => {
     expect(embeddedElementWithModel.attributes.attrs?.body?.fill).toEqual(
       "var(--pf-v5-global--palette--blue-400)",
     );
-    expect(embeddedElementWithModel.attributes.attrs?.body?.class).toEqual(
-      "body_default",
-    );
+    expect(
+      embeddedElementWithModel.attributes.attrs?.body?.["aria-labelledby"],
+    ).toEqual("body_default");
 
     expect(embeddedElementWithModel.attributes.attrs?.bodyTwo?.fill).toEqual(
       "var(--pf-v5-global--palette--white)",
     );
-    expect(embeddedElementWithModel.attributes.attrs?.bodyTwo?.class).toEqual(
-      "bodyTwo_default",
-    );
+    expect(
+      embeddedElementWithModel.attributes.attrs?.bodyTwo?.["aria-labelledby"],
+    ).toEqual("bodyTwo_default");
 
-    expect(embeddedElementWithModel.attributes.attrs?.label?.class).toEqual(
-      "text_default",
-    );
+    expect(
+      embeddedElementWithModel.attributes.attrs?.label?.["aria-labelledby"],
+    ).toEqual("text_default");
     expect(
       embeddedElementWithModel.attributes.attrs?.borderTop?.height,
     ).toEqual(1);
@@ -66,7 +66,7 @@ describe("createStencilElement", () => {
     expect(nonEmbedded.attributes.attrs?.body?.fill).toEqual(
       "var(--pf-v5-global--palette--purple-500)",
     );
-    expect(nonEmbedded.attributes.attrs?.body?.class).toEqual(
+    expect(nonEmbedded.attributes.attrs?.body?.["aria-labelledby"]).toEqual(
       "body_nonEmbedded",
     );
     expect(nonEmbedded.attributes.attrs?.borderTop?.height).toEqual(0);
@@ -128,8 +128,8 @@ describe("toggleDisabledStencil", () => {
     const elements = elementsInfo.map((element, index) => {
       const div = document.createElement("div");
 
-      div.classList.add(element[0]);
       div.setAttribute("data-testid", `${name}-${index}`);
+      div.setAttribute("aria-labelledby", element[0]);
 
       if (disabled) {
         div.classList.add(element[1]);

diff --git a/src/UI/Components/Diagram/stencil/helpers.ts b/src/UI/Components/Diagram/stencil/helpers.ts
@@ -72,22 +72,22 @@ export const createStencilElement = (
     id,
     attrs: {
       body: {
-        class: "body_" + name,
+        "aria-labelledby": "body_" + name,
         width: 7,
         height: 40,
         x: 233,
         fill: isEmbeddedEntity ? HeaderColor.EMBEDDED : HeaderColor.RELATION,
         stroke: "none",
       },
       bodyTwo: {
-        class: "bodyTwo_" + name,
+        "aria-labelledby": "bodyTwo_" + name,
         width: 240,
         height: 40,
         fill: global_palette_white.var,
         stroke: "none",
       },
       label: {
-        class: "text_" + name,
+        "aria-labelledby": "text_" + name,
         refX: undefined, // reset the default
         x: "10",
         textAnchor: "start",
@@ -154,15 +154,15 @@ export const toggleDisabledStencil = (
   //disable Inventory Stencil for inter-service relation instance
   const elements = [
     {
-      selector: `.body_${stencilName}`,
+      selector: `[aria-labelledby="body_${stencilName}"]`,
       className: "stencil_accent-disabled",
     },
     {
-      selector: `.bodyTwo_${stencilName}`,
+      selector: `[aria-labelledby="bodyTwo_${stencilName}"]`,
       className: "stencil_body-disabled",
     },
     {
-      selector: `.text_${stencilName}`,
+      selector: `[aria-labelledby="text_${stencilName}"]`,
       className: "stencil_text-disabled",
     },
   ];