From c1945bdcf60ce291f75a1a3603229c93ecb07103 Mon Sep 17 00:00:00 2001
From: GautamVhavle <gautam.vhavle@grigtechnologies.com>
Date: Mon, 31 Aug 2026 05:12:18 +0530
Subject: [PATCH] fix(search): move focus ring to the search form container

The global input styles from @siemens/ix apply an offset focus outline to
every input on the site. On the search field that ring was painted inside
the surrounding form, so it overlapped the form border, the submit icon
and the clear button.

The input no longer draws its own outline; the form container shows the
focus ring instead.

Fixes siemens/ix#2751
---
 src/scss/overwrite/_searchBar.scss | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/scss/overwrite/_searchBar.scss b/src/scss/overwrite/_searchBar.scss
index 3fa8fe7de..e4d467a4e 100644
--- a/src/scss/overwrite/_searchBar.scss
+++ b/src/scss/overwrite/_searchBar.scss
@@ -44,6 +44,16 @@
   --aa-primary-color-rgb: var(--theme-color-std-text);
   color: var(--theme-color-std-text);
 
+  // The search field is only one part of the form, so the focus ring belongs on
+  // the whole form. Otherwise it is drawn inside the form and overlaps its
+  // border, the submit icon and the clear button.
+  // `!important` is required because autocomplete.js resets the outline with an
+  // equally specific rule that is loaded later.
+  &:focus-within {
+    outline: 1px solid var(--theme-color-focus-bdr) !important;
+    outline-offset: var(--theme-focus-outline-offset);
+  }
+
   .aa-InputWrapperSuffix,
   .aa-InputWrapperPrefix {
     background-color: var(--theme-input--background);
@@ -55,6 +65,13 @@
     box-shadow: none;
   }
 
+  // Wins over the global `input:focus` rule from `@siemens/ix`.
+  .aa-Input:focus,
+  .aa-Input:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
   .aa-Input::placeholder {
     color: var(--theme-color-soft-text);
   }