From df6d628572194f387dc42bd04c0af22472685acf Mon Sep 17 00:00:00 2001 From: lubber-de Date: Wed, 24 May 2023 14:11:58 +0200 Subject: [PATCH 1/5] feat(chore): optional outline on focus --- src/definitions/collections/form.less | 6 ++++++ src/definitions/elements/button.less | 3 +++ src/definitions/elements/input.less | 3 +++ src/definitions/modules/calendar.less | 2 +- src/definitions/modules/checkbox.less | 9 +++++++++ src/definitions/modules/dropdown.less | 17 ++++++++++++++++- src/definitions/modules/flyout.less | 6 ++++++ src/definitions/modules/modal.less | 6 ++++++ src/definitions/modules/search.less | 3 +++ src/definitions/modules/slider.less | 2 +- src/themes/default/collections/form.variables | 2 ++ src/themes/default/globals/site.variables | 1 + src/themes/default/modules/checkbox.variables | 2 ++ src/themes/default/modules/dropdown.variables | 4 ++++ src/themes/default/modules/flyout.variables | 3 +++ src/themes/default/modules/modal.variables | 1 + 16 files changed, 67 insertions(+), 3 deletions(-) diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index 0aeda3e92c..833ed7eded 100755 --- a/src/definitions/collections/form.less +++ b/src/definitions/collections/form.less @@ -162,6 +162,9 @@ font-family: @inputFont; line-height: @textAreaLineHeight; resize: @textAreaResize; + &:focus when not (@textAreaFocusOutline = none) { + outline: @textAreaFocusOutline; + } } .ui.form textarea:not([rows]) { height: @textAreaHeight; @@ -424,6 +427,9 @@ border-radius: @inputFocusBorderRadius; background: @inputFocusBackground; box-shadow: @inputFocusBoxShadow; + & when not (@inputFocusOutline = none) { + outline: @inputFocusOutline; + } } & when (@variationInputAction) { .ui.form .ui.action.input:not([class*="left action"]) { diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index 07cf1f0b89..99101b8458 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -76,6 +76,9 @@ color: @focusColor; background-image: @focusBackgroundImage; box-shadow: @focusBoxShadow; + & when not (@focusOutline = none) { + outline: @focusOutline; + } } .ui.button:focus .icon { diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less index 6be2a90571..575ca053fb 100755 --- a/src/definitions/elements/input.less +++ b/src/definitions/elements/input.less @@ -56,6 +56,9 @@ transition: @iconTransition; cursor: pointer; } + &:focus when not (@focusOutline = none) { + outline: @focusOutline; + } } /* -------------------- diff --git a/src/definitions/modules/calendar.less b/src/definitions/modules/calendar.less index 0aab4a33ae..146f07a90b 100644 --- a/src/definitions/modules/calendar.less +++ b/src/definitions/modules/calendar.less @@ -37,7 +37,7 @@ .ui.calendar .calendar:focus, .ui.calendar.popup:focus { - outline: 0; + outline: @focusOutline; } /******************************* diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less index 9c7d932cad..68fb39c5b7 100755 --- a/src/definitions/modules/checkbox.less +++ b/src/definitions/modules/checkbox.less @@ -36,6 +36,9 @@ font-size: @relativeMedium; line-height: @checkboxLineHeight; min-width: @checkboxSize; + &:focus when not (@focusOutline = none) { + outline: @focusOutline; + } } /* HTML Checkbox */ @@ -50,6 +53,9 @@ z-index: 3; width: @checkboxSize; height: @checkboxSize; + &:focus when not (@inputFocusOutline = none) { + outline: @inputFocusOutline; + } } .ui.checkbox label { @@ -58,6 +64,9 @@ display: block; outline: none; font-size: @labelFontSize; + &:focus when not (@labelFocusOutline = none) { + outline: @labelFocusOutline; + } } .ui.checkbox:not(.invisible) label { diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 682a36ff40..b900056782 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -30,6 +30,9 @@ transition: @transition; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + &:focus when not (@focusOutline = none) { + outline: @focusOutline; + } } /******************************* @@ -59,6 +62,9 @@ transition: @menuTransition; z-index: @menuZIndex; will-change: transform, opacity; + &:focus when not (@menuFocusOutline = none) { + outline: @menuFocusOutline; + } } .ui.dropdown .menu > * { @@ -387,7 +393,7 @@ select.ui.dropdown { word-wrap: break-word; line-height: 1em; white-space: normal; - outline: 0; + outline: none; transform: rotateZ(0); min-width: @selectionMinWidth; min-height: @selectionMinHeight; @@ -399,6 +405,9 @@ select.ui.dropdown { border: @selectionBorder; border-radius: @selectionBorderRadius; transition: @selectionTransition; + &:focus when not (@selectionFocusOutline = none) { + outline: @selectionFocusOutline; + } } .ui.selection.dropdown.visible, .ui.selection.dropdown.active { @@ -448,6 +457,9 @@ select.ui.dropdown { border-radius: @selectionMenuBorderRadius; box-shadow: @selectionMenuBoxShadow; transition: @selectionMenuTransition; + &:focus when not (@selectionMenuFocusOutline = none) { + outline: @selectionMenuFocusOutline; + } } .ui.selection.dropdown .menu::after, .ui.selection.dropdown .menu::before { @@ -695,6 +707,9 @@ select.ui.dropdown { outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); padding: inherit; + &:focus when not (@searchFocusOutline = none) { + outline: @searchFocusOutline; + } } /* Text Layering */ diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less index b937e0c2fc..3c0d830a3b 100644 --- a/src/definitions/modules/flyout.less +++ b/src/definitions/modules/flyout.less @@ -40,6 +40,9 @@ z-index: @topLayer; background: #fff; outline: none; + &:focus when not (@focusOutline = none) { + outline: @focusOutline; + } } /* GPU Layers for Child Elements */ @@ -71,6 +74,9 @@ opacity: 1; outline: none; } +.ui.flyout > .close:focus when not (@closeFocusOutline = none) { + outline: @closeFocusOutline; +} /* -------------- Header diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less index 274fc6d36a..aa36000292 100755 --- a/src/definitions/modules/modal.less +++ b/src/definitions/modules/modal.less @@ -35,6 +35,9 @@ user-select: text; will-change: top, left, margin, transform, opacity; outline: none; + &:focus when not (@focusOutline = none) { + outline: @focusOutline; + } } .ui.modal > :first-child:not(.close):not(.dimmer), @@ -80,6 +83,9 @@ opacity: 1; outline: none; } +.ui.modal > .close:focus when not (@closeFocusOutline = none) { + outline: @closeFocusOutline; +} /* -------------- Header diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less index 54cdf5b35e..11108eb4e8 100755 --- a/src/definitions/modules/search.less +++ b/src/definitions/modules/search.less @@ -183,6 +183,9 @@ border-color: @promptFocusBorderColor; background: @promptFocusBackground; color: @promptFocusColor; + & when not (@focusOutline = none) { + outline: @focusOutline; + } } & when (@variationSearchLoading) { diff --git a/src/definitions/modules/slider.less b/src/definitions/modules/slider.less index 59e0cfdaeb..c39d230926 100644 --- a/src/definitions/modules/slider.less +++ b/src/definitions/modules/slider.less @@ -27,7 +27,7 @@ } .ui.slider:not(.checkbox):focus { - outline: 0; + outline: @focusOutline; } .ui.slider .inner { diff --git a/src/themes/default/collections/form.variables b/src/themes/default/collections/form.variables index 70907c8765..71af6157a6 100644 --- a/src/themes/default/collections/form.variables +++ b/src/themes/default/collections/form.variables @@ -91,6 +91,7 @@ @inputFocusColor: @selectedTextColor; @inputFocusBoxShadow: @inputFocusPointerSize 0 0 0 @selectedBorderColor inset; @inputFocusBorderRadius: @inputBorderRadius; +@inputFocusOutline: @focusOutline; /* Text Area Focus */ @textAreaFocusBackground: @inputFocusBackground; @@ -98,6 +99,7 @@ @textAreaFocusColor: @inputFocusColor; @textAreaFocusBoxShadow: @inputFocusBoxShadow; @textAreaFocusBorderRadius: @inputFocusBorderRadius; +@textAreaFocusOutline: @focusOutline; /* Disabled */ @disabledLabelOpacity: @disabledOpacity; diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index 037727238d..2dfab71356 100755 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -1136,6 +1136,7 @@ /* ------------------- Focus -------------------- */ +@focusOutline: none; /* --- Colors --- */ @primaryColorFocus: saturate(darken(@primaryColor, 8), 20, relative); diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables index bb264d6326..9e885bf3e0 100644 --- a/src/themes/default/modules/checkbox.variables +++ b/src/themes/default/modules/checkbox.variables @@ -50,6 +50,8 @@ @checkboxFocusBorderColor: @focusedFormMutedBorderColor; @checkboxFocusCheckColor: @selectedTextColor; @labelFocusColor: @selectedTextColor; +@labelFocusOutline: @focusOutline; +@inputFocusOutline: @focusOutline; /* Active */ @labelActiveColor: @selectedTextColor; diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index ddc1ba36a4..e532847837 100755 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -32,6 +32,7 @@ @menuPadding: 0; @menuTop: 100%; @menuTextAlign: left; +@menuFocusOutline: @focusOutline; @menuBorderWidth: 1px; @menuBorderColor: @borderColor; @@ -202,6 +203,8 @@ @selectionFocusBorderColor: @focusedFormMutedBorderColor; @selectionFocusBoxShadow: none; @selectionFocusMenuBoxShadow: @raisedShadow; +@selectionFocusOutline: @focusOutline; +@selectionMenuFocusOutline: @focusOutline; /* Visible */ @selectionVisibleTextFontWeight: @normal; @@ -224,6 +227,7 @@ -------------- */ @searchMinWidth: ""; +@searchFocusOutline: @focusOutline; /* Search Selection */ @searchSelectionLineHeight: @inputLineHeight; diff --git a/src/themes/default/modules/flyout.variables b/src/themes/default/modules/flyout.variables index dd1c3e0779..b82d22b722 100644 --- a/src/themes/default/modules/flyout.variables +++ b/src/themes/default/modules/flyout.variables @@ -11,6 +11,9 @@ @duration: 500ms; @easing: @defaultEasing; +/* Focus */ +@closeFocusOutline: @focusOutline; + /* Dimmer */ @dimmerColor: rgba(0, 0, 0, 0.4); @dimmerTransition: all @duration; diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables index fefb01f2f7..00073724c8 100755 --- a/src/themes/default/modules/modal.variables +++ b/src/themes/default/modules/modal.variables @@ -16,6 +16,7 @@ @closeOpacityDimmed: 0.1; @closeSize: 1.25em; @closeColor: @white; +@closeFocusOutline: @focusOutline; @closeHitbox: 2.25rem; @closeDistance: 0.25rem; From 6536dc4e3eb293677c8eceb6ff151a9100429ffc Mon Sep 17 00:00:00 2001 From: lubber-de Date: Fri, 30 May 2025 19:36:43 +0200 Subject: [PATCH 2/5] feat(chore): outline on focus-visible --- src/definitions/collections/form.less | 24 +++++++++++++++---- src/definitions/elements/button.less | 6 +++-- src/definitions/elements/input.less | 4 ++-- src/definitions/modules/calendar.less | 6 ++++- src/definitions/modules/checkbox.less | 12 +++++----- src/definitions/modules/dropdown.less | 20 ++++++++-------- src/definitions/modules/flyout.less | 8 +++---- src/definitions/modules/modal.less | 8 +++---- src/definitions/modules/search.less | 6 +++-- src/definitions/modules/slider.less | 4 ++-- src/themes/default/collections/form.variables | 4 ++-- src/themes/default/globals/site.variables | 2 +- src/themes/default/modules/checkbox.variables | 4 ++-- src/themes/default/modules/dropdown.variables | 8 +++---- src/themes/default/modules/flyout.variables | 2 +- src/themes/default/modules/modal.variables | 2 +- 16 files changed, 72 insertions(+), 48 deletions(-) diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index fa033af00d..bb77992158 100755 --- a/src/definitions/collections/form.less +++ b/src/definitions/collections/form.less @@ -176,8 +176,8 @@ line-height: @textAreaLineHeight; resize: @textAreaResize; min-height: @actionTextareaMinHeight; - &:focus when not (@textAreaFocusOutline = none) { - outline: @textAreaFocusOutline; + &:focus-visible when not (@textAreaFocusVisibleOutline = none) { + outline: @textAreaFocusVisibleOutline; } } .ui.input > textarea { @@ -441,8 +441,24 @@ border-radius: @inputFocusBorderRadius; background: @inputFocusBackground; box-shadow: @inputFocusBoxShadow; - & when not (@inputFocusOutline = none) { - outline: @inputFocusOutline; +} +& when not (@inputFocusVisibleOutline = none) { + .ui.form input:not([type]):focus-visible, + .ui.form input[type="color"]:focus-visible, + .ui.form input[type="date"]:focus-visible, + .ui.form input[type="datetime-local"]:focus-visible, + .ui.form input[type="email"]:focus-visible, + .ui.form input[type="month"]:focus-visible, + .ui.form input[type="number"]:focus-visible, + .ui.form input[type="password"]:focus-visible, + .ui.form input[type="search"]:focus-visible, + .ui.form input[type="tel"]:focus-visible, + .ui.form input[type="time"]:focus-visible, + .ui.form input[type="text"]:focus-visible, + .ui.form input[type="file"]:focus-visible, + .ui.form input[type="url"]:focus-visible, + .ui.form input[type="week"]:focus-visible { + outline: @inputFocusVisibleOutline; } } & when (@variationInputAction) { diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index aa9af4d2e5..bf1e2324df 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -88,8 +88,10 @@ color: @focusColor; background-image: @focusBackgroundImage; box-shadow: @focusBoxShadow; - & when not (@focusOutline = none) { - outline: @focusOutline; +} +& when not (@focusVisibleOutline = none) { + .ui.button:focus-visible { + outline: @focusVisibleOutline; } } diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less index 07cfb78daf..9be4174b60 100755 --- a/src/definitions/elements/input.less +++ b/src/definitions/elements/input.less @@ -64,8 +64,8 @@ transition: @iconTransition; cursor: pointer; } - &:focus when not (@focusOutline = none) { - outline: @focusOutline; + &:focus-visible when not (@focusVisibleOutline = none) { + outline: @focusVisibleOutline; } } diff --git a/src/definitions/modules/calendar.less b/src/definitions/modules/calendar.less index d6661f9ed6..b172a00770 100644 --- a/src/definitions/modules/calendar.less +++ b/src/definitions/modules/calendar.less @@ -39,7 +39,11 @@ .ui.calendar .calendar:focus, .ui.calendar.popup:focus { - outline: @focusOutline; + outline: 0; +} +.ui.calendar .calendar:focus-visible, +.ui.calendar.popup:focus-visible { + outline: @focusVisibleOutline; } /******************************* diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less index 347bc39825..4524f99ffd 100755 --- a/src/definitions/modules/checkbox.less +++ b/src/definitions/modules/checkbox.less @@ -42,8 +42,8 @@ font-size: @relativeMedium; line-height: @checkboxLineHeight; min-width: @checkboxSize; - &:focus when not (@focusOutline = none) { - outline: @focusOutline; + &:focus-visible when not (@focusVisibleOutline = none) { + outline: @focusVisibleOutline; } } @@ -59,8 +59,8 @@ z-index: 3; width: @checkboxSize; height: @checkboxSize; - &:focus when not (@inputFocusOutline = none) { - outline: @inputFocusOutline; + &:focus-visible when not (@inputFocusVisibleOutline = none) { + outline: @inputFocusVisibleOutline; } } @@ -70,8 +70,8 @@ display: block; outline: none; font-size: @labelFontSize; - &:focus when not (@labelFocusOutline = none) { - outline: @labelFocusOutline; + &:focus-visible when not (@labelFocusVisibleOutline = none) { + outline: @labelFocusVisibleOutline; } } diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index df229730d5..425fe00041 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -48,8 +48,8 @@ transition: @transition; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - &:focus when not (@focusOutline = none) { - outline: @focusOutline; + &:focus-visible when not (@focusVisibleOutline = none) { + outline: @focusVisibleOutline; } } @@ -80,8 +80,8 @@ transition: @menuTransition; z-index: @menuZIndex; will-change: transform, opacity; - &:focus when not (@menuFocusOutline = none) { - outline: @menuFocusOutline; + &:focus-visible when not (@menuFocusVisibleOutline = none) { + outline: @menuFocusVisibleOutline; } } @@ -423,8 +423,8 @@ select.ui.dropdown { border: @selectionBorder; border-radius: @selectionBorderRadius; transition: @selectionTransition; - &:focus when not (@selectionFocusOutline = none) { - outline: @selectionFocusOutline; + &:focus-visible when not (@selectionFocusVisibleOutline = none) { + outline: @selectionFocusVisibleOutline; } } .ui.selection.dropdown.visible, @@ -463,8 +463,8 @@ select.ui.dropdown { width: @menuMinWidth; box-shadow: @selectionMenuBoxShadow; transition: @selectionMenuTransition; - &:focus when not (@selectionMenuFocusOutline = none) { - outline: @selectionMenuFocusOutline; + &:focus-visible when not (@selectionMenuFocusVisibleOutline = none) { + outline: @selectionMenuFocusVisibleOutline; } } .ui.selection.dropdown@{notPointing}@{notFloating} > .menu { @@ -755,8 +755,8 @@ select.ui.dropdown { outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); padding: inherit; - &:focus when not (@searchFocusOutline = none) { - outline: @searchFocusOutline; + &:focus-visible when not (@searchFocusVisibleOutline = none) { + outline: @searchFocusVisibleOutline; } } diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less index 1cd9b3e224..3074d94455 100644 --- a/src/definitions/modules/flyout.less +++ b/src/definitions/modules/flyout.less @@ -44,8 +44,8 @@ z-index: @topLayer; background: #fff; outline: none; - &:focus when not (@focusOutline = none) { - outline: @focusOutline; + &:focus-visible when not (@focusVisibleOutline = none) { + outline: @focusVisibleOutline; } } @@ -79,8 +79,8 @@ outline: none; } } -.ui.flyout > .close:focus when not (@closeFocusOutline = none) { - outline: @closeFocusOutline; +.ui.flyout > .close:focus-visible when not (@closeFocusVisibleOutline = none) { + outline: @closeFocusVisibleOutline; } /* -------------- diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less index d073c1e0ca..8e8f737e4a 100755 --- a/src/definitions/modules/modal.less +++ b/src/definitions/modules/modal.less @@ -42,8 +42,8 @@ user-select: text; will-change: top, left, margin, transform, opacity; outline: none; - &:focus when not (@focusOutline = none) { - outline: @focusOutline; + &:focus-visible when not (@focusVisibleOutline = none) { + outline: @focusVisibleOutline; } } @@ -92,8 +92,8 @@ outline: none; } } -.ui.modal > .close:focus when not (@closeFocusOutline = none) { - outline: @closeFocusOutline; +.ui.modal > .close:focus when not (@closeFocusVisibleOutline = none) { + outline: @closeFocusVisibleOutline; } /* -------------- diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less index 5eca907d5d..df87b70f7c 100755 --- a/src/definitions/modules/search.less +++ b/src/definitions/modules/search.less @@ -183,8 +183,10 @@ border-color: @promptFocusBorderColor; background: @promptFocusBackground; color: @promptFocusColor; - & when not (@focusOutline = none) { - outline: @focusOutline; +} +& when not (@focusVisibleOutline = none) { + .ui.search > .prompt:focus-visible { + outline: @focusVisibleOutline; } } diff --git a/src/definitions/modules/slider.less b/src/definitions/modules/slider.less index fcae0deffc..fe08dda69a 100644 --- a/src/definitions/modules/slider.less +++ b/src/definitions/modules/slider.less @@ -33,8 +33,8 @@ position: relative; } -.ui.slider@{notCheckbox}:focus { - outline: @focusOutline; +.ui.slider@{notCheckbox}:focus-visible { + outline: @focusVisibleOutline; } .ui.slider .inner { diff --git a/src/themes/default/collections/form.variables b/src/themes/default/collections/form.variables index 9f4d8cae15..398eaa4021 100644 --- a/src/themes/default/collections/form.variables +++ b/src/themes/default/collections/form.variables @@ -92,7 +92,7 @@ @inputFocusColor: @selectedTextColor; @inputFocusBoxShadow: @inputFocusPointerSize 0 0 0 @selectedBorderColor inset; @inputFocusBorderRadius: @inputBorderRadius; -@inputFocusOutline: @focusOutline; +@inputFocusVisibleOutline: @focusVisibleOutline; /* Text Area Focus */ @textAreaFocusBackground: @inputFocusBackground; @@ -100,7 +100,7 @@ @textAreaFocusColor: @inputFocusColor; @textAreaFocusBoxShadow: @inputFocusBoxShadow; @textAreaFocusBorderRadius: @inputFocusBorderRadius; -@textAreaFocusOutline: @focusOutline; +@textAreaFocusVisibleOutline: @focusVisibleOutline; /* Disabled */ @disabledLabelOpacity: @disabledOpacity; diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index 3742902901..e3fbf4bfa1 100755 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -1131,7 +1131,7 @@ /* ------------------- Focus -------------------- */ -@focusOutline: none; +@focusVisibleOutline: none; /* --- Colors --- */ @primaryColorFocus: if(iscolor(@primaryColor), saturate(darken(@primaryColor, 8), 20, relative), @primaryColor); diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables index 9e885bf3e0..54f7218af8 100644 --- a/src/themes/default/modules/checkbox.variables +++ b/src/themes/default/modules/checkbox.variables @@ -50,8 +50,8 @@ @checkboxFocusBorderColor: @focusedFormMutedBorderColor; @checkboxFocusCheckColor: @selectedTextColor; @labelFocusColor: @selectedTextColor; -@labelFocusOutline: @focusOutline; -@inputFocusOutline: @focusOutline; +@labelFocusVisibleOutline: @focusVisibleOutline; +@inputFocusVisibleOutline: @focusVisibleOutline; /* Active */ @labelActiveColor: @selectedTextColor; diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index 17f96cdea3..478f885088 100755 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -32,7 +32,7 @@ @menuPadding: 0; @menuTop: 100%; @menuTextAlign: left; -@menuFocusOutline: @focusOutline; +@menuFocusVisibleOutline: @focusVisibleOutline; @menuBorderWidth: 1px; @menuBorderColor: @borderColor; @@ -203,8 +203,8 @@ @selectionFocusBorderColor: @focusedFormMutedBorderColor; @selectionFocusBoxShadow: none; @selectionFocusMenuBoxShadow: @raisedShadow; -@selectionFocusOutline: @focusOutline; -@selectionMenuFocusOutline: @focusOutline; +@selectionFocusVisibleOutline: @focusVisibleOutline; +@selectionMenuFocusVisibleOutline: @focusVisibleOutline; /* Visible */ @selectionVisibleTextFontWeight: @normal; @@ -230,7 +230,7 @@ -------------- */ @searchMinWidth: ""; -@searchFocusOutline: @focusOutline; +@searchFocusVisibleOutline: @focusVisibleOutline; /* Search Selection */ @searchSelectionLineHeight: @inputLineHeight; diff --git a/src/themes/default/modules/flyout.variables b/src/themes/default/modules/flyout.variables index b82d22b722..8857d0b3ef 100644 --- a/src/themes/default/modules/flyout.variables +++ b/src/themes/default/modules/flyout.variables @@ -12,7 +12,7 @@ @easing: @defaultEasing; /* Focus */ -@closeFocusOutline: @focusOutline; +@closeFocusVisibleOutline: @focusVisibleOutline; /* Dimmer */ @dimmerColor: rgba(0, 0, 0, 0.4); diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables index 0fce252d61..e9a81472ea 100755 --- a/src/themes/default/modules/modal.variables +++ b/src/themes/default/modules/modal.variables @@ -16,7 +16,7 @@ @closeOpacityDimmed: 0.1; @closeSize: 1.25em; @closeColor: @white; -@closeFocusOutline: @focusOutline; +@closeFocusVisibleOutline: @focusVisibleOutline; @closeHitbox: 2.25rem; @closeDistance: 0.25rem; From 8158037e23bcc37d008e737becba9c783b52f958 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Fri, 30 May 2025 20:06:04 +0200 Subject: [PATCH 3/5] feat(chore): outline on focus got dedicated less variable --- src/definitions/modules/calendar.less | 10 ++++++---- src/definitions/modules/flyout.less | 2 +- src/definitions/modules/modal.less | 2 +- src/definitions/modules/slider.less | 9 +++++++-- src/themes/default/globals/site.variables | 1 + 5 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/definitions/modules/calendar.less b/src/definitions/modules/calendar.less index b172a00770..29de146a87 100644 --- a/src/definitions/modules/calendar.less +++ b/src/definitions/modules/calendar.less @@ -39,11 +39,13 @@ .ui.calendar .calendar:focus, .ui.calendar.popup:focus { - outline: 0; + outline: @focusOutline; } -.ui.calendar .calendar:focus-visible, -.ui.calendar.popup:focus-visible { - outline: @focusVisibleOutline; +& when not (@focusVisibleOutline = none) { + .ui.calendar .calendar:focus-visible, + .ui.calendar.popup:focus-visible { + outline: @focusVisibleOutline; + } } /******************************* diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less index 3074d94455..6b7f89e488 100644 --- a/src/definitions/modules/flyout.less +++ b/src/definitions/modules/flyout.less @@ -76,7 +76,7 @@ .ui.flyout > .close:focus, .ui.flyout > .close:hover { opacity: 1; - outline: none; + outline: @focusOutline; } } .ui.flyout > .close:focus-visible when not (@closeFocusVisibleOutline = none) { diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less index 8e8f737e4a..5953155eb4 100755 --- a/src/definitions/modules/modal.less +++ b/src/definitions/modules/modal.less @@ -89,7 +89,7 @@ .ui.modal > .close:focus, .ui.modal > .close:hover { opacity: 1; - outline: none; + outline: @focusOutline; } } .ui.modal > .close:focus when not (@closeFocusVisibleOutline = none) { diff --git a/src/definitions/modules/slider.less b/src/definitions/modules/slider.less index fe08dda69a..12459f5020 100644 --- a/src/definitions/modules/slider.less +++ b/src/definitions/modules/slider.less @@ -33,8 +33,13 @@ position: relative; } -.ui.slider@{notCheckbox}:focus-visible { - outline: @focusVisibleOutline; +.ui.slider@{notCheckbox}:focus { + outline: @focusOutline; +} +& when not (@focusVisibleOutline = none) { + .ui.slider@{notCheckbox}:focus-visible { + outline: @focusVisibleOutline; + } } .ui.slider .inner { diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index e3fbf4bfa1..bd194bc9ae 100755 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -1131,6 +1131,7 @@ /* ------------------- Focus -------------------- */ +@focusOutline: none; @focusVisibleOutline: none; /* --- Colors --- */ From 08a3c256a5c9bd7dd202cea7aae4f4d2961fa76b Mon Sep 17 00:00:00 2001 From: lubber-de Date: Fri, 30 May 2025 20:12:45 +0200 Subject: [PATCH 4/5] feat(chore): missing pseudo selector --- src/definitions/modules/modal.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less index 5953155eb4..238fa77fb4 100755 --- a/src/definitions/modules/modal.less +++ b/src/definitions/modules/modal.less @@ -92,7 +92,7 @@ outline: @focusOutline; } } -.ui.modal > .close:focus when not (@closeFocusVisibleOutline = none) { +.ui.modal > .close:focus-visible when not (@closeFocusVisibleOutline = none) { outline: @closeFocusVisibleOutline; } From 3b175d53c63f9ed20c816ecb166932f6ad5ad439 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Fri, 30 May 2025 20:29:38 +0200 Subject: [PATCH 5/5] feat(chore): support outline-offset --- src/definitions/collections/form.less | 2 ++ src/definitions/elements/button.less | 1 + src/definitions/elements/input.less | 1 + src/definitions/modules/calendar.less | 1 + src/definitions/modules/checkbox.less | 3 +++ src/definitions/modules/dropdown.less | 5 +++++ src/definitions/modules/flyout.less | 2 ++ src/definitions/modules/modal.less | 2 ++ src/definitions/modules/search.less | 1 + src/definitions/modules/slider.less | 1 + src/themes/default/collections/form.variables | 2 ++ src/themes/default/globals/site.variables | 1 + src/themes/default/modules/checkbox.variables | 2 ++ src/themes/default/modules/dropdown.variables | 4 ++++ src/themes/default/modules/flyout.variables | 1 + src/themes/default/modules/modal.variables | 1 + 16 files changed, 30 insertions(+) diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index bb77992158..d9b798695c 100755 --- a/src/definitions/collections/form.less +++ b/src/definitions/collections/form.less @@ -178,6 +178,7 @@ min-height: @actionTextareaMinHeight; &:focus-visible when not (@textAreaFocusVisibleOutline = none) { outline: @textAreaFocusVisibleOutline; + outline-offset: @textAreaFocusVisibleOutlineOffset; } } .ui.input > textarea { @@ -459,6 +460,7 @@ .ui.form input[type="url"]:focus-visible, .ui.form input[type="week"]:focus-visible { outline: @inputFocusVisibleOutline; + outline-offset: @inputFocusVisibleOutlineOffset; } } & when (@variationInputAction) { diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index bf1e2324df..e3f4901f41 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -92,6 +92,7 @@ & when not (@focusVisibleOutline = none) { .ui.button:focus-visible { outline: @focusVisibleOutline; + outline-offset: @focusVisibleOutlineOffset; } } diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less index 9be4174b60..e8b81efcd1 100755 --- a/src/definitions/elements/input.less +++ b/src/definitions/elements/input.less @@ -66,6 +66,7 @@ } &:focus-visible when not (@focusVisibleOutline = none) { outline: @focusVisibleOutline; + outline-offset: @focusVisibleOutlineOffset; } } diff --git a/src/definitions/modules/calendar.less b/src/definitions/modules/calendar.less index 29de146a87..77075cc37f 100644 --- a/src/definitions/modules/calendar.less +++ b/src/definitions/modules/calendar.less @@ -45,6 +45,7 @@ .ui.calendar .calendar:focus-visible, .ui.calendar.popup:focus-visible { outline: @focusVisibleOutline; + outline-offset: @focusVisibleOutlineOffset; } } diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less index 4524f99ffd..151f5149fa 100755 --- a/src/definitions/modules/checkbox.less +++ b/src/definitions/modules/checkbox.less @@ -44,6 +44,7 @@ min-width: @checkboxSize; &:focus-visible when not (@focusVisibleOutline = none) { outline: @focusVisibleOutline; + outline-offset: @focusVisibleOutlineOffset; } } @@ -61,6 +62,7 @@ height: @checkboxSize; &:focus-visible when not (@inputFocusVisibleOutline = none) { outline: @inputFocusVisibleOutline; + outline-offset: @inputFocusVisibleOutlineOffset; } } @@ -72,6 +74,7 @@ font-size: @labelFontSize; &:focus-visible when not (@labelFocusVisibleOutline = none) { outline: @labelFocusVisibleOutline; + outline-offset: @labelFocusVisibleOutlineOffset; } } diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 425fe00041..30da708ab5 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -50,6 +50,7 @@ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); &:focus-visible when not (@focusVisibleOutline = none) { outline: @focusVisibleOutline; + outline-offset: @focusVisibleOutlineOffset; } } @@ -82,6 +83,7 @@ will-change: transform, opacity; &:focus-visible when not (@menuFocusVisibleOutline = none) { outline: @menuFocusVisibleOutline; + outline-offset: @menuFocusVisibleOutlineOffset; } } @@ -425,6 +427,7 @@ select.ui.dropdown { transition: @selectionTransition; &:focus-visible when not (@selectionFocusVisibleOutline = none) { outline: @selectionFocusVisibleOutline; + outline-offset: @selectionFocusVisibleOutlineOffset; } } .ui.selection.dropdown.visible, @@ -465,6 +468,7 @@ select.ui.dropdown { transition: @selectionMenuTransition; &:focus-visible when not (@selectionMenuFocusVisibleOutline = none) { outline: @selectionMenuFocusVisibleOutline; + outline-offset: @selectionMenuFocusVisibleOutlineOffset; } } .ui.selection.dropdown@{notPointing}@{notFloating} > .menu { @@ -757,6 +761,7 @@ select.ui.dropdown { padding: inherit; &:focus-visible when not (@searchFocusVisibleOutline = none) { outline: @searchFocusVisibleOutline; + outline-offset: @searchFocusVisibleOutlineOffset; } } diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less index 6b7f89e488..e83a931f80 100644 --- a/src/definitions/modules/flyout.less +++ b/src/definitions/modules/flyout.less @@ -46,6 +46,7 @@ outline: none; &:focus-visible when not (@focusVisibleOutline = none) { outline: @focusVisibleOutline; + outline-offset: @focusVisibleOutlineOffset; } } @@ -81,6 +82,7 @@ } .ui.flyout > .close:focus-visible when not (@closeFocusVisibleOutline = none) { outline: @closeFocusVisibleOutline; + outline-offset: @closeFocusVisibleOutlineOffset; } /* -------------- diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less index 238fa77fb4..e7ce6ff7c5 100755 --- a/src/definitions/modules/modal.less +++ b/src/definitions/modules/modal.less @@ -44,6 +44,7 @@ outline: none; &:focus-visible when not (@focusVisibleOutline = none) { outline: @focusVisibleOutline; + outline-offset: @focusVisibleOutlineOffset; } } @@ -94,6 +95,7 @@ } .ui.modal > .close:focus-visible when not (@closeFocusVisibleOutline = none) { outline: @closeFocusVisibleOutline; + outline-offset: @closeFocusVisibleOutlineOffset; } /* -------------- diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less index df87b70f7c..77aa1a9398 100755 --- a/src/definitions/modules/search.less +++ b/src/definitions/modules/search.less @@ -187,6 +187,7 @@ & when not (@focusVisibleOutline = none) { .ui.search > .prompt:focus-visible { outline: @focusVisibleOutline; + outline-offset: @focusVisibleOutlineOffset; } } diff --git a/src/definitions/modules/slider.less b/src/definitions/modules/slider.less index 12459f5020..2ee0068cfe 100644 --- a/src/definitions/modules/slider.less +++ b/src/definitions/modules/slider.less @@ -39,6 +39,7 @@ & when not (@focusVisibleOutline = none) { .ui.slider@{notCheckbox}:focus-visible { outline: @focusVisibleOutline; + outline-offset: @focusVisibleOutlineOffset; } } diff --git a/src/themes/default/collections/form.variables b/src/themes/default/collections/form.variables index 398eaa4021..97395564ce 100644 --- a/src/themes/default/collections/form.variables +++ b/src/themes/default/collections/form.variables @@ -93,6 +93,7 @@ @inputFocusBoxShadow: @inputFocusPointerSize 0 0 0 @selectedBorderColor inset; @inputFocusBorderRadius: @inputBorderRadius; @inputFocusVisibleOutline: @focusVisibleOutline; +@inputFocusVisibleOutlineOffset: @focusVisibleOutlineOffset; /* Text Area Focus */ @textAreaFocusBackground: @inputFocusBackground; @@ -101,6 +102,7 @@ @textAreaFocusBoxShadow: @inputFocusBoxShadow; @textAreaFocusBorderRadius: @inputFocusBorderRadius; @textAreaFocusVisibleOutline: @focusVisibleOutline; +@textAreaFocusVisibleOutlineOffset: @focusVisibleOutlineOffset; /* Disabled */ @disabledLabelOpacity: @disabledOpacity; diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index bd194bc9ae..40ce957400 100755 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -1133,6 +1133,7 @@ -------------------- */ @focusOutline: none; @focusVisibleOutline: none; +@focusVisibleOutlineOffset: 0; /* --- Colors --- */ @primaryColorFocus: if(iscolor(@primaryColor), saturate(darken(@primaryColor, 8), 20, relative), @primaryColor); diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables index 54f7218af8..bb4023545a 100644 --- a/src/themes/default/modules/checkbox.variables +++ b/src/themes/default/modules/checkbox.variables @@ -51,7 +51,9 @@ @checkboxFocusCheckColor: @selectedTextColor; @labelFocusColor: @selectedTextColor; @labelFocusVisibleOutline: @focusVisibleOutline; +@labelFocusVisibleOutlineOffset: @focusVisibleOutlineOffset; @inputFocusVisibleOutline: @focusVisibleOutline; +@inputFocusVisibleOutlineOffset: @focusVisibleOutlineOffset; /* Active */ @labelActiveColor: @selectedTextColor; diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index 478f885088..199deec471 100755 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -33,6 +33,7 @@ @menuTop: 100%; @menuTextAlign: left; @menuFocusVisibleOutline: @focusVisibleOutline; +@menuFocusVisibleOutlineOffset: @focusVisibleOutlineOffset; @menuBorderWidth: 1px; @menuBorderColor: @borderColor; @@ -204,7 +205,9 @@ @selectionFocusBoxShadow: none; @selectionFocusMenuBoxShadow: @raisedShadow; @selectionFocusVisibleOutline: @focusVisibleOutline; +@selectionFocusVisibleOutlineOffset: @focusVisibleOutlineOffset; @selectionMenuFocusVisibleOutline: @focusVisibleOutline; +@selectionMenuFocusVisibleOutlineOffset: @focusVisibleOutlineOffset; /* Visible */ @selectionVisibleTextFontWeight: @normal; @@ -231,6 +234,7 @@ @searchMinWidth: ""; @searchFocusVisibleOutline: @focusVisibleOutline; +@searchFocusVisibleOutlineOffset: @focusVisibleOutlineOffset; /* Search Selection */ @searchSelectionLineHeight: @inputLineHeight; diff --git a/src/themes/default/modules/flyout.variables b/src/themes/default/modules/flyout.variables index 8857d0b3ef..bc4be12132 100644 --- a/src/themes/default/modules/flyout.variables +++ b/src/themes/default/modules/flyout.variables @@ -13,6 +13,7 @@ /* Focus */ @closeFocusVisibleOutline: @focusVisibleOutline; +@closeFocusVisibleOutlineOffset: @focusVisibleOutlineOffset; /* Dimmer */ @dimmerColor: rgba(0, 0, 0, 0.4); diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables index e9a81472ea..0ba116fae6 100755 --- a/src/themes/default/modules/modal.variables +++ b/src/themes/default/modules/modal.variables @@ -17,6 +17,7 @@ @closeSize: 1.25em; @closeColor: @white; @closeFocusVisibleOutline: @focusVisibleOutline; +@closeFocusVisibleOutlineOffset: @focusVisibleOutlineOffset; @closeHitbox: 2.25rem; @closeDistance: 0.25rem;