qc-trousse-sdg 1.4.0 → 1.4.1

package/src/sdg/components/DropdownList/DropdownListButton/DropdownListButton.svelte

@@ -25,19 +25,18 @@
     bind:this={button}
     {...rest}
 >
-    <span class="qc-dropdown-text">
-        {#if selectedOptionsText.length > 0}
-            <span class="qc-dropdown-choice">{@html selectedOptionsText}</span>
-        {:else}
-            <span class="qc-dropdown-placeholder">{@html placeholder}</span>
-        {/if}
-    </span>
+    {#if selectedOptionsText.length > 0}
+        <span class="qc-dropdown-choice">{@html selectedOptionsText}</span>
+    {:else}
+        <span class="qc-dropdown-placeholder">{@html placeholder}</span>
+    {/if}
 
-    <span class={["qc-dropdown-button-icon", expanded && "qc-dropdown-button-icon-expanded"]}>
+    <span class={["qc-dropdown-button-icon"]}>
         <Icon
             type="chevron-up-thin"
             color={disabled ? "grey-regular" : "blue-piv"}
             size="sm"
+            rotate={expanded ? 0 : 180}
         />
     </span>
 </button>

package/src/sdg/components/DropdownList/DropdownListButton/_dropdownListButton.scss

@@ -30,12 +30,6 @@ $min-height: 40;
   }
 }
 
-.qc-dropdown-text {
-  display: flex;
-  justify-items: start;
-  overflow: hidden;
-}
-
 %dropdown-placeholder-text {
   display: block;
   justify-content: start;
@@ -56,10 +50,6 @@ $min-height: 40;
 }
 
 .qc-dropdown-button-icon {
-  align-items: center;
-  rotate: 180deg;
+  display: flex;
+  align-content: center;
 }
-
-.qc-dropdown-button-icon-expanded {
-  transform: rotate(180deg);
-}

package/src/sdg/components/TextField/TextField.svelte

@@ -9,14 +9,14 @@
 
     let {
         label = '',
-        required = $bindable(),
+        required = $bindable(false),
         description,
         size,
         maxlength,
         maxlengthReached = $bindable(false),
         invalidAtSubmit = $bindable(false),
-        value = "",
-        invalid = $bindable(),
+        value = $bindable(""),
+        invalid = $bindable(false),
         invalidText,
         describedBy = $bindable([]),
         labelElement = $bindable(),
@@ -71,6 +71,8 @@
         }
     })
 
+
+
     $effect(() => {
         charCountText = ''
         if (!maxlength) return;
@@ -107,8 +109,8 @@
             ].filter(Boolean)
             .join(' ')
         )
-        if (invalid) input.setAttribute('aria-invalid', invalid)
-        if (required) input.setAttribute('aria-required', required)
+        input.setAttribute('aria-invalid', invalid)
+        input.setAttribute('aria-required', required)
     })
 
 </script>

package/src/sdg/components/TextField/TextFieldWC.svelte

@@ -20,7 +20,7 @@
     setContext('webComponentMode', true)
 
     let {
-            invalid,
+            invalid = $bindable(false),
             invalidText,
             label,
             description,

package/tests/dropdown-list.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test';
 import path = require('path');
 
 test.beforeEach(async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/dropdownList.test.html');
+    const htmlFilePath = path.resolve(__dirname, '../public/dropdownListBaseline.test.html');
     await page.goto(`file://${htmlFilePath}`);
 });
 

package/tests/textfield-svelte.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+test.beforeEach(async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/textFieldSvelte.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+})
+
+/* test des composants web de la trousse */
+test('textfield ref', {
+    tag: ['@svelte', '@textfield']
+}, async ({ page }) => {
+    await expect(page).toHaveScreenshot('textField.png', {fullPage: true});
+});
+
+test.describe('Aria', () => {
+    test('aria-required', async ({ page }) => {
+        await expect(page.getByRole('textbox', { name: 'Large', exact: true })).toHaveAttribute('aria-required', 'true');
+    });
+
+    test('aria-invalid', async ({ page }) => {
+        await expect(page.getByRole('textbox', { name: 'Moyen', exact: true })).toHaveAttribute('aria-invalid', 'true');
+
+        await page.getByRole('textbox', { name: 'Moyen' }).click();
+        await page.getByRole('textbox', { name: 'Moyen' }).fill('1');
+        await expect(page.getByRole('textbox', { name: 'Moyen', exact: true })).toHaveAttribute('aria-invalid', 'false');
+    });
+});

package/tests/textfield.spec.ts

@@ -1,6 +1,11 @@
 import { test, expect } from '@playwright/test';
 import path = require('path');
 
+test.beforeEach(async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/textFieldBaseline.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+})
+
 /* test des composants web de la trousse */
 test('textfield ref', {
     tag: ['@baseline', '@textfield']
@@ -12,10 +17,21 @@ test('textfield ref', {
 });
 /* test des composants svelte */
 test('textfield svelte', {
-    tag: ['@svelte', '@textfield']
+    tag: ['@baseline', '@textfield']
 }, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/textFieldEmbedded.test.html');
-      // Navigue vers le fichier en utilisant le protocole file://
-      await page.goto(`file://${htmlFilePath}`);
-      await expect(page).toHaveScreenshot('textField.png', {fullPage: true});
-});
+    await expect(page).toHaveScreenshot('textField.png', {fullPage: true});
+});
+
+test.describe('Aria', () => {
+    test('aria-required', async ({ page }) => {
+        await expect(page.getByRole('textbox', { name: 'Large', exact: true })).toHaveAttribute('aria-required', 'true');
+    });
+
+    test('aria-invalid', async ({ page }) => {
+        await expect(page.getByRole('textbox', { name: 'Moyen', exact: true })).toHaveAttribute('aria-invalid', 'true');
+
+        await page.getByRole('textbox', { name: 'Moyen' }).click();
+        await page.getByRole('textbox', { name: 'Moyen' }).fill('1');
+        await expect(page.getByRole('textbox', { name: 'Moyen', exact: true })).toHaveAttribute('aria-invalid', 'false');
+    });
+});