@aurodesignsystem/auro-formkit 2.0.0-beta.51 → 2.0.0-beta.53

package/components/input/README.md

@@ -18,7 +18,6 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Input
-
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helptext` for additional content support.
@@ -27,42 +26,55 @@ Use the `<auro-input>` custom element to create basic single-line text fields. S
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## UI development browser support
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Install
-
+## Getting Started
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
+#### NPM Installation
+
 ```shell
 $ npm i @aurodesignsystem/auro-formkit
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
+<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
 
-### Design Token CSS Custom Property dependency
+### Import Options
+
+#### Automatic Registration
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
+For automatic registration, simply import the component:
 
-<!-- AURO-GENERATED-CONTENT:END -->
+```javascript
+// Registers <auro-input> automatically
+import '@aurodesignsystem/auro-formkit/auro-input';
+```
 
-### Define dependency in project component
+#### Custom Registration
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
-Defining the component dependency within each component that is using the `<auro-input>` component.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroInput.register('custom-input')` method on the component class and pass in a unique name.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentUsage.md) -->
-<!-- The below content is automatically added from ../../docs/templates/componentUsage.md -->
+```javascript
+// Import the class only
+import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
+
+// Register with a custom name if desired
+AuroInput.register('custom-input');
+```
 
-```js
-import "@aurodesignsystem/auro-formkit/auro-input";
+#### TypeScript Module Resolution
+
+When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
+
+```json
+{
+    "compilerOptions": {
+        "moduleResolution": "bundler"
+    }
+}
 ```
+
+This configuration enables proper module resolution for the component's TypeScript files.
 <!-- AURO-GENERATED-CONTENT:END -->
 **Reference component in HTML**
 
@@ -74,26 +86,30 @@ import "@aurodesignsystem/auro-formkit/auro-input";
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Install bundled assets from CDN
+### Design Token CSS Custom Property dependency
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) -->
-In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-input__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
+The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
 
-**WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Install from CDN
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
+<!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
+```html
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.0.0-beta.52/auro-input/+esm"></script>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### Bundle example code
+## UI development browser support
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
+For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
 
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentBundleUseModBrowsers.md) -->
-<!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.50/dist/auro-input__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases
-
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./docs/partials/useCases.md -->
 The `<auro-input>` element should be used in situations where users may:
@@ -102,65 +118,18 @@ The `<auro-input>` element should be used in situations where users may:
 * be filling out a form
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## API Code Examples
-
-### Default auro-input
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
-```html
-<auro-input bordered></auro-input>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Development
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md) -->
-In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
+## Formkit development
 
-Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
-
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
+<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
 
-### Start development environment
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md) -->
-Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
-
-```shell
-$ npm run dev
-```
+### Filtering
 
-Open [localhost:8000](http://localhost:8000/)
+Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
 
-If running separate sessions is preferred, please run the following commands in individual terminal shells.
+To only develop a single component, use the `--filter` flag:
 
 ```shell
-$ npm run build:watch
-
-$ npm run serve
+npx turbo dev --filter=@aurodesignsystem/auro-input
 ```
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### API generation
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md) -->
-The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Testing
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) -->
-Automated tests are required for every Auro component. See `.\test\auro-input.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Bundled assets
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md) -->
-Bundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.
-
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/input/demo/api.min.js

@@ -182,7 +182,8 @@ const stringsES = {
   'dateYYMM': 'Ingrese una fecha completa en el formato AA/MM',
   'dateYY': 'Ingrese una fecha completa en el formato AA',
   'dateMM': 'Ingrese una fecha completa en el formato MM',
-  'dateDD': 'Ingrese una fecha completa en el formato DD'
+  'dateDD': 'Ingrese una fecha completa en el formato DD',
+  'clearInput': 'Borrar campo de entrada',
 };
 
 const stringsEN = {
@@ -205,7 +206,8 @@ const stringsEN = {
   'dateYYMM': 'Please enter a complete date in the format YY/MM',
   'dateYY': 'Please enter a complete date in the format YY',
   'dateMM': 'Please enter a complete date in the format MM',
-  'dateDD': 'Please enter a complete date in the format DD'
+  'dateDD': 'Please enter a complete date in the format DD',
+  'clearInput': 'Clear input field',
 };
 
 /**
@@ -6631,8 +6633,7 @@ class AuroInput extends BaseInput {
                 <${this.buttonTag}
                   variant="flat"
                   class="notificationBtn clearBtn"
-                  aria-hidden="true"
-                  tabindex="-1"
+                  aria-label="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor

package/components/input/demo/index.md

@@ -169,35 +169,4 @@ The `<auro-input>` component supports setting a custom validity message specific
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Recommended Use and Version Control
-
-There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-input` custom element is defined automatically.
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroInput.register(name)` method and pass in a unique name.
-
-```js
-import { AuroInput } from './src/auro-input.js';
-
-AuroInput.register('custom-input');
-```
-
-This will create a new custom element that you can use in your HTML that will function identically to the `<auro-input>` element.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/custom.html -->
-  <custom-input bordered></custom-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
-
-```html
-<custom-input bordered></custom-input>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

package/components/input/demo/index.min.js

@@ -120,7 +120,8 @@ const stringsES = {
   'dateYYMM': 'Ingrese una fecha completa en el formato AA/MM',
   'dateYY': 'Ingrese una fecha completa en el formato AA',
   'dateMM': 'Ingrese una fecha completa en el formato MM',
-  'dateDD': 'Ingrese una fecha completa en el formato DD'
+  'dateDD': 'Ingrese una fecha completa en el formato DD',
+  'clearInput': 'Borrar campo de entrada',
 };
 
 const stringsEN = {
@@ -143,7 +144,8 @@ const stringsEN = {
   'dateYYMM': 'Please enter a complete date in the format YY/MM',
   'dateYY': 'Please enter a complete date in the format YY',
   'dateMM': 'Please enter a complete date in the format MM',
-  'dateDD': 'Please enter a complete date in the format DD'
+  'dateDD': 'Please enter a complete date in the format DD',
+  'clearInput': 'Clear input field',
 };
 
 /**
@@ -6569,8 +6571,7 @@ class AuroInput extends BaseInput {
                 <${this.buttonTag}
                   variant="flat"
                   class="notificationBtn clearBtn"
-                  aria-hidden="true"
-                  tabindex="-1"
+                  aria-label="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor

package/components/input/demo/readme.html

@@ -0,0 +1,49 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/index.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Generator | auro-input custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('./readme.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        })
+    </script>
+    <script type="module">
+      import { initExamples } from "./index.min.js";
+
+      initExamples();
+    </script>
+  </body>
+</html>

package/components/input/demo/readme.md

@@ -0,0 +1,135 @@
+<!--
+The README.md file is a compiled document. No edits should be made directly to this file.
+
+README.md is created by running `npm run build:docs`.
+
+This file is generated based on a template fetched from
+`../../docs/templates/componentReadmeTemplate.md`
+and copied to `./componentDocs/README.md` each time the docs are compiled.
+
+The following sections are editable by making changes to the following files:
+
+| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
+|------------------------|---------------------------------------------------|-------------------------------------|
+| Description            | Description of the component                      | `./docs/partials/description.md`    |
+| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
+| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
+| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
+-->
+
+# Input
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
+<!-- The below content is automatically added from ./docs/partials/description.md -->
+Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helptext` for additional content support.
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
+<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Getting Started
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
+
+#### NPM Installation
+
+```shell
+$ npm i @aurodesignsystem/auro-formkit
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
+<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
+
+### Import Options
+
+#### Automatic Registration
+
+For automatic registration, simply import the component:
+
+```javascript
+// Registers <auro-input> automatically
+import '@aurodesignsystem/auro-formkit/auro-input';
+```
+
+#### Custom Registration
+
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroInput.register('custom-input')` method on the component class and pass in a unique name.
+
+```javascript
+// Import the class only
+import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
+
+// Register with a custom name if desired
+AuroInput.register('custom-input');
+```
+
+#### TypeScript Module Resolution
+
+When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
+
+```json
+{
+    "compilerOptions": {
+        "moduleResolution": "bundler"
+    }
+}
+```
+
+This configuration enables proper module resolution for the component's TypeScript files.
+<!-- AURO-GENERATED-CONTENT:END -->
+**Reference component in HTML**
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
+
+```html
+<auro-input bordered></auro-input>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
+### Design Token CSS Custom Property dependency
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
+The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Install from CDN
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
+<!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
+
+```html
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.0.0-beta.52/auro-input/+esm"></script>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## UI development browser support
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
+For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## auro-input use cases
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+The `<auro-input>` element should be used in situations where users may:
+
+* needs to enter information
+* be filling out a form
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Formkit development
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
+<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
+
+### Filtering
+
+Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
+
+To only develop a single component, use the `--filter` flag:
+
+```shell
+npx turbo dev --filter=@aurodesignsystem/auro-input
+```
+<!-- AURO-GENERATED-CONTENT:END -->

package/components/input/dist/index.js

@@ -103,7 +103,8 @@ const stringsES = {
   'dateYYMM': 'Ingrese una fecha completa en el formato AA/MM',
   'dateYY': 'Ingrese una fecha completa en el formato AA',
   'dateMM': 'Ingrese una fecha completa en el formato MM',
-  'dateDD': 'Ingrese una fecha completa en el formato DD'
+  'dateDD': 'Ingrese una fecha completa en el formato DD',
+  'clearInput': 'Borrar campo de entrada',
 };
 
 const stringsEN = {
@@ -126,7 +127,8 @@ const stringsEN = {
   'dateYYMM': 'Please enter a complete date in the format YY/MM',
   'dateYY': 'Please enter a complete date in the format YY',
   'dateMM': 'Please enter a complete date in the format MM',
-  'dateDD': 'Please enter a complete date in the format DD'
+  'dateDD': 'Please enter a complete date in the format DD',
+  'clearInput': 'Clear input field',
 };
 
 /**
@@ -6552,8 +6554,7 @@ class AuroInput extends BaseInput {
                 <${this.buttonTag}
                   variant="flat"
                   class="notificationBtn clearBtn"
-                  aria-hidden="true"
-                  tabindex="-1"
+                  aria-label="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor

package/components/input/dist/registered.js

@@ -103,7 +103,8 @@ const stringsES = {
   'dateYYMM': 'Ingrese una fecha completa en el formato AA/MM',
   'dateYY': 'Ingrese una fecha completa en el formato AA',
   'dateMM': 'Ingrese una fecha completa en el formato MM',
-  'dateDD': 'Ingrese una fecha completa en el formato DD'
+  'dateDD': 'Ingrese una fecha completa en el formato DD',
+  'clearInput': 'Borrar campo de entrada',
 };
 
 const stringsEN = {
@@ -126,7 +127,8 @@ const stringsEN = {
   'dateYYMM': 'Please enter a complete date in the format YY/MM',
   'dateYY': 'Please enter a complete date in the format YY',
   'dateMM': 'Please enter a complete date in the format MM',
-  'dateDD': 'Please enter a complete date in the format DD'
+  'dateDD': 'Please enter a complete date in the format DD',
+  'clearInput': 'Clear input field',
 };
 
 /**
@@ -6552,8 +6554,7 @@ class AuroInput extends BaseInput {
                 <${this.buttonTag}
                   variant="flat"
                   class="notificationBtn clearBtn"
-                  aria-hidden="true"
-                  tabindex="-1"
+                  aria-label="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor