From 053cdfbb1828a0ea938b16b5ee17eb30b62657ec Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 29 Sep 2024 00:49:17 +0300
Subject: [PATCH] Add default outline for a11y

---
 packages/primevue/src/rating/style/RatingStyle.js      |  6 +++---
 packages/themes/src/presets/material/base/index.js     |  6 +++---
 packages/themes/src/presets/material/checkbox/index.js | 10 +++++-----
 .../themes/src/presets/material/radiobutton/index.js   | 10 +++++-----
 packages/themes/src/presets/material/rating/index.js   |  9 ++++++++-
 packages/themes/src/presets/material/slider/index.js   | 10 +++++-----
 .../themes/src/presets/material/toggleswitch/index.js  | 10 +++++-----
 7 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/packages/primevue/src/rating/style/RatingStyle.js b/packages/primevue/src/rating/style/RatingStyle.js
index 3a3c5d1e4..21497887c 100644
--- a/packages/primevue/src/rating/style/RatingStyle.js
+++ b/packages/primevue/src/rating/style/RatingStyle.js
@@ -21,9 +21,9 @@ const theme = ({ dt }) => `
 }
 
 .p-rating-option.p-focus-visible {
-    box-shadow: ${dt('focus.ring.shadow')};
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
+    box-shadow: ${dt('rating.focus.ring.shadow')};
+    outline: ${dt('rating.focus.ring.width')} ${dt('rating.focus.ring.style')} ${dt('rating.focus.ring.color')};
+    outline-offset: ${dt('rating.focus.ring.offset')};
 }
 
 .p-rating-icon {
diff --git a/packages/themes/src/presets/material/base/index.js b/packages/themes/src/presets/material/base/index.js
index 982b93705..95537c171 100644
--- a/packages/themes/src/presets/material/base/index.js
+++ b/packages/themes/src/presets/material/base/index.js
@@ -34,9 +34,9 @@ export default {
     semantic: {
         transitionDuration: '0.2s',
         focusRing: {
-            width: '0',
-            style: 'none',
-            color: 'transparent',
+            width: '2px',
+            style: 'solid',
+            color: '{primary.color}',
             offset: '0',
             shadow: 'none'
         },
diff --git a/packages/themes/src/presets/material/checkbox/index.js b/packages/themes/src/presets/material/checkbox/index.js
index 007bdae96..13156571a 100644
--- a/packages/themes/src/presets/material/checkbox/index.js
+++ b/packages/themes/src/presets/material/checkbox/index.js
@@ -15,11 +15,11 @@ export default {
         invalidBorderColor: '{form.field.invalid.border.color}',
         shadow: '{form.field.shadow}',
         focusRing: {
-            width: '{focus.ring.width}',
-            style: '{focus.ring.style}',
-            color: '{focus.ring.color}',
-            offset: '{focus.ring.offset}',
-            shadow: '{focus.ring.shadow}'
+            width: '0',
+            style: 'none',
+            color: 'unset',
+            offset: '0',
+            shadow: 'none'
         },
         transitionDuration: '{form.field.transition.duration}'
     },
diff --git a/packages/themes/src/presets/material/radiobutton/index.js b/packages/themes/src/presets/material/radiobutton/index.js
index a9c4bc2d3..68b77d8b0 100644
--- a/packages/themes/src/presets/material/radiobutton/index.js
+++ b/packages/themes/src/presets/material/radiobutton/index.js
@@ -14,11 +14,11 @@ export default {
         invalidBorderColor: '{form.field.invalid.border.color}',
         shadow: '{form.field.shadow}',
         focusRing: {
-            width: '{focus.ring.width}',
-            style: '{focus.ring.style}',
-            color: '{focus.ring.color}',
-            offset: '{focus.ring.offset}',
-            shadow: '{focus.ring.shadow}'
+            width: '0',
+            style: 'none',
+            color: 'unset',
+            offset: '0',
+            shadow: 'none'
         },
         transitionDuration: '{form.field.transition.duration}'
     },
diff --git a/packages/themes/src/presets/material/rating/index.js b/packages/themes/src/presets/material/rating/index.js
index 90292c773..9a9edc429 100644
--- a/packages/themes/src/presets/material/rating/index.js
+++ b/packages/themes/src/presets/material/rating/index.js
@@ -1,7 +1,14 @@
 export default {
     root: {
         gap: '0.5rem',
-        transitionDuration: '{transition.duration}'
+        transitionDuration: '{transition.duration}',
+        focusRing: {
+            width: '0',
+            style: 'none',
+            color: 'unset',
+            offset: '0',
+            shadow: 'none'
+        }
     },
     icon: {
         size: '1.125rem',
diff --git a/packages/themes/src/presets/material/slider/index.js b/packages/themes/src/presets/material/slider/index.js
index 3b1fc2785..5e6a794bd 100644
--- a/packages/themes/src/presets/material/slider/index.js
+++ b/packages/themes/src/presets/material/slider/index.js
@@ -25,11 +25,11 @@ export default {
             shadow: '0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12)'
         },
         focusRing: {
-            width: '{focus.ring.width}',
-            style: '{focus.ring.style}',
-            color: '{focus.ring.color}',
-            offset: '{focus.ring.offset}',
-            shadow: '{focus.ring.shadow}'
+            width: '0',
+            style: 'none',
+            color: 'unset',
+            offset: '0',
+            shadow: 'none'
         }
     },
     style: ({ dt }) => `
diff --git a/packages/themes/src/presets/material/toggleswitch/index.js b/packages/themes/src/presets/material/toggleswitch/index.js
index a7507dfd2..91a0f8299 100644
--- a/packages/themes/src/presets/material/toggleswitch/index.js
+++ b/packages/themes/src/presets/material/toggleswitch/index.js
@@ -6,11 +6,11 @@ export default {
         gap: '0',
         shadow: 'none',
         focusRing: {
-            width: '{focus.ring.width}',
-            style: '{focus.ring.style}',
-            color: '{focus.ring.color}',
-            offset: '{focus.ring.offset}',
-            shadow: '{focus.ring.shadow}'
+            width: '0',
+            style: 'none',
+            color: 'unset',
+            offset: '0',
+            shadow: 'none'
         },
         borderWidth: '1px',
         borderColor: 'transparent',