test(action-sheet): add tabIndex, revert styles

Author: thetaPC

core/src/components/action-sheet/action-sheet.md.scss

@@ -66,16 +66,16 @@
 .action-sheet-button {
   @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start);
 
-  // position: relative;
+  position: relative;
 
   min-height: $action-sheet-md-button-height;
 
   font-size: $action-sheet-md-button-font-size;
 
   text-align: $action-sheet-md-text-align;
 
-  // contain: content;
-  // overflow: hidden;
+  contain: content;
+  overflow: hidden;
 }
 
 .action-sheet-icon {

core/src/components/action-sheet/action-sheet.scss

@@ -118,7 +118,7 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  // pointer-events: none;
+  pointer-events: none;
 
   width: 100%;
   height: 100%;
@@ -177,9 +177,9 @@
 // Action Sheet: States
 // --------------------------------------------------
 
-// .action-sheet-button::after {
-//   @include button-state();
-// }
+.action-sheet-button::after {
+  @include button-state();
+}
 
 
 // Action Sheet: Selected

core/src/components/action-sheet/action-sheet.tsx

@@ -410,6 +410,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                   class={buttonClass(b)}
                   onClick={() => this.buttonClick(b)}
                   disabled={b.disabled}
+                  tabIndex={b.disabled ? -1 : 0}
                 >
                   <span class="action-sheet-button-inner">
                     {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}