Merge pull request craftcms#12037 from craftcms/hotfix/focus-visible-…

…styles

Fix focus-visible styles being duplicated across all table cells in Redactor

CHANGELOG.md

@@ -13,6 +13,9 @@
 ### Changed
 - When passing a PHP callback function to the `--to` option of a `resave/*` command, the `$element` argument is now optional.
 
+### Deprecated
+- Deprecated `craft\web\assets\focusvisible\FocusVisibleAsset`. ([#12037](https://github.com/craftcms/cms/pull/12037))
+
 ### Fixed
 - Fixed an error that could occur when editing a draft of an element type that didn’t have change tracking enabled.
 - Fixed an error that could occur when saving an entry with Matrix blocks, if the entry had been deleted for a site.
@@ -25,6 +28,7 @@
 - Fixed a bug where “Propagating tags” jobs would fail if two tags had similar titles.
 - Fixed a bug where pressing “Disable focal point” within asset preview modals would only reset the focal point position, but not delete it. ([#12030](https://github.com/craftcms/cms/issues/12030))
 - Fixed a bug where image transforms weren’t getting sized correctly in some cases when `upscaleImages` was disabled. ([#12023](https://github.com/craftcms/cms/issues/12023))
+- Fixed a bug where table cells within Redactor fields could appear to be focused when they weren’t. ([#12001](https://github.com/craftcms/cms/issues/12001), [#12037](https://github.com/craftcms/cms/pull/12037))
 
 ### Security
 - Reduced the amount of system information that’s available to guest users.

package.json

@@ -39,7 +39,6 @@
     "element-resize-detector": "^1.2.4",
     "event-stream": "3.3.5",
     "fabric": "^1.7.19",
-    "focus-visible": "^5.2.0",
     "graphiql": "~1.7.2",
     "graphiql-explorer": "^0.9.0",
     "graphql": "^15.8.0",

packages/craftcms-sass/_mixins.scss

@@ -161,7 +161,7 @@ $radioSize: 16px;
 
 @mixin focus-styles {
   body:not(.reduce-focus-visibility) &:focus,
-  body.reduce-focus-visibility &.focus-visible {
+  body.reduce-focus-visibility &:focus-visible {
     @content;
   }
 }

src/web/assets/cp/CpAsset.php

@@ -27,7 +27,6 @@
 use craft\web\assets\elementresizedetector\ElementResizeDetectorAsset;
 use craft\web\assets\fabric\FabricAsset;
 use craft\web\assets\fileupload\FileUploadAsset;
-use craft\web\assets\focusvisible\FocusVisibleAsset;
 use craft\web\assets\garnish\GarnishAsset;
 use craft\web\assets\iframeresizer\IframeResizerAsset;
 use craft\web\assets\jquerypayment\JqueryPaymentAsset;
@@ -59,7 +58,6 @@ class CpAsset extends AssetBundle
         AxiosAsset::class,
         D3Asset::class,
         ElementResizeDetectorAsset::class,
-        FocusVisibleAsset::class,
         GarnishAsset::class,
         JqueryAsset::class,
         JqueryTouchEventsAsset::class,

src/web/assets/cp/src/css/_cp.scss

@@ -40,11 +40,11 @@ body {
 }
 
 .reduce-focus-visibility {
-  :focus:not(.focus-visible) {
+  :focus:not(:focus-visible) {
     box-shadow: none;
   }
 
-  .focus-visible {
+  :focus-visible {
     box-shadow: var(--focus-ring);
   }
 }

src/web/assets/cp/src/css/_main.scss

@@ -1887,7 +1887,7 @@ div.btn.submit input {
     background-color: transparentize($grey200, 0.9);
     border-color: transparent;
 
-    .reduce-focus-visibility &:not(.focus-visible) {
+    .reduce-focus-visibility &:not(:focus-visible) {
       border: 1px dashed var(--medium-hairline-color);
     }
   }
@@ -2145,7 +2145,7 @@ div.btn.submit input {
         }
       }
 
-      &.focus-visible {
+      @include focus-styles {
         box-shadow: inset 0 0 0 1px var(--hairline-color), var(--focus-ring);
       }
     }
@@ -3665,7 +3665,7 @@ ul.tree,
         text-decoration: none;
       }
 
-      &.focus-visible {
+      @include focus-styles {
         box-shadow: none;
 
         .tab-label {
@@ -5160,8 +5160,7 @@ ul.tree,
       @include disclosure-link-hover-styles;
     }
 
-    body:not(.reduce-focus-visibility) &:focus,
-    body.reduce-focus-visibility &.focus-visible {
+    @include focus-styles {
       box-shadow: inset 0 0 0 3px hsla(var(--dark-focus-hsl), 0.7);
     }
   }
@@ -5295,8 +5294,7 @@ table.editable {
     @include input-focused-styles;
   }
 
-  body:not(.reduce-focus-visibility) &:focus,
-  body.reduce-focus-visibility &.focus-visible {
+  @include focus-styles {
     @include input-focused-styles;
   }
 }
@@ -5652,15 +5650,14 @@ body:not(.reduce-focus-visibility) {
 }
 
 body.reduce-focus-visibility {
-  input.checkbox.focus-visible + label:before,
-  .focus-visible div.checkbox:before {
+  input.checkbox:focus-visible + label:before,
+  :focus-visible div.checkbox:before {
     @include input-focused-styles;
   }
 }
 
 .monaco-mouse-cursor-text {
-  &:focus,
-  &.focus-visible {
+  @include focus-styles {
     box-shadow: none !important;
   }
 }
@@ -5761,8 +5758,8 @@ body:not(.reduce-focus-visibility) {
 }
 
 body.reduce-focus-visibility {
-  input.radio.focus-visible + label:before,
-  .focus-visible div.radio:before {
+  input.radio:focus-visible + label:before,
+  :focus-visible div.radio:before {
     @include input-focused-styles;
   }
 }
@@ -5773,8 +5770,7 @@ body.reduce-focus-visibility {
   font-size: 14px;
   appearance: none;
 
-  body:not(.reduce-focus-visibility) &:focus,
-  body.reduce-focus-visibility &.focus-visible {
+  @include focus-styles {
     @include input-focused-styles;
   }
 
@@ -6123,8 +6119,7 @@ tr.indexingSession td.progress div.progressContainer div.progressInfo {
     @include select-input-focused-styles;
   }
 
-  body:not(.reduce-focus-visibility) &:focus,
-  body.reduce-focus-visibility &.focus-visible {
+  @include focus-styles {
     @include select-input-focused-styles;
   }
 }

src/web/assets/cp/src/css/_preview.scss

@@ -177,10 +177,9 @@
     }
   }
 
-  .lp-device-type__input {
-    &.focus-visible + label {
-      box-shadow: var(--focus-ring);
-    }
+  body:not(.reduce-focus-visibility) & .lp-device-type__input:focus + label,
+  body.reduce-focus-visibility & .lp-device-type__input:focus-visible + label {
+    box-shadow: var(--focus-ring);
   }
 
   .lp-device-mask {