fix(alert): update styles for rtl (#17129)

- apply border correctly to 2 button mode in iOS
- radio: position icon correctly (fixes #16295)
- checkbox: position icon correctly
- remove scrollbar with radio/checkbox
- updates e2e test to include rtl

https://screenshot.ionicframework.com/5447404/d8bad6a

references #17012

core/src/components/alert/alert.ios.scss

@@ -280,7 +280,17 @@
   overflow: hidden;
 }
 
+.alert-button:first-child {
+  @include rtl() {
+    border-right: 0;
+  }
+}
+
 .alert-button:last-child {
+  @include rtl() {
+    border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
+  }
+
   border-right: 0;
 
   font-weight: $alert-ios-button-main-font-weight;

core/src/components/alert/alert.scss

@@ -87,6 +87,8 @@
   overscroll-behavior-y: contain;
 }
 
+.alert-checkbox-group::-webkit-scrollbar,
+.alert-radio-group::-webkit-scrollbar,
 .alert-message::-webkit-scrollbar {
   display: none;
 }

core/src/components/alert/test/basic/e2e.ts

@@ -1,8 +1,11 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-async function openAlert(selector: string) {
+async function openAlert(selector: string, rtl = false) {
+  const pageUrl = rtl
+   ? '/src/components/alert/test/basic?ionic:_testing=true&rtl=true'
+   : '/src/components/alert/test/basic?ionic:_testing=true';
   const page = await newE2EPage({
-    url: '/src/components/alert/test/basic?ionic:_testing=true'
+    url: pageUrl
   });
 
   await page.click(selector);
@@ -12,7 +15,9 @@ async function openAlert(selector: string) {
   await alert.waitForVisible();
   await page.waitFor(250);
 
-  const compare = await page.compareScreenshot();
+  const compare = rtl
+    ? await page.compareScreenshot('rtl')
+    : await page.compareScreenshot();
   expect(compare).toMatchScreenshot();
 
   await alert.callMethod('dismiss');
@@ -53,3 +58,38 @@ test(`alert: basic, radio`, async () => {
 test(`alert: basic, checkbox`, async () => {
   await openAlert('#checkbox');
 });
+
+// Right to Left tests
+// ------------------------------------------------------
+
+test(`alert: basic`, async () => {
+  await openAlert('#basic', true);
+});
+
+test(`alert: basic, long message`, async () => {
+  await openAlert('#longMessage', true);
+});
+
+test(`alert: basic, multiple buttons`, async () => {
+  await openAlert('#multipleButtons', true);
+});
+
+test(`alert: basic, no message`, async () => {
+  await openAlert('#noMessage', true);
+});
+
+test(`alert: basic, confirm`, async () => {
+  await openAlert('#confirm', true);
+});
+
+test(`alert: basic, prompt`, async () => {
+  await openAlert('#prompt', true);
+});
+
+test(`alert: basic, radio`, async () => {
+  await openAlert('#radio', true);
+});
+
+test(`alert: basic, checkbox`, async () => {
+  await openAlert('#checkbox', true);
+});