Fix: Resolve dual scrollbar issue and flickering on initial load (#485)

* Fix: Resolve dual scrollbar issue and flickering on initial load

* fix: add snapshot

---------

Co-authored-by: 🏎️ Imer <[email protected]>
Co-authored-by: Mickey <[email protected]>
Co-authored-by: afc163 <[email protected]>

Author: 4 people

components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -741,8 +741,9 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
     <div
       aria-label="segmented control"
       class="ant-segmented"
-      role="listbox"
+      role="radiogroup"
       style="margin-inline-end: auto;"
+      tabindex="0"
     >
       <div
         class="ant-segmented-group"
@@ -753,12 +754,12 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
           <input
             checked=""
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="true"
             class="ant-segmented-item-label"
-            role="option"
             title="Wrap"
           >
             Wrap
@@ -769,12 +770,12 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Scroll X"
           >
             Scroll X
@@ -785,12 +786,12 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Scroll Y"
           >
             Scroll Y

components/attachments/__tests__/__snapshots__/demo.test.tsx.snap

@@ -675,8 +675,9 @@ Array [
       <div
         aria-label="segmented control"
         class="ant-segmented"
-        role="listbox"
+        role="radiogroup"
         style="margin-inline-end:auto"
+        tabindex="0"
       >
         <div
           class="ant-segmented-group"
@@ -687,12 +688,12 @@ Array [
             <input
               checked=""
               class="ant-segmented-item-input"
+              name="test-id"
               type="radio"
             />
             <div
               aria-selected="true"
               class="ant-segmented-item-label"
-              role="option"
               title="Wrap"
             >
               Wrap
@@ -703,12 +704,12 @@ Array [
           >
             <input
               class="ant-segmented-item-input"
+              name="test-id"
               type="radio"
             />
             <div
               aria-selected="false"
               class="ant-segmented-item-label"
-              role="option"
               title="Scroll X"
             >
               Scroll X
@@ -719,12 +720,12 @@ Array [
           >
             <input
               class="ant-segmented-item-input"
+              name="test-id"
               type="radio"
             />
             <div
               aria-selected="false"
               class="ant-segmented-item-label"
-              role="option"
               title="Scroll Y"
             >
               Scroll Y
@@ -1903,7 +1904,7 @@ Array [
 exports[`renders components/attachments/demo/placeholder.tsx correctly 1`] = `
 <div
   class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
-  style="padding:16px;background:rgba(0, 0, 0, 0.04)"
+  style="padding:16px;background:rgba(0,0,0,0.04)"
 >
   <div
     style="border-radius:6px;overflow:hidden;background:#ffffff"