diff --git a/core/api.txt b/core/api.txt index 5a79c3903aa..7f82ae910a1 100644 --- a/core/api.txt +++ b/core/api.txt @@ -716,6 +716,7 @@ ion-input,prop,autocapitalize,string,'off',false,false ion-input,prop,autocomplete,"additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "email" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "name" | "new-password" | "nickname" | "off" | "on" | "one-time-code" | "organization" | "organization-title" | "photo" | "postal-code" | "sex" | "street-address" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "url" | "username",'off',false,false ion-input,prop,autocorrect,boolean,false,false,false ion-input,prop,autofocus,boolean,false,false,false +ion-input,prop,clearButtonText,string,'reset',false,false ion-input,prop,clearInput,boolean,false,false,false ion-input,prop,clearInputIcon,string | undefined,undefined,false,false ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index a6c8a7032d3..f1555707f8b 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1310,6 +1310,11 @@ export namespace Components { * @default false */ "autofocus": boolean; + /** + * The accessible label for the clear button. Only applies when `clearInput` is set to `true`. + * @default 'reset' + */ + "clearButtonText": string; /** * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. * @default false @@ -6462,6 +6467,11 @@ declare namespace LocalJSX { * @default false */ "autofocus"?: boolean; + /** + * The accessible label for the clear button. Only applies when `clearInput` is set to `true`. + * @default 'reset' + */ + "clearButtonText"?: string; /** * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. * @default false @@ -9205,6 +9215,7 @@ declare namespace LocalJSX { "autofocus": boolean; "clearInput": boolean; "clearInputIcon": string; + "clearButtonText": string; "clearOnEdit": boolean; "counter": boolean; "debounce": number; diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index e24bf990eb9..ee9cc5f134c 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -225,7 +225,16 @@ * being activated, so we never get to that state. */ .input-clear-icon:focus { - opacity: 0.5; + opacity: 1; +} + +.input-clear-icon:focus-visible { + @include border-radius(4px); + + outline: 2px solid #000; + outline-offset: 1px; + + box-shadow: 0 0 0 1px #fff; } :host(.has-value) .input-clear-icon { diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index dbbff605692..a5d0935e3d2 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -131,6 +131,11 @@ export class Input implements ComponentInterface { */ @Prop() clearInputIcon?: string; + /** + * The accessible label for the clear button. Only applies when `clearInput` is set to `true`. + */ + @Prop() clearButtonText = 'reset'; + /** * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ @@ -856,7 +861,7 @@ export class Input implements ComponentInterface { } render() { - const { disabled, fill, readonly, shape, inputId, labelPlacement, hasFocus, clearInputIcon } = this; + const { disabled, fill, readonly, shape, inputId, labelPlacement, hasFocus, clearInputIcon, clearButtonText } = this; const mode = getIonMode(this); const value = this.getValue(); const inItem = hostContext('ion-item', this.el); @@ -945,7 +950,7 @@ export class Input implements ComponentInterface {
{this.clearInput && !readonly && !disabled && (