Commit d946182a authored by catch's avatar catch
Browse files

fix: #3618140 Improve the accessibility of focus outlines 

By: kentr
By: mgifford
By: mherchel
By: smustgrave
By: gábor hojtsy
parent 42f58b39

core/profiles/demo_umami/tests/src/FunctionalJavascript/MultipleRequestsPerformanceTestAssertions/umamiNodeAddEditor.yml

+1 −1
Changes for core/profiles/demo_umami/tests/src/FunctionalJavascript/MultipleRequestsPerformanceTestAssertions/umamiNodeAddEditor.yml: 1 added line, 1 removed line.
Original line number Diff line number Diff line 
ScriptCount: 25

ScriptBytes: 3000544

StylesheetCount: 11

StylesheetBytes: 1084377
 
StylesheetBytes: 1080352

core/profiles/standard/tests/src/FunctionalJavascript/StandardPerformanceTestAssertions/testAdmin.yml

+1 −1
Changes for core/profiles/standard/tests/src/FunctionalJavascript/StandardPerformanceTestAssertions/testAdmin.yml: 1 added line, 1 removed line.
Original line number Diff line number Diff line
@@ -41,4 +41,4 @@ CacheTagGroupedLookups: 
ScriptCount: 10

ScriptBytes: 155112

StylesheetCount: 3

StylesheetBytes: 233044
 
StylesheetBytes: 230343

core/themes/default_admin/css/_variables/variables-color-semantic.css

+2 −2
Changes for core/themes/default_admin/css/_variables/variables-color-semantic.css: 2 added lines, 2 removed lines.
Original line number Diff line number Diff line
@@ -115,10 +115,10 @@ 
   *   --admin-color-focus-neutral  neutral focus-ring variant ([data-admin-focus]).

   *   --admin-color-text-disabled / -bg-disabled / -border-disabled  disabled controls.

   */

  --admin-color-focus: light-dark(color-mix(in srgb, #007dfa 60%, transparent), #51a8ff);

  --admin-color-focus: light-dark(#007dfa, #51a8ff);

  /* @todo this is used in box-shadow focus states, which will be phased out in favor of outline. */

  --admin-color-focus-border: light-dark(color-mix(in lch, black 20%, transparent), color-mix(in lch, black 80%, transparent));

  --admin-color-focus-neutral: light-dark(color-mix(in lch, black 40%, transparent), color-mix(in lch, white 80%, transparent));

  --admin-color-focus-neutral: light-dark(#595959, white);

  --admin-color-text-disabled: light-dark(var(--admin-color-gray-700), #919191);

  --admin-color-bg-disabled: light-dark(#eaeaea, #313134);

  --admin-color-border-disabled: light-dark(var(--admin-color-gray-300), #555);

core/themes/default_admin/css/_variables/variables-color-semantic.pcss.css

+2 −2
Changes for core/themes/default_admin/css/_variables/variables-color-semantic.pcss.css: 2 added lines, 2 removed lines.
Original line number Diff line number Diff line
@@ -108,10 +108,10 @@ 
   *   --admin-color-focus-neutral  neutral focus-ring variant ([data-admin-focus]).

   *   --admin-color-text-disabled / -bg-disabled / -border-disabled  disabled controls.

   */

  --admin-color-focus: light-dark(color-mix(in srgb, #007dfa 60%, transparent), #51a8ff);

  --admin-color-focus: light-dark(#007dfa, #51a8ff);

  /* @todo this is used in box-shadow focus states, which will be phased out in favor of outline. */

  --admin-color-focus-border: light-dark(color-mix(in lch, black 20%, transparent), color-mix(in lch, black 80%, transparent));

  --admin-color-focus-neutral: light-dark(color-mix(in lch, black 40%, transparent), color-mix(in lch, white 80%, transparent));

  --admin-color-focus-neutral: light-dark(#595959, white);

  --admin-color-text-disabled: light-dark(var(--admin-color-gray-700), #919191);

  --admin-color-bg-disabled: light-dark(#eaeaea, #313134);

  --admin-color-border-disabled: light-dark(var(--admin-color-gray-300), #555);

core/themes/default_admin/css/_variables/variables-misc.css

+1 −3
Changes for core/themes/default_admin/css/_variables/variables-misc.css: 1 added line, 3 removed lines.
Original line number Diff line number Diff line
@@ -20,11 +20,9 @@ 
   * Common.

   */

  --transition: all var(--admin-duration-fast) var(--admin-easing); /* Default Admin 'all' composite. */

  --focus-border-size: calc(var(--admin-radius-2xs) - 1px);

  --focus-border-offset-size: 0px;

  --outline-size: 0.25rem;

  --outline-offset: 2px;

  --focus-outline: var(--outline-size) solid var(--admin-color-focus);

  --focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--admin-color-bg-surface), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--admin-color-focus);



  /**

   * Shadows.