fix(input): clear button can now be tabbed to (#21633)

fixes https://github.com/ionic-team/ionic/issues/21549

core/src/components/input/input.scss

@@ -147,7 +147,11 @@
   appearance: none;
 }
 
-:host(.has-focus.has-value) .input-clear-icon {
+.input-clear-icon:focus {
+  opacity: 0.5;
+}
+
+:host(.has-value) .input-clear-icon {
   visibility: visible;
 }
 

core/src/components/input/input.tsx

@@ -323,6 +323,10 @@ export class Input implements ComponentInterface {
     }
   }
 
+  private clearTextOnEnter = (ev: KeyboardEvent) => {
+    if (ev.key === 'Enter') { this.clearTextInput(ev); }
+  }
+
   private clearTextInput = (ev?: Event) => {
     if (this.clearInput && !this.readonly && !this.disabled && ev) {
       ev.preventDefault();
@@ -408,9 +412,9 @@ export class Input implements ComponentInterface {
           aria-label="reset"
           type="button"
           class="input-clear-icon"
-          tabindex="-1"
           onTouchStart={this.clearTextInput}
           onMouseDown={this.clearTextInput}
+          onKeyDown={this.clearTextOnEnter}
         />}
       </Host>
     );