refactor(Calendar): improve focus style

Author: mrholek

scss/_calendar.scss

@@ -21,6 +21,7 @@
   --#{$prefix}calendar-cell-week-number-color: #{$calendar-cell-week-number-color};
   --#{$prefix}calendar-cell-hover-color: #{$calendar-cell-hover-color};
   --#{$prefix}calendar-cell-hover-bg: #{$calendar-cell-hover-bg};
+  --#{$prefix}calendar-cell-focus-box-shadow: #{$calendar-cell-focus-box-shadow};
   --#{$prefix}calendar-cell-disabled-color: #{$calendar-cell-disabled-color};
   --#{$prefix}calendar-cell-selected-color: #{$calendar-cell-selected-color};
   --#{$prefix}calendar-cell-selected-bg: #{$calendar-cell-selected-bg};
@@ -231,6 +232,14 @@
     @include border-radius($border-radius);
   }
 
+  .calendars:not(.select-week) &:focus-visible {
+    outline: 0;
+
+    .calendar-cell-inner {
+      box-shadow: var(--#{$prefix}calendar-cell-focus-box-shadow);
+      @include border-radius($border-radius);
+    }
+  }
 }
 
 .calendar-row {
@@ -259,6 +268,12 @@
       @include border-end-radius($border-radius);
     }
   }
+
+  &:focus-visible {
+    outline: 0;
+    box-shadow: var(--#{$prefix}calendar-cell-focus-box-shadow);
+    @include border-radius($border-radius);
+  }
 }
 
 @if $enable-dark-mode {

scss/_variables.scss

@@ -2323,6 +2323,8 @@ $calendar-cell-hover-color:                  var(--#{$prefix}body-color) !defaul
 $calendar-cell-hover-bg:                     var(--#{$prefix}tertiary-bg) !default;
 $calendar-cell-disabled-color:               var(--#{$prefix}tertiary-color) !default;
 
+$calendar-cell-focus-box-shadow:             $focus-ring-box-shadow !default;
+
 $calendar-cell-selected-color:               $white !default;
 $calendar-cell-selected-bg:                  var(--#{$prefix}primary) !default;