diff --git a/e2e/visual/no-theme.spec.js b/e2e/visual/no-theme.spec.js index 16f4ac55e..b22b2ca20 100644 --- 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 index 69dcd20b5..20b5158c1 100644 --- 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 index 2c62beaeb..24141e2cd 100644 --- 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-40)); --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 index d9675a000..7ea3f2013 100644 --- 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); }); });