diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx
index 09d361cf9b..873937dbc2 100644
--- a/src/components/Select/components/SelectControl/SelectControl.tsx
+++ b/src/components/Select/components/SelectControl/SelectControl.tsx
@@ -99,6 +99,19 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
         error: isErrorVisible,
     };
 
+    const handleControlClick = React.useCallback(
+        (e?: React.MouseEvent<HTMLElement>) => {
+            // Fix for Safari
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
+            if (e && e.currentTarget !== document.activeElement && 'focus' in e.currentTarget) {
+                (e.currentTarget as HTMLButtonElement).focus();
+            }
+
+            toggleOpen();
+        },
+        [toggleOpen],
+    );
+
     const disableButtonAnimation = React.useCallback(() => {
         setIsDisabledButtonAnimation(true);
     }, []);
@@ -143,7 +156,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
             {
                 onKeyDown,
                 onClear: clearValue,
-                onClick: toggleOpen,
+                onClick: handleControlClick,
                 renderClear: (arg) => renderClearIcon(arg),
                 renderCounter: renderCounterComponent,
                 ref,
@@ -173,7 +186,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
                     }
                     name={name}
                     disabled={disabled}
-                    onClick={toggleOpen}
+                    onClick={handleControlClick}
                     onKeyDown={onKeyDown}
                     type="button"
                     data-qa={qa}
diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
index 3aed92c62a..9c589fe9a7 100644
--- a/src/components/Select/types.ts
+++ b/src/components/Select/types.ts
@@ -13,7 +13,7 @@ export type SelectRenderClearArgs = {
 
 export type SelectRenderControlProps = {
     onClear: () => void;
-    onClick: () => void;
+    onClick: (e: React.MouseEvent<HTMLElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
     renderClear?: (args: SelectRenderClearArgs) => React.ReactNode;
     renderCounter?: () => React.ReactNode;
diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss
index c56e0c9058..2e77a9277c 100644
--- a/src/components/controls/TextArea/TextArea.scss
+++ b/src/components/controls/TextArea/TextArea.scss
@@ -38,6 +38,8 @@ $block: '.#{variables.$ns}text-area';
             outline: 2px solid var(--g-text-area-focus-outline-color, var(--_--focus-outline-color));
             outline-offset: -1px;
         }
+
+        overflow: hidden;
     }
 
     &__control {
diff --git a/src/demo/colors/Base.tsx b/src/demo/colors/Base.tsx
index defa1fa68d..2b2a86a020 100644
--- a/src/demo/colors/Base.tsx
+++ b/src/demo/colors/Base.tsx
@@ -338,6 +338,11 @@ const floats = [
         title: 'Float Hover',
         description: 'Hover for Float.',
     },
+    {
+        name: 'base-float-medium',
+        title: 'Float Medium',
+        description: 'Float for medium contrast.',
+    },
     {
         name: 'base-float-heavy',
         title: 'Float Heavy',
diff --git a/styles/themes/dark-hc/base.scss b/styles/themes/dark-hc/base.scss
index 2d5fde9de0..f868975406 100644
--- a/styles/themes/dark-hc/base.scss
+++ b/styles/themes/dark-hc/base.scss
@@ -73,6 +73,7 @@
     --g-color-base-float: var(--g-color-private-white-100-solid);
 
     --g-color-base-float-hover: var(--g-color-private-white-200-solid);
+    --g-color-base-float-medium: var(--g-color-private-white-200-solid);
     --g-color-base-float-heavy: var(--g-color-private-white-300-solid);
     --g-color-base-float-accent: var(--g-color-private-white-300-solid);
     --g-color-base-float-accent-hover: var(--g-color-private-white-400-solid);
diff --git a/styles/themes/dark/base.scss b/styles/themes/dark/base.scss
index f912867154..83df85f828 100644
--- a/styles/themes/dark/base.scss
+++ b/styles/themes/dark/base.scss
@@ -72,6 +72,7 @@
 
     --g-color-base-float: var(--g-color-private-white-100-solid);
     --g-color-base-float-hover: var(--g-color-private-white-150-solid);
+    --g-color-base-float-medium: var(--g-color-private-white-150-solid);
     --g-color-base-float-heavy: var(--g-color-private-white-250-solid);
     --g-color-base-float-accent: var(--g-color-private-white-150-solid);
     --g-color-base-float-accent-hover: var(--g-color-private-white-200-solid);
diff --git a/styles/themes/light-hc/base.scss b/styles/themes/light-hc/base.scss
index faccc88124..5b5e2b4609 100644
--- a/styles/themes/light-hc/base.scss
+++ b/styles/themes/light-hc/base.scss
@@ -72,6 +72,7 @@
 
     --g-color-base-float: var(--g-color-private-white-1000-solid);
     --g-color-base-float-hover: var(--g-color-private-black-150-solid);
+    --g-color-base-float-medium: var(--g-color-private-black-550-solid);
     --g-color-base-float-heavy: var(--g-color-private-black-700-solid);
     --g-color-base-float-accent: var(--g-color-private-white-1000-solid);
     --g-color-base-float-accent-hover: var(--g-color-private-white-850);
diff --git a/styles/themes/light/base.scss b/styles/themes/light/base.scss
index 969cddf055..57a09d43a3 100644
--- a/styles/themes/light/base.scss
+++ b/styles/themes/light/base.scss
@@ -72,6 +72,7 @@
 
     --g-color-base-float: var(--g-color-private-white-1000-solid);
     --g-color-base-float-hover: var(--g-color-private-black-50-solid);
+    --g-color-base-float-medium: var(--g-color-private-black-550-solid);
     --g-color-base-float-heavy: var(--g-color-private-black-700-solid);
     --g-color-base-float-accent: var(--g-color-private-white-1000-solid);
     --g-color-base-float-accent-hover: var(--g-color-private-white-850);