fix(searchbar): cancel icon aligns with back button (#28478)

Issue number: resolves #28468

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The cancel button in the searchbar used to align with the back button,
but that behavior gradually regressed between Ionic v4 and Ionic v7.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adjusted the padding on the searchbar back button
- Reduced the size of the searchbar back button. It was currently set to
25.6px whereas the `ion-back-button` icon was 24px. This caused the
icons to never align even with 9px. (This should cause a few additional
diffs)
- Added a screenshot test 

| v4 | v5 | v6 | v7 | branch |
| - | - | - | - | - |
| ![Screenshot 2023-11-06 at 5 41
16 PM](https://github.com/ionic-team/ionic-framework/assets/2721089/fadad5ba-00dc-42f2-b0c8-1968f47e90c9)
|
![image](https://github.com/ionic-team/ionic-framework/assets/2721089/798e30a8-5001-41eb-880d-bd3b0becd4cb)
|
![image](https://github.com/ionic-team/ionic-framework/assets/2721089/5e2841f7-a58c-43dc-8338-d9a355785ce9)
|
![image](https://github.com/ionic-team/ionic-framework/assets/2721089/20e590a9-5341-490f-8a3e-ca3666b899e1)
|
![image](https://github.com/ionic-team/ionic-framework/assets/2721089/d2143089-d636-44ec-a87e-28ef27709ffe)
|

Note that in v4 the alignment was slightly off. It was fixed in v5, but
then broke in v6 and remained unchanged in v7 (until now).


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.5.4-dev.11699310489.151b2717`

---------

Co-authored-by: Brandy Carney <[email protected]>
Co-authored-by: ionitron <[email protected]>

Author: 3 people

core/src/components/searchbar/searchbar.md.scss

@@ -34,7 +34,13 @@
 // -----------------------------------------
 
 .searchbar-cancel-button {
-  @include position(0, null, null, 5px);
+  /**
+   * The left edge of the cancel button
+   * should align with the left edge
+   * of the back button if the searchbar
+   * is used in a toolbar.
+   */
+  @include position(0, null, null, 9px);
 
   background-color: $searchbar-md-cancel-button-background-color;
 

core/src/components/searchbar/searchbar.md.vars.scss

@@ -25,7 +25,7 @@ $searchbar-md-cancel-button-color:               $text-color-step-100 !default;
 $searchbar-md-cancel-button-background-color:    transparent !default;
 
 /// @prop - Font size of the searchbar cancel button
-$searchbar-md-cancel-button-font-size:           1.6em !default;
+$searchbar-md-cancel-button-font-size:           1.5em !default;
 
 /// @prop - Color of the searchbar input search icon
 $searchbar-md-input-search-icon-color:           $text-color-step-400 !default;

core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-md-ltr-Mobile-Chrome-linux.png

@@ -198,3 +198,33 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('searchbar: cancel button alignment'), () => {
+    test('should align with the back button when used in a toolbar', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28468',
+      });
+      await page.setContent(
+        `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button default-href="#"></ion-back-button>
+            </ion-buttons>
+            <ion-title>Test</ion-title>
+          </ion-toolbar>
+          <ion-toolbar>
+            <ion-searchbar show-cancel-button="always"></ion-searchbar>
+          </ion-toolbar>
+        </ion-header>
+      `,
+        config
+      );
+
+      const header = page.locator('ion-header');
+      await expect(header).toHaveScreenshot(screenshot(`searchbar-back-button-align`));
+    });
+  });
+});