diff --git a/__snapshots__/input/patternhub/input-overview-should-match-screenshot.png b/__snapshots__/input/patternhub/input-overview-should-match-screenshot.png index fe946536e9a..a01f2709406 100644 Binary files a/__snapshots__/input/patternhub/input-overview-should-match-screenshot.png and b/__snapshots__/input/patternhub/input-overview-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png index 6c5d9db8684..e16ed4f4335 100644 Binary files a/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png index ec66b5bce2b..545cb5470c0 100644 Binary files a/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png index b40f7aa5384..e04f76d3e79 100644 Binary files a/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png index 7d08ac4b269..2695e6690dd 100644 Binary files a/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png index 61d2c9a2b04..5b3bd3c680a 100644 Binary files a/__snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png index 10c978ad1fe..068f18703cc 100644 Binary files a/__snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png index 7600f1d3950..02a17013eef 100644 Binary files a/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/component/firefox/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/firefox/DBSelect-should-match-screenshot.png index a4f5d3fa3c4..a5c23cc006f 100644 Binary files a/__snapshots__/select/component/firefox/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/firefox/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png index 7600f1d3950..02a17013eef 100644 Binary files a/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/patternhub/select-overview-should-match-screenshot.png b/__snapshots__/select/patternhub/select-overview-should-match-screenshot.png index 06bb49ee9ef..ea29340d1bb 100644 Binary files a/__snapshots__/select/patternhub/select-overview-should-match-screenshot.png and b/__snapshots__/select/patternhub/select-overview-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png index 100ae60747f..2990d1ea38f 100644 Binary files a/__snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png and b/__snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png index 148fc3a7220..d1a8a25ca28 100644 Binary files a/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png and b/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png index 1bade603ccb..bc015826dae 100644 Binary files a/__snapshots__/select/showcase/firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png and b/__snapshots__/select/showcase/firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/mobile-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/mobile-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png index b8353b49c61..377339936cb 100644 Binary files a/__snapshots__/select/showcase/mobile-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png and b/__snapshots__/select/showcase/mobile-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/mobile-safari/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/mobile-safari/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png index 19ed60439ff..282206641b9 100644 Binary files a/__snapshots__/select/showcase/mobile-safari/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png and b/__snapshots__/select/showcase/mobile-safari/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/webkit/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/webkit/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png index a640ce4fae0..70aee132f69 100644 Binary files a/__snapshots__/select/showcase/webkit/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png and b/__snapshots__/select/showcase/webkit/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/patternhub/textarea-overview-should-match-screenshot.png b/__snapshots__/textarea/patternhub/textarea-overview-should-match-screenshot.png index 0fc62c464de..0c59544bb62 100644 Binary files a/__snapshots__/textarea/patternhub/textarea-overview-should-match-screenshot.png and b/__snapshots__/textarea/patternhub/textarea-overview-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png index b519088056e..054945e6c70 100644 Binary files a/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png index 800dc59b295..1f4e020a357 100644 Binary files a/__snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/mobile-safari/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/mobile-safari/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png index 7b818b28fbe..2d51cf7d7ff 100644 Binary files a/__snapshots__/textarea/showcase/mobile-safari/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/mobile-safari/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/webkit/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/webkit/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png index 97a7d7bb3f0..dc1774d9116 100644 Binary files a/__snapshots__/textarea/showcase/webkit/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/webkit/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ diff --git a/package-lock.json b/package-lock.json index 40a567b4809..db0cfdb076c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40731,7 +40731,7 @@ }, "showcases/next-showcase": { "dependencies": { - "next": "*", + "next": "latest", "react": "18.3.1", "react-dom": "18.3.1" }, diff --git a/packages/components/src/styles/_component.scss b/packages/components/src/styles/_component.scss index 1d802985af9..31195e880e5 100644 --- a/packages/components/src/styles/_component.scss +++ b/packages/components/src/styles/_component.scss @@ -8,6 +8,8 @@ $min-mobile-header-height: calc( ); $default-disabled: 0.4; +// 0.68 would be fine as well for a11y, but we are big Bryan Adams fans :) +$placeholder-disabled: 0.69; %default-adaptive-border { border: variables.$db-border-height-3xs solid diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss index f075b5b7d52..e31f240bb6c 100644 --- a/packages/components/src/styles/_form-components.scss +++ b/packages/components/src/styles/_form-components.scss @@ -68,7 +68,7 @@ $check-border-size: min(#{variables.$db-border-height-2xs}, 2px); label { @extend %db-overwrite-font-size-md; - opacity: component.$default-disabled; + opacity: component.$placeholder-disabled; position: absolute; z-index: 2; inset-block-start: calc( @@ -134,7 +134,7 @@ $check-border-size: min(#{variables.$db-border-height-2xs}, 2px); transition: opacity #{variables.$db-transition-straight-emotional}; } - opacity: component.$default-disabled; + opacity: component.$placeholder-disabled; } } } @@ -316,7 +316,7 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden" ); @include placeholder-content() { - opacity: component.$default-disabled; + opacity: component.$placeholder-disabled; } @include helpers.hover { diff --git a/showcases/e2e/home/showcase-home.spec.ts b/showcases/e2e/home/showcase-home.spec.ts index e2420e06845..0e46e1c02b3 100644 --- a/showcases/e2e/home/showcase-home.spec.ts +++ b/showcases/e2e/home/showcase-home.spec.ts @@ -76,9 +76,8 @@ test.describe('Home', () => { const accessibilityScanResults = await new AxeBuilder({ page }) - // TODO: Currently disable till we solved https://github.com/db-ui/mono/issues/2587 // TODO: There might be an issue our implementation of which elements get which roles - .disableRules(['color-contrast', 'aria-allowed-role']) + .disableRules(['aria-allowed-role']) .analyze(); expect(accessibilityScanResults.violations).toEqual([]); diff --git a/showcases/e2e/input/input-a11y.spec.ts b/showcases/e2e/input/input-a11y.spec.ts index 97915e7c5bc..a6e7aab9509 100644 --- a/showcases/e2e/input/input-a11y.spec.ts +++ b/showcases/e2e/input/input-a11y.spec.ts @@ -3,14 +3,12 @@ import { test } from '@playwright/test'; import { runA11yCheckerTest, runAxeCoreTest } from '../default.ts'; import { lvl3 } from '../fixtures/variants'; -const axeDisableRules = ['color-contrast']; // TODO: Currently disable till we solved https://github.com/db-ui/mono/issues/2587 test.describe('DBInput', () => { - runAxeCoreTest({ path: '03/input', axeDisableRules }); - runAxeCoreTest({ path: '03/input', color: lvl3, axeDisableRules }); + runAxeCoreTest({ path: '03/input' }); + runAxeCoreTest({ path: '03/input', color: lvl3 }); runAxeCoreTest({ path: '03/input', - density: 'functional', - axeDisableRules + density: 'functional' }); runA11yCheckerTest({ path: '03/input' diff --git a/showcases/e2e/select/select-a11y.spec.ts b/showcases/e2e/select/select-a11y.spec.ts index a9d9389b93d..c3e0807ea54 100644 --- a/showcases/e2e/select/select-a11y.spec.ts +++ b/showcases/e2e/select/select-a11y.spec.ts @@ -3,15 +3,12 @@ import { test } from '@playwright/test'; import { runA11yCheckerTest, runAxeCoreTest } from '../default.ts'; import { lvl3 } from '../fixtures/variants'; -const axeDisableRules = ['color-contrast']; // TODO: Currently disable till we solved https://github.com/db-ui/mono/issues/2587 - test.describe('DBSelect', () => { - runAxeCoreTest({ path: '03/select', axeDisableRules }); - runAxeCoreTest({ path: '03/select', color: lvl3, axeDisableRules }); + runAxeCoreTest({ path: '03/select' }); + runAxeCoreTest({ path: '03/select', color: lvl3 }); runAxeCoreTest({ path: '03/select', - density: 'functional', - axeDisableRules + density: 'functional' }); runA11yCheckerTest({ path: '03/select' }); }); diff --git a/showcases/e2e/textarea/textarea-a11y.spec.ts b/showcases/e2e/textarea/textarea-a11y.spec.ts index d094b047ffd..f88758db518 100644 --- a/showcases/e2e/textarea/textarea-a11y.spec.ts +++ b/showcases/e2e/textarea/textarea-a11y.spec.ts @@ -3,17 +3,15 @@ import { test } from '@playwright/test'; import { runA11yCheckerTest, runAxeCoreTest } from '../default.ts'; import { lvl3 } from '../fixtures/variants'; -const axeDisableRules = ['color-contrast']; // TODO: Currently disable till we solved https://github.com/db-ui/mono/issues/2587 // TODO: disabled element_scrollable_tabbable it's a false-positive: https://github.com/IBMa/equal-access/issues/1911 const aCheckerDisableRules = ['element_scrollable_tabbable']; test.describe('DBTextarea', () => { - runAxeCoreTest({ path: '03/textarea', axeDisableRules }); - runAxeCoreTest({ path: '03/textarea', color: lvl3, axeDisableRules }); + runAxeCoreTest({ path: '03/textarea' }); + runAxeCoreTest({ path: '03/textarea', color: lvl3 }); runAxeCoreTest({ path: '03/textarea', - density: 'functional', - axeDisableRules + density: 'functional' }); runA11yCheckerTest({ path: '03/textarea', aCheckerDisableRules }); });