Add default outline for a11y

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')};
+    box-shadow: ${dt('rating.focus.ring.shadow')};
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline: ${dt('rating.focus.ring.width')} ${dt('rating.focus.ring.style')} ${dt('rating.focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
+    outline-offset: ${dt('rating.focus.ring.offset')};
 }
 
 .p-rating-icon {

packages/themes/src/presets/material/base/index.js

@@ -34,9 +34,9 @@ export default {
     semantic: {
         transitionDuration: '0.2s',
         focusRing: {
-            width: '0',
+            width: '2px',
-            style: 'none',
+            style: 'solid',
-            color: 'transparent',
+            color: '{primary.color}',
             offset: '0',
             shadow: 'none'
         },

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}',
+            width: '0',
-            style: '{focus.ring.style}',
+            style: 'none',
-            color: '{focus.ring.color}',
+            color: 'unset',
-            offset: '{focus.ring.offset}',
+            offset: '0',
-            shadow: '{focus.ring.shadow}'
+            shadow: 'none'
         },
         transitionDuration: '{form.field.transition.duration}'
     },

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}',
+            width: '0',
-            style: '{focus.ring.style}',
+            style: 'none',
-            color: '{focus.ring.color}',
+            color: 'unset',
-            offset: '{focus.ring.offset}',
+            offset: '0',
-            shadow: '{focus.ring.shadow}'
+            shadow: 'none'
         },
         transitionDuration: '{form.field.transition.duration}'
     },

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',

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}',
+            width: '0',
-            style: '{focus.ring.style}',
+            style: 'none',
-            color: '{focus.ring.color}',
+            color: 'unset',
-            offset: '{focus.ring.offset}',
+            offset: '0',
-            shadow: '{focus.ring.shadow}'
+            shadow: 'none'
         }
     },
     style: ({ dt }) => `

packages/themes/src/presets/material/toggleswitch/index.js

@@ -6,11 +6,11 @@ export default {
         gap: '0',
         shadow: 'none',
         focusRing: {
-            width: '{focus.ring.width}',
+            width: '0',
-            style: '{focus.ring.style}',
+            style: 'none',
-            color: '{focus.ring.color}',
+            color: 'unset',
-            offset: '{focus.ring.offset}',
+            offset: '0',
-            shadow: '{focus.ring.shadow}'
+            shadow: 'none'
         },
         borderWidth: '1px',
         borderColor: 'transparent',