Fix focus-visible

Also remove polyfill now :focus-visible is in baseline

client/package.json

@@ -99,7 +99,6 @@
     "eslint-plugin-jsdoc": "^48.1.0",
     "eslint-plugin-prefer-arrow": "latest",
     "expect-webdriverio": "^4.2.3",
-    "focus-visible": "^5.0.2",
     "hls.js": "~1.3",
     "html-loader": "^5.0.0",
     "html-webpack-plugin": "^5.3.1",

client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss

@@ -32,8 +32,8 @@
 
 .highlighted-comment {
   display: inline-block;
-  background-color: #F5F5F5;
-  color: #3d3d3d;
+  background-color: pvar(--greySecondaryBackgroundColor);
+  color: pvar(--mainForegroundColor);
   padding: 0 5px;
   font-size: 13px;
   margin-bottom: 5px;
@@ -78,7 +78,7 @@
   }
 
   .comment-account-fid {
-    opacity: .6;
+    color: pvar(--greyForegroundColor);
   }
 }
 

client/src/app/menu/language-chooser.component.scss

@@ -7,7 +7,7 @@
 
   border-radius: 0;
 
-  &.focus-visible,
+  &:focus-visible,
   &:focus {
     box-shadow: none;
   }

client/src/app/menu/menu.component.scss

@@ -44,7 +44,7 @@ ul {
   }
 
   &:hover,
-  &.focus-visible {
+  &:focus-visible {
     background-color: rgba(255, 255, 255, 0.1);
   }
 

client/src/sass/include/_miniature.scss

@@ -69,7 +69,7 @@
     }
   }
 
-  &.focus-visible {
+  &:focus-visible {
     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
     outline: none;
   }

client/src/sass/include/_mixins.scss

@@ -12,13 +12,13 @@
     text-decoration: none !important;
   }
 
-  &:focus:not(.focus-visible) {
+  &:focus:not(:focus-visible) {
     outline: none !important;
   }
 }
 
 @mixin disable-outline {
-  &:focus:not(.focus-visible) {
+  &:focus:not(:focus-visible) {
     outline: none !important;
   }
 }
@@ -77,7 +77,7 @@
 
 @mixin button-focus($color) {
   &:focus,
-  &.focus-visible {
+  &:focus-visible {
     box-shadow: #{$focus-box-shadow-form} $color;
   }
 }

client/src/sass/player/peertube-skin.scss

@@ -65,7 +65,7 @@ body {
       background-image: url('#{$assets-path}/player/images/big-play-button.svg');
     }
 
-    &.focus-visible,
+    &:focus-visible,
     &:hover {
       background-color: var(--mainColor, #696969);
     }

client/src/sass/primeng-custom.scss

@@ -525,7 +525,7 @@ p-table {
       }
     }
 
-    &.focus-visible {
+    &:focus-visible {
       border: 1px solid pvar(--mainForegroundColor) !important
     }
   }
@@ -580,7 +580,7 @@ p-table {
       background-color: pvar(--submenuBackgroundColor) !important;
     }
 
-    &.p-sortable-column.focus-visible {
+    &.p-sortable-column:focus-visible {
       border: 1px solid pvar(--mainForegroundColor) !important
     }