test(a11y): remove scrollable rule for palette

This is resolved now 🎉
bpmn-io · Oct 12, 2023 · 01403ab · 01403ab
1 parent 0c90122
commit 01403ab
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 22 deletions.
diff --git a/e2e/visual/no-theme.spec.js b/e2e/visual/no-theme.spec.js
@@ -77,13 +77,8 @@ test('no-theme - editor', async ({ page, makeAxeBuilder }) => {
   await expect(page).toHaveScreenshot();
 
   // and then
-  // @Note(pinussilvestrus): the palette entries are currently
-  // not keyboard accessible, as we need to invest in an overall
-  // editor keyboard experience
-  // cf. https://github.com/bpmn-io/form-js/issues/536
   const results = await makeAxeBuilder({
     disableRules: [
-      'scrollable-region-focusable',
       'page-has-heading-one'
     ]
   }).analyze();

diff --git a/e2e/visual/theming.spec.js b/e2e/visual/theming.spec.js
@@ -77,13 +77,8 @@ test('theming - editor', async ({ page, makeAxeBuilder }) => {
   await expect(page).toHaveScreenshot();
 
   // and then
-  // @Note(pinussilvestrus): the palette entries are currently
-  // not keyboard accessible, as we need to invest in an overall
-  // editor keyboard experience
-  // cf. https://github.com/bpmn-io/form-js/issues/536
   const results = await makeAxeBuilder({
     disableRules: [
-      'scrollable-region-focusable',
       'page-has-heading-one'
     ]
   }).analyze();

diff --git a/packages/form-js-editor/assets/form-js-editor-base.css b/packages/form-js-editor/assets/form-js-editor-base.css
@@ -61,7 +61,7 @@
     --cds-border-strong,
     var(--cds-border-strong-01, var(--color-grey-225-10-80))
   );
-  --color-palette-field-focus: var(--cds-border-interactive, var(--color-blue-219-100-53));
+  --color-palette-field-focus: var(--cds-border-interactive, var(--color-blue-205-100-45));
   --color-palette-field-hover-background: var(--cds-background-hover, var(--color-grey-225-10-90));
   --cursor-palette-field: grab;
   --palette-width: 250px;
@@ -628,6 +628,7 @@
   font-size: 11px;
   align-items: center;
   border: none;
+  font-family: inherit;
   user-select: none;
   color: var( --color-palette-field);
   background: var(--color-palette-field-background);
@@ -648,6 +649,7 @@
 
 .fjs-palette-field .fjs-palette-field-text {
   text-align: center;
+  width: inherit;
 }
 
 .fjs-palette-container .fjs-palette-field:hover {

diff --git a/packages/form-js-editor/test/spec/FormEditor.spec.js b/packages/form-js-editor/test/spec/FormEditor.spec.js
@@ -1501,17 +1501,7 @@ describe('FormEditor', function() {
       });
 
       // then
-      // @Note(pinussilvestrus): the palette entries are currently
-      // not keyboard accessible, as we need to invest in an overall
-      // editor keyboard experience
-      // cf. https://github.com/bpmn-io/form-js/issues/536
-      await expectNoViolations(container, {
-        rules: {
-          'scrollable-region-focusable': {
-            enabled: false
-          }
-        }
-      });
+      await expectNoViolations(container);
     });
 
   });