feat: improve accessibility and styling in SegmentedControl and ThemeSwitcher components

Author: AbhishekA1509

src/Common/SegmentedControl/Segment.tsx

@@ -45,7 +45,7 @@ const Segment = ({
                     name={name}
                     onChange={handleChange}
                     checked={isSelected}
-                    className="dc__opacity-0 m-0-imp dc__top-0 dc__left-0 dc__position-abs dc__bottom-0 dc__right-0 w-100 pointer h-100 dc__visibility-hidden"
+                    className="sr-only"
                     disabled={disabled}
                 />
 

src/Common/SegmentedControl/segmentedControl.scss

@@ -7,6 +7,13 @@
         --segmented-control-highlight-width: auto;
         --segmented-control-highlight-x-position: 0;
 
+        &:has(input[type='radio']:checked:focus-visible) {
+            .segmented-control__segment--selected {
+                outline: 2px solid var(--B500) !important;
+                outline-offset: 2px;
+            }
+        }
+
         &::before {
             content: '';
             background: var(--bg-primary);
@@ -39,7 +46,7 @@
         transition: color 0.3s ease;
 
         &:hover:not(#{$parent-selector}--selected):not(.cursor-not-allowed) {
-            background-color: var(--bg-secondary);
+            background-color: var(--bg-hover);
         }
 
         &--selected {

src/Shared/Components/ThemeSwitcher/ThemeSwitcher.component.tsx

@@ -32,7 +32,7 @@ const ThemeSwitcher = ({ onChange }: ThemeSwitcherProps) => {
         <button
             type="button"
             data-testid="open-theme-switcher-dialog"
-            className={`${LOGOUT_CARD_BASE_BUTTON_CLASS} dc__hover-n50`}
+            className={`${LOGOUT_CARD_BASE_BUTTON_CLASS} dc__tab-focus dc__hover-n50`}
             onClick={handleShowThemeSwitcherDialog}
         >
             Theme