From d79d7da299ae9e87addb6d8925ff77155cdf883e Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 14 Nov 2022 16:12:24 -0500 Subject: [PATCH] various improvements in forced-colors mode --- docs/assets/plugins/search/search.css | 25 +++++++++---------- docs/resources/changelog.md | 12 ++++++++- src/components/button/button.styles.ts | 6 +++++ src/components/dialog/dialog.styles.ts | 12 ++++----- src/components/drawer/drawer.styles.ts | 12 ++++----- src/components/menu-item/menu-item.styles.ts | 16 ++++++------ .../progress-bar/progress-bar.styles.ts | 12 +++++++++ src/components/range/range.styles.ts | 19 ++++++++++++++ src/components/rating/rating.styles.ts | 7 ++++++ src/components/skeleton/skeleton.styles.ts | 7 ++++++ .../split-panel/split-panel.styles.ts | 6 +++++ src/components/tab-group/tab-group.styles.ts | 1 - src/components/tab-panel/tab-panel.styles.ts | 1 - src/components/tab/tab.styles.ts | 7 ++++++ src/components/tree-item/tree-item.styles.ts | 8 +++++- 15 files changed, 114 insertions(+), 37 deletions(-) diff --git a/docs/assets/plugins/search/search.css b/docs/assets/plugins/search/search.css index cd9514605..075e324fd 100644 --- a/docs/assets/plugins/search/search.css +++ b/docs/assets/plugins/search/search.css @@ -46,12 +46,6 @@ body.site-search-visible { margin: 10rem auto; } -@media (forced-colors: active) { - .site-search__panel { - border: solid 1px var(--sl-color-neutral-0); - } -} - @media screen and (max-width: 900px) { .site-search__panel { max-width: 100%; @@ -122,13 +116,6 @@ body.site-search-visible { color: var(--sl-color-neutral-1000); } -@media (forced-colors: active) { - .site-search__results li[aria-selected='true'] a { - outline: dashed 1px SelectedItem; - outline-offset: -1px; - } -} - .site-search__results h3 { font-weight: var(--sl-font-weight-semibold); margin: 0; @@ -191,3 +178,15 @@ body.site-search-visible { display: none; } } + +/* Forced colors mode */ +@media (forced-colors: active) { + .site-search__panel { + border: solid 1px var(--sl-color-neutral-0); + } + + .site-search__results li[aria-selected='true'] a { + outline: dashed 1px SelectedItem; + outline-offset: -1px; + } +} diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 45f1171ee..3216a8058 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -37,7 +37,17 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Fixed a bug in `` that prevented selections from working correctly on dynamically added tree items [#963](https://github.com/shoelace-style/shoelace/issues/963) - Fixed module paths in `custom-elements.json` so they point to the dist file instead of the source file [#725](https://github.com/shoelace-style/shoelace/issues/725) - Improved `` to improve padding and render relative to the current font size -- Improved accessibility of `` so it's usable in forced-colors mode +- Improved how many components display in forced-colors mode / Windows High Contrast mode + - Improved `` so it's usable in forced-colors mode + - Improved `` and `` so the panel is more visible in forced-colors mode + - Improved `` so selections are visible in forced-colors mode + - Improved `` so it's visible in forced-colors mode + - Improved `` so checked states are visible in forced-colors mode + - Improved `` so the thumb, track, and tooltips are visible in forced-colors mode + - Improved `` so icons are visible in forced-colors mode + - Improved `` so the divider is visible in forced-colors mode + - Improved `` so selected items are visible in forced-colors mode + - Improved `` so tabs are cleaner and easier to understand in forced-colors mode - Moved all component descriptions to `@summary` to get them within documentation tools [#962](https://github.com/shoelace-style/shoelace/pull/962) - Updated Lit to 2.4.1 - Updated Bootstrap Icons to 1.10.2 diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts index fb9169cef..b414c8fad 100644 --- a/src/components/button/button.styles.ts +++ b/src/components/button/button.styles.ts @@ -300,6 +300,12 @@ export default css` color: var(--sl-color-neutral-0); } + @media (forced-colors: active) { + .button.button--outline.button--checked:not(.button--disabled) { + outline: solid 2px transparent; + } + } + /* * Text buttons */ diff --git a/src/components/dialog/dialog.styles.ts b/src/components/dialog/dialog.styles.ts index 92f0ea028..b2b878d7c 100644 --- a/src/components/dialog/dialog.styles.ts +++ b/src/components/dialog/dialog.styles.ts @@ -37,12 +37,6 @@ export default css` box-shadow: var(--sl-shadow-x-large); } - @media (forced-colors: active) { - .dialog__panel { - border: solid 1px var(--sl-color-neutral-0); - } - } - .dialog__panel:focus { outline: none; } @@ -111,4 +105,10 @@ export default css` left: 0; background-color: var(--sl-overlay-background-color); } + + @media (forced-colors: active) { + .dialog__panel { + border: solid 1px var(--sl-color-neutral-0); + } + } `; diff --git a/src/components/drawer/drawer.styles.ts b/src/components/drawer/drawer.styles.ts index ceeedf052..674eafbdc 100644 --- a/src/components/drawer/drawer.styles.ts +++ b/src/components/drawer/drawer.styles.ts @@ -50,12 +50,6 @@ export default css` outline: none; } - @media (forced-colors: active) { - .drawer__panel { - border: solid 1px var(--sl-color-neutral-0); - } - } - .drawer--top .drawer__panel { top: 0; inset-inline-end: auto; @@ -147,4 +141,10 @@ export default css` .drawer--contained .drawer__overlay { position: absolute; } + + @media (forced-colors: active) { + .drawer__panel { + border: solid 1px var(--sl-color-neutral-0); + } + } `; diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts index 757875aa1..a21d64e41 100644 --- a/src/components/menu-item/menu-item.styles.ts +++ b/src/components/menu-item/menu-item.styles.ts @@ -66,14 +66,6 @@ export default css` color: var(--sl-color-neutral-0); } - @media (forced-colors: active) { - :host(:hover:not([aria-disabled='true'])) .menu-item, - :host(:focus-visible:not(.sl-focus-invisible):not([aria-disabled='true'])) .menu-item { - outline: dashed 1px SelectedItem; - outline-offset: -1px; - } - } - .menu-item .menu-item__check, .menu-item .menu-item__chevron { flex: 0 0 auto; @@ -88,4 +80,12 @@ export default css` .menu-item--has-submenu .menu-item__chevron { visibility: visible; } + + @media (forced-colors: active) { + :host(:hover:not([aria-disabled='true'])) .menu-item, + :host(:focus-visible:not(.sl-focus-invisible):not([aria-disabled='true'])) .menu-item { + outline: dashed 1px SelectedItem; + outline-offset: -1px; + } + } `; diff --git a/src/components/progress-bar/progress-bar.styles.ts b/src/components/progress-bar/progress-bar.styles.ts index a55a8bd75..9d74328ac 100644 --- a/src/components/progress-bar/progress-bar.styles.ts +++ b/src/components/progress-bar/progress-bar.styles.ts @@ -47,6 +47,18 @@ export default css` animation-name: indeterminate-rtl; } + @media (forced-colors: active) { + .progress-bar { + outline: solid 1px SelectedItem; + background-color: var(--sl-color-neutral-0); + } + + .progress-bar__indicator { + outline: solid 1px SelectedItem; + background-color: SelectedItem; + } + } + @keyframes indeterminate { 0% { left: -50%; diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts index 20ec025e9..62f690fb1 100644 --- a/src/components/range/range.styles.ts +++ b/src/components/range/range.styles.ts @@ -211,4 +211,23 @@ export default css` border-right: var(--sl-tooltip-arrow-size) solid transparent; bottom: 100%; } + + @media (forced-colors: active) { + .range__control, + .range__tooltip { + border: solid 1px transparent; + } + + .range__control::-webkit-slider-thumb { + border: solid 1px transparent; + } + + .range__control::-moz-range-thumb { + border: solid 1px transparent; + } + + .range__tooltip:after { + display: none; + } + } `; diff --git a/src/components/rating/rating.styles.ts b/src/components/rating/rating.styles.ts index fc5e0e44d..3cf5132fd 100644 --- a/src/components/rating/rating.styles.ts +++ b/src/components/rating/rating.styles.ts @@ -76,4 +76,11 @@ export default css` .rating--disabled .rating__symbols { cursor: not-allowed; } + + /* Forced colors mode */ + @media (forced-colors: active) { + .rating__symbols--indicator { + color: SelectedItem; + } + } `; diff --git a/src/components/skeleton/skeleton.styles.ts b/src/components/skeleton/skeleton.styles.ts index a52cf7ad2..9098e73d1 100644 --- a/src/components/skeleton/skeleton.styles.ts +++ b/src/components/skeleton/skeleton.styles.ts @@ -37,6 +37,13 @@ export default css` animation: pulse 2s ease-in-out 0.5s infinite; } + /* Forced colors mode */ + @media (forced-colors: active) { + :host { + --color: GrayText; + } + } + @keyframes sheen { 0% { background-position: 200% 0; diff --git a/src/components/split-panel/split-panel.styles.ts b/src/components/split-panel/split-panel.styles.ts index a6a297689..73eda0d3c 100644 --- a/src/components/split-panel/split-panel.styles.ts +++ b/src/components/split-panel/split-panel.styles.ts @@ -72,4 +72,10 @@ export default css` top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2); height: var(--divider-hit-area); } + + @media (forced-colors: active) { + .divider { + outline: solid 1px transparent; + } + } `; diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts index 55e63f5ca..f28275c9f 100644 --- a/src/components/tab-group/tab-group.styles.ts +++ b/src/components/tab-group/tab-group.styles.ts @@ -14,7 +14,6 @@ export default css` .tab-group { display: flex; - border: solid 1px transparent; border-radius: 0; } diff --git a/src/components/tab-panel/tab-panel.styles.ts b/src/components/tab-panel/tab-panel.styles.ts index ca8947daa..70ba2bcb4 100644 --- a/src/components/tab-panel/tab-panel.styles.ts +++ b/src/components/tab-panel/tab-panel.styles.ts @@ -11,7 +11,6 @@ export default css` } .tab-panel { - border: solid 1px transparent; padding: var(--padding); } diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts index 44117b972..a60f502e4 100644 --- a/src/components/tab/tab.styles.ts +++ b/src/components/tab/tab.styles.ts @@ -61,4 +61,11 @@ export default css` .tab__close-button::part(base) { padding: var(--sl-spacing-3x-small); } + + @media (forced-colors: active) { + .tab.tab--active:not(.tab--disabled) { + outline: solid 1px transparent; + outline-offset: -3px; + } + } `; diff --git a/src/components/tree-item/tree-item.styles.ts b/src/components/tree-item/tree-item.styles.ts index 9995ce60a..a06e746db 100644 --- a/src/components/tree-item/tree-item.styles.ts +++ b/src/components/tree-item/tree-item.styles.ts @@ -11,7 +11,7 @@ export default css` } :host(:focus) { - outline: 0; + outline: none; } slot:not([name])::slotted(sl-icon) { @@ -138,4 +138,10 @@ export default css` left: auto; right: 1em; } + + @media (forced-colors: active) { + :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item { + outline: dashed 1px SelectedItem; + } + } `;