chore(alert): remove ion-buttons from tests

core/src/components/action-sheet/test/a11y/index.html

@@ -19,12 +19,12 @@
     <main class="ion-padding">
       <h1>Action Sheet - A11y</h1>
 
-      <ion-button id="bothHeaders" expand="block" onclick="presentBothHeaders()">Both Headers</ion-button>
-      <ion-button id="subHeaderOnly" expand="block" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
-      <ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</ion-button>
-      <ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
-      <ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
-      <ion-button id="ariaLabelCancelButton" expand="block" onclick="presentAriaLabelCancelButton()"
+      <ion-button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</ion-button>
+      <ion-button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
+      <ion-button id="noHeaders" onclick="presentNoHeaders()">No Headers</ion-button>
+      <ion-button id="customAria" onclick="presentCustomAria()">Custom Aria</ion-button>
+      <ion-button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
+      <ion-button id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()"
         >Aria Label Cancel Button</ion-button
       >
     </main>

core/src/components/alert/test/a11y/index.html

@@ -9,6 +9,19 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      main > button {
+        display: block;
+        clear: both;
+        width: 100%;
+        padding: 12px 8px;
+        font-size: 1em;
+        background: #f8f8f8;
+        border: 1px solid #eee;
+        border-radius: 4px;
+        margin-bottom: 8px;
+      }
+    </style>
   </head>
   <script type="module">
     import { alertController } from '../../../../dist/ionic/index.esm.js';
@@ -19,13 +32,13 @@
     <main class="ion-padding">
       <h1>Alert - A11y</h1>
 
-      <ion-button id="bothHeaders" expand="block" onclick="presentBothHeaders()">Both Headers</ion-button>
-      <ion-button id="subHeaderOnly" expand="block" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
-      <ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</ion-button>
-      <ion-button id="noMessage" expand="block" onclick="presentNoMessage()">No Message</ion-button>
-      <ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
-      <ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
-      <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
+      <button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
+      <button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
+      <button id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
+      <button id="noMessage" onclick="presentNoMessage()">No Message</button>
+      <button id="customAria" onclick="presentCustomAria()">Custom Aria</button>
+      <button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
+      <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
     </main>
 
     <script>

core/src/components/alert/test/basic/index.html

@@ -28,23 +28,31 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button id="basic" expand="block" onclick="presentAlert()">Alert</ion-button>
-        <ion-button id="longMessage" expand="block" onclick="presentAlertLongMessage()">Alert Long Message</ion-button>
-        <ion-button id="multipleButtons" expand="block" onclick="presentAlertMultipleButtons()"
-          >Multiple Buttons (>2)
-        </ion-button>
-        <ion-button id="noMessage" expand="block" onclick="presentAlertNoMessage()">Alert No Message</ion-button>
-        <ion-button id="asyncHandler" expand="block" onclick="presentAlertAsyncHandler()"
-          >Alert Async Handler</ion-button
-        >
-        <ion-button id="confirm" expand="block" onclick="presentAlertConfirm()">Confirm</ion-button>
-        <ion-button id="prompt" expand="block" onclick="presentAlertPrompt()">Prompt</ion-button>
-        <ion-button id="radio" expand="block" onclick="presentAlertRadio()">Radio</ion-button>
-        <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
-        <ion-button expand="block" onclick="presentWithCssClass()">CssClass</ion-button>
+        <button class="custom-accordion-button" id="basic" onclick="presentAlert()">Alert</button>
+        <button id="longMessage" onclick="presentAlertLongMessage()">Alert Long Message</button>
+        <button id="multipleButtons" onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</button>
+        <button id="noMessage" onclick="presentAlertNoMessage()">Alert No Message</button>
+        <button id="asyncHandler" onclick="presentAlertAsyncHandler()">Alert Async Handler</button>
+        <button id="confirm" onclick="presentAlertConfirm()">Confirm</button>
+        <button id="prompt" onclick="presentAlertPrompt()">Prompt</button>
+        <button id="radio" onclick="presentAlertRadio()">Radio</button>
+        <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
+        <button onclick="presentWithCssClass()">CssClass</button>
       </ion-content>
 
       <style>
+        ion-content > button {
+          display: block;
+          clear: both;
+          width: 100%;
+          padding: 12px 8px;
+          font-size: 1em;
+          background: #f8f8f8;
+          border: 1px solid #eee;
+          border-radius: 4px;
+          margin-bottom: 8px;
+        }
+
         .my-custom-class {
           --background: lightblue;
           --min-width: 0;

core/src/components/alert/test/is-open/index.html

@@ -11,6 +11,19 @@
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      ion-content > button {
+        display: block;
+        clear: both;
+        width: 100%;
+        padding: 12px 8px;
+        font-size: 1em;
+        background: #f8f8f8;
+        border: 1px solid #eee;
+        border-radius: 4px;
+        margin-bottom: 8px;
+      }
+    </style>
   </head>
 
   <body>
@@ -22,8 +35,8 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button id="default" onclick="openAlert()">Open Alert</ion-button>
-        <ion-button id="timeout" onclick="openAlert(500)">Open Alert, Close After 500ms</ion-button>
+        <button id="default" onclick="openAlert()">Open Alert</button>
+        <button id="timeout" onclick="openAlert(500)">Open Alert, Close After 500ms</button>
 
         <ion-alert header="Alert" message="Hello World!"></ion-alert>
       </ion-content>

core/src/components/alert/test/translucent/index.html

@@ -27,12 +27,10 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button expand="block" onclick="presentAlert()">Alert</ion-button>
-        <ion-button expand="block" color="secondary" onclick="presentAlertLongMessage()">Alert Long Message</ion-button>
-        <ion-button expand="block" color="danger" onclick="presentAlertMultipleButtons()"
-          >Multiple Buttons (>2)</ion-button
-        >
-        <ion-button expand="block" color="light" onclick="presentAlertNoMessage()">Alert No Message</ion-button>
+        <button class="blue" onclick="presentAlert()">Alert</button>
+        <button class="light-blue" onclick="presentAlertLongMessage()">Alert Long Message</button>
+        <button class="red" onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</button>
+        <button class="light" onclick="presentAlertNoMessage()">Alert No Message</button>
 
         <ion-grid>
           <ion-row>
@@ -48,10 +46,10 @@
           </ion-row>
         </ion-grid>
 
-        <ion-button expand="block" color="dark" onclick="presentAlertConfirm()">Confirm</ion-button>
-        <ion-button expand="block" color="primary" onclick="presentAlertPrompt()">Prompt</ion-button>
-        <ion-button expand="block" color="secondary" onclick="presentAlertRadio()">Radio</ion-button>
-        <ion-button expand="block" color="danger" onclick="presentAlertCheckbox()">Checkbox</ion-button>
+        <button class="black" onclick="presentAlertConfirm()">Confirm</button>
+        <button class="blue" onclick="presentAlertPrompt()">Prompt</button>
+        <button class="light-blue" onclick="presentAlertRadio()">Radio</button>
+        <button class="red" onclick="presentAlertCheckbox()">Checkbox</button>
       </ion-content>
     </ion-app>
 
@@ -305,6 +303,19 @@
     </script>
 
     <style>
+      ion-content > button {
+        display: block;
+        clear: both;
+        width: 100%;
+        padding: 12px 8px;
+        font-size: 1em;
+        background: #f8f8f8;
+        border: 1px solid #eee;
+        border-radius: 4px;
+        margin-bottom: 8px;
+        color: #fff;
+      }
+
       f {
         display: block;
         width: 100%;
@@ -323,6 +334,10 @@
         background-color: #3478f6;
       }
 
+      .light-blue {
+        background-color: #6bbef6;
+      }
+
       .yellow {
         background-color: #ffff80;
       }
@@ -346,6 +361,14 @@
       .orange {
         background-color: #f69234;
       }
+
+      .black {
+        background-color: #000;
+      }
+
+      .light {
+        color: #000;
+      }
     </style>
   </body>
 </html>

core/src/components/alert/test/trigger/index.html

@@ -11,6 +11,19 @@
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      ion-content > button {
+        display: block;
+        clear: both;
+        width: 100%;
+        padding: 12px 8px;
+        font-size: 1em;
+        background: #f8f8f8;
+        border: 1px solid #eee;
+        border-radius: 4px;
+        margin-bottom: 8px;
+      }
+    </style>
   </head>
 
   <body>
@@ -22,8 +35,8 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button id="default">Open Alert</ion-button>
-        <ion-button id="timeout">Open Alert, Close After 500ms</ion-button>
+        <button id="default">Open Alert</button>
+        <button id="timeout">Open Alert, Close After 500ms</button>
 
         <ion-alert id="default-alert" trigger="default" header="Alert" message="Hello World!"></ion-alert>
         <ion-alert id="timeout-alert" trigger="timeout" header="Alert" message="Hello World!"></ion-alert>