Repository: AlaskaAirlines/auro-button
Pull request #320: feat: add `ariahidden` and `tIndex` attrs #319
Author: login: sun-mota
Labels: name: released
description: Completed work has been released
Created: 2025-05-14T19:28:47Z | Merged: 2025-05-16T16:58:44Z

# Alaska Airlines Pull Request

add props for `aria-hidden` and `tabIndex`


## Checklist:

- [x] My update follows the CONTRIBUTING guidelines of this project
- [x] I have performed a self-review of my own update

**By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.**

_Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission._

**Thank you for your submission!**<br>
-- Auro Design System Team

## Summary by Sourcery

Add ariahidden and tIndex attributes to the AuroButton component, bind them in the template for improved accessibility, and update documentation to reflect the new properties and ARIA usage guidelines.

New Features:
- Add tIndex property to control the tabindex attribute on the button
- Add ariahidden property to control the aria-hidden attribute on the button

Documentation:
- Update API documentation to include ariahidden and tIndex properties and add ARIA tags usage guidelines


Diff:
diff --git a/demo/api.md b/demo/api.md
index c9cd5166..57015742 100644
--- a/demo/api.md
+++ b/demo/api.md
@@ -3,41 +3,31 @@
 
 # auro-button
 
-## Attributes
-
-| Attribute | Type     | Description                      |
-|-----------|----------|----------------------------------|
-| [id](#id)      | `String` | Set the unique ID of an element. |
-
 ## Properties
 
 | Property         | Attribute        | Type      | Default | Description                                      |
 |------------------|------------------|-----------|---------|--------------------------------------------------|
-| [ariaexpanded](#ariaexpanded)   | `ariaexpanded`   | `Boolean` |         | Populates the `aria-expanded` attribute that indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. This is an optional attribute for buttons. |
-| [arialabel](#arialabel)      | `arialabel`      | `String`  |         | Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead. |
-| [arialabelledby](#arialabelledby) | `arialabelledby` | `String`  |         | Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. |
-| [autofocus](#autofocus)      | `autofocus`      | `Boolean` | false   | This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user |
-| [disabled](#disabled)       | `disabled`       | `Boolean` | false   | If set to true, button will become disabled and not allow for interactions |
-| [fluid](#fluid)          | `fluid`          | `Boolean` | false   | Alters the shape of the button to be full width of its parent container |
-| [iconOnly](#iconOnly)       | `iconOnly`       | `Boolean` | false   | If set to true, the button will contain an icon with no additional content |
-| [loading](#loading)        | `loading`        | `Boolean` | false   | If set to true button text will be replaced with `auro-loader` and become disabled |
-| [loadingText](#loadingText)    | `loadingText`    | `String`  |         | Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used. |
-| [onDark](#onDark)         | `onDark`         | `Boolean` | false   | Set value for on-dark version of auro-button     |
-| [ready](#ready)          | `ready`          | `Boolean` | false   | When false the component API should not be called. |
-| [rounded](#rounded)        | `rounded`        | `Boolean` | false   | If set to true, the button will have a rounded shape |
-| [secondary](#secondary)      | `secondary`      | `Boolean` | false   | DEPRECATED                                       |
-| [slim](#slim)           | `slim`           | `Boolean` | false   | Set value for slim version of auro-button        |
-| [tertiary](#tertiary)       | `tertiary`       | `Boolean` | false   | DEPRECATED                                       |
-| [title](#title)          | `title`          | `String`  |         | Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. |
-| [type](#type)           | `type`           | `String`  |         | The type of the button. Possible values are: `submit`, `reset`, `button` |
-| [value](#value)          | `value`          | `String`  |         | Defines the value associated with the button which is submitted with the form data. |
-| [variant](#variant)        | `variant`        | `String`  |         | Sets button variant option. Possible values are: `secondary`, `tertiary` |
-
-## Events
-
-| Event              | Type               | Description                                      |
-|--------------------|--------------------|--------------------------------------------------|
-| `auroButton-ready` | `CustomEvent<any>` | Notifies that the component has finished initializing. |
+| [ariaexpanded](#ariaexpanded)   | `ariaexpanded`   | `boolean` |         | Populates the `aria-expanded` attribute that indicates whether the element,<br />or another grouping element it controls, is currently expanded or collapsed.<br />This is an optional attribute for buttons. |
+| [ariahidden](#ariahidden)     | `ariahidden`     | `string`  |         | Populates the `aria-hidden` attribute to hide the button from a11y API. |
+| [arialabel](#arialabel)      | `arialabel`      | `string`  |         | Populates the `aria-label` attribute that is used to define a string that labels the current element.<br />Use it in cases where a text label is not visible on the screen.<br />If there is visible text labeling the element, use `aria-labelledby` instead. |
+| [arialabelledby](#arialabelledby) | `arialabelledby` | `string`  |         | Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s),<br />and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.<br />List multiple element IDs in a space delimited fashion. |
+| [autofocus](#autofocus)      | `autofocus`      | `boolean` | false   | This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user. |
+| [disabled](#disabled)       | `disabled`       | `boolean` | false   | If set to true, button will become disabled and not allow for interactions. |
+| [fluid](#fluid)          | `fluid`          | `boolean` | false   | Alters the shape of the button to be full width of its parent container. |
+| [iconOnly](#iconOnly)       | `iconOnly`       | `boolean` | false   | If set to true, the button will contain an icon with no additional content. |
+| [loading](#loading)        | `loading`        | `boolean` | false   | If set to true button text will be replaced with `auro-loader` and become disabled. |
+| [loadingText](#loadingText)    | `loadingText`    | `string`  |         | Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used. |
+| [onDark](#onDark)         | `onDark`         | `boolean` | false   | Set value for on-dark version of auro-button.    |
+| [ready](#ready)          | `ready`          | `boolean` |         |                                                  |
+| [rounded](#rounded)        | `rounded`        | `boolean` | false   | If set to true, the button will have a rounded shape. |
+| [secondary](#secondary)      | `secondary`      | `boolean` | false   | DEPRECATED.                                      |
+| [slim](#slim)           | `slim`           | `boolean` | false   | Set value for slim version of auro-button.       |
+| [tIndex](#tIndex)         | `tIndex`         | `string`  |         | Populates `tabIndex` to define the focusable sequence in keyboard navigation. |
+| [tertiary](#tertiary)       | `tertiary`       | `boolean` | false   | DEPRECATED.                                      |
+| [title](#title)          | `title`          | `string`  |         | Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. |
+| [type](#type)           | `type`           | `string`  |         | The type of the button. Possible values are: `submit`, `reset`, `button`. |
+| [value](#value)          | `value`          | `string`  |         | Defines the value associated with the button which is submitted with the form data. |
+| [variant](#variant)        | `variant`        | `string`  |         | Sets button variant option. Possible values are: `secondary`, `tertiary`. |
 
 ## Slots
 
@@ -578,6 +568,11 @@ To provide a custom loading message for assistive technologies, use the `loading
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+## ARIA attributes
+Instead of using `aria-*` attributes, use `aria*` (without the hyphen) to properly bind ARIA attributes.
+
+For `tabindex`, use `tIndex` instead to avoid duplicated focus interaction.
+
 ## Theme Support
 
 The component may be restyled using the following code sample and changing the values of the following token(s).
diff --git a/docs/api.md b/docs/api.md
index 7ac2a9f7..b8678af8 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -1,40 +1,30 @@
 # auro-button
 
-## Attributes
-
-| Attribute | Type     | Description                      |
-|-----------|----------|----------------------------------|
-| `id`      | `String` | Set the unique ID of an element. |
-
 ## Properties
 
 | Property         | Attribute        | Type      | Default | Description                                      |
 |------------------|------------------|-----------|---------|--------------------------------------------------|
-| `ariaexpanded`   | `ariaexpanded`   | `Boolean` |         | Populates the `aria-expanded` attribute that indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. This is an optional attribute for buttons. |
-| `arialabel`      | `arialabel`      | `String`  |         | Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead. |
-| `arialabelledby` | `arialabelledby` | `String`  |         | Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. |
-| `autofocus`      | `autofocus`      | `Boolean` | false   | This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user |
-| `disabled`       | `disabled`       | `Boolean` | false   | If set to true, button will become disabled and not allow for interactions |
-| `fluid`          | `fluid`          | `Boolean` | false   | Alters the shape of the button to be full width of its parent container |
-| `iconOnly`       | `iconOnly`       | `Boolean` | false   | If set to true, the button will contain an icon with no additional content |
-| `loading`        | `loading`        | `Boolean` | false   | If set to true button text will be replaced with `auro-loader` and become disabled |
-| `loadingText`    | `loadingText`    | `String`  |         | Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used. |
-| `onDark`         | `onDark`         | `Boolean` | false   | Set value for on-dark version of auro-button     |
-| `ready`          | `ready`          | `Boolean` | false   | When false the component API should not be called. |
-| `rounded`        | `rounded`        | `Boolean` | false   | If set to true, the button will have a rounded shape |
-| `secondary`      | `secondary`      | `Boolean` | false   | DEPRECATED                                       |
-| `slim`           | `slim`           | `Boolean` | false   | Set value for slim version of auro-button        |
-| `tertiary`       | `tertiary`       | `Boolean` | false   | DEPRECATED                                       |
-| `title`          | `title`          | `String`  |         | Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. |
-| `type`           | `type`           | `String`  |         | The type of the button. Possible values are: `submit`, `reset`, `button` |
-| `value`          | `value`          | `String`  |         | Defines the value associated with the button which is submitted with the form data. |
-| `variant`        | `variant`        | `String`  |         | Sets button variant option. Possible values are: `secondary`, `tertiary` |
-
-## Events
-
-| Event              | Type               | Description                                      |
-|--------------------|--------------------|--------------------------------------------------|
-| `auroButton-ready` | `CustomEvent<any>` | Notifies that the component has finished initializing. |
+| `ariaexpanded`   | `ariaexpanded`   | `boolean` |         | Populates the `aria-expanded` attribute that indicates whether the element,<br />or another grouping element it controls, is currently expanded or collapsed.<br />This is an optional attribute for buttons. |
+| `ariahidden`     | `ariahidden`     | `string`  |         | Populates the `aria-hidden` attribute to hide the button from a11y API. |
+| `arialabel`      | `arialabel`      | `string`  |         | Populates the `aria-label` attribute that is used to define a string that labels the current element.<br />Use it in cases where a text label is not visible on the screen.<br />If there is visible text labeling the element, use `aria-labelledby` instead. |
+| `arialabelledby` | `arialabelledby` | `string`  |         | Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s),<br />and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.<br />List multiple element IDs in a space delimited fashion. |
+| `autofocus`      | `autofocus`      | `boolean` | false   | This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user. |
+| `disabled`       | `disabled`       | `boolean` | false   | If set to true, button will become disabled and not allow for interactions. |
+| `fluid`          | `fluid`          | `boolean` | false   | Alters the shape of the button to be full width of its parent container. |
+| `iconOnly`       | `iconOnly`       | `boolean` | false   | If set to true, the button will contain an icon with no additional content. |
+| `loading`        | `loading`        | `boolean` | false   | If set to true button text will be replaced with `auro-loader` and become disabled. |
+| `loadingText`    | `loadingText`    | `string`  |         | Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used. |
+| `onDark`         | `onDark`         | `boolean` | false   | Set value for on-dark version of auro-button.    |
+| `ready`          | `ready`          | `boolean` |         |                                                  |
+| `rounded`        | `rounded`        | `boolean` | false   | If set to true, the button will have a rounded shape. |
+| `secondary`      | `secondary`      | `boolean` | false   | DEPRECATED.                                      |
+| `slim`           | `slim`           | `boolean` | false   | Set value for slim version of auro-button.       |
+| `tIndex`         | `tIndex`         | `string`  |         | Populates `tabIndex` to define the focusable sequence in keyboard navigation. |
+| `tertiary`       | `tertiary`       | `boolean` | false   | DEPRECATED.                                      |
+| `title`          | `title`          | `string`  |         | Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. |
+| `type`           | `type`           | `string`  |         | The type of the button. Possible values are: `submit`, `reset`, `button`. |
+| `value`          | `value`          | `string`  |         | Defines the value associated with the button which is submitted with the form data. |
+| `variant`        | `variant`        | `string`  |         | Sets button variant option. Possible values are: `secondary`, `tertiary`. |
 
 ## Slots
 
diff --git a/docs/partials/api.md b/docs/partials/api.md
index 79271c7f..6e931fe1 100644
--- a/docs/partials/api.md
+++ b/docs/partials/api.md
@@ -299,6 +299,14 @@ To provide a custom loading message for assistive technologies, use the `loading
 
 </auro-accordion>
 
+
+## ARIA attributes
+Instead of using `aria-*` attributes, use `aria*` (without the hyphen) to properly bind ARIA attributes.
+
+For `tabindex`, use `tIndex` instead to avoid duplicated focus interaction.
+
+
+
 ## Theme Support
 
 The component may be restyled using the following code sample and changing the values of the following token(s).
diff --git a/src/auro-button.js b/src/auro-button.js
index 98b82baf..479210d2 100644
--- a/src/auro-button.js
+++ b/src/auro-button.js
@@ -21,27 +21,6 @@ import { AuroLoader } from '@aurodesignsystem/auro-loader/src/auro-loader.js';
 import loaderVersion from './loaderVersion.js';
 
 /**
- * @attr {Boolean} autofocus - This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user
- * @attr {Boolean} disabled - If set to true, button will become disabled and not allow for interactions
- * @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content
- * @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled
- * @attr {String} loadingText - Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
- * @attr {Boolean} onDark - Set value for on-dark version of auro-button
- * @attr {Boolean} rounded - If set to true, the button will have a rounded shape
- * @attr {Boolean} slim - Set value for slim version of auro-button
- * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container
- * @attr {String} arialabel - Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead.
- * @attr {String} arialabelledby - Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion.
- * @attr {Boolean} ariaexpanded - Populates the `aria-expanded` attribute that indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. This is an optional attribute for buttons.
- * @attr {String} id - Set the unique ID of an element.
- * @attr {String} title - Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
- * @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button`
- * @attr {String} value - Defines the value associated with the button which is submitted with the form data.
- * @attr {String} variant - Sets button variant option. Possible values are: `secondary`, `tertiary`
- * @attr {Boolean} secondary - DEPRECATED
- * @attr {Boolean} tertiary - DEPRECATED
- * @prop {Boolean} ready - When false the component API should not be called.
- * @event auroButton-ready - Notifies that the component has finished initializing.
  * @slot - Default slot for the text of the button.
  * @slot icon - Slot to provide auro-icon for the button.
  * @csspart button - Apply CSS to HTML5 button.
@@ -65,13 +44,11 @@ export class AuroButton extends LitElement {
 
   constructor() {
     super();
-
     this.autofocus = false;
     this.disabled = false;
     this.iconOnly = false;
     this.loading = false;
     this.onDark = false;
-    this.ready = false;
     this.secondary = false;
     this.tertiary = false;
     this.rounded = false;
@@ -110,73 +87,169 @@ export class AuroButton extends LitElement {
 
   static get properties() {
     return {
+
+      /**
+       * This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
+       */
       autofocus:        {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, button will become disabled and not allow for interactions.
+       */
       disabled:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       secondary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       tertiary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Alters the shape of the button to be full width of its parent container.
+       */
       fluid:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will contain an icon with no additional content.
+       */
       iconOnly: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true button text will be replaced with `auro-loader` and become disabled.
+       */
       loading:          {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
+       */
       loadingText:      {
         type: String
       },
+
+      /**
+       * Set value for on-dark version of auro-button.
+       */
       onDark:           {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will have a rounded shape.
+       */
       rounded: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Set value for slim version of auro-button.
+       */
       slim: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       */
+      tIndex: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Populates the `aria-hidden` attribute to hide the button from a11y API.
+       */
+      ariahidden: {
+        type: String,
+        reflect: true,
+      },
+
+      /**
+       * Populates the `aria-label` attribute that is used to define a string that labels the current element.
+       * Use it in cases where a text label is not visible on the screen.
+       * If there is visible text labeling the element, use `aria-labelledby` instead.
+       */
       arialabel:        {
         type: String,
         reflect: true
       },
+
+      /**
+       * Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s),
+       * and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.
+       * List multiple element IDs in a space delimited fashion.
+       */
       arialabelledby:   {
         type: String,
         reflect: true
       },
+
+      /**
+       * Populates the `aria-expanded` attribute that indicates whether the element,
+       * or another grouping element it controls, is currently expanded or collapsed.
+       * This is an optional attribute for buttons.
+       */
       ariaexpanded: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
+       */
       title:            {
         type: String,
         reflect: true
       },
+
+      /**
+       * The type of the button. Possible values are: `submit`, `reset`, `button`.
+       */
       type:             {
         type: String,
         reflect: true
       },
+
+      /**
+       * Defines the value associated with the button which is submitted with the form data.
+       */
       value:            {
         type: String,
         reflect: true
       },
+
+      /**
+       * Sets button variant option. Possible values are: `secondary`, `tertiary`.
+       */
       variant:          {
         type: String,
         reflect: true
@@ -206,21 +279,6 @@ export class AuroButton extends LitElement {
     this.renderRoot.querySelector('button').focus();
   }
 
-  /**
-   *  Marks the component as ready and sends event.
-   * @private
-   * @returns {void}
-   */
-  notifyReady() {
-    this.ready = true;
-
-    this.dispatchEvent(new CustomEvent('auroButton-ready', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-  }
-
   updated() {
     // support the old `secondary` and `tertiary` attributes` that are deprecated
     if (this.secondary) {
@@ -232,10 +290,6 @@ export class AuroButton extends LitElement {
     }
   }
 
-  firstUpdated() {
-    this.notifyReady();
-  }
-
   /**
    * Submits the form that this button is associated with.
    * @private
@@ -271,9 +325,11 @@ export class AuroButton extends LitElement {
     return html`
       <button
         part="button"
+        aria-hidden="${ifDefined(this.ariahidden || undefined)}"
         aria-label="${ifDefined(this.loading ? this.loadingText : this.arialabel || undefined)}"
         aria-labelledby="${ifDefined(this.arialabelledby ? this.arialabelledby : undefined)}"
         aria-expanded="${ifDefined(this.ariaexpanded)}"
+        tabIndex="${ifDefined(this.tIndex)}"
         ?autofocus="${this.autofocus}"
         class="${classMap(classes)}"
         ?disabled="${this.disabled || this.loading}"
diff --git a/test/auro-button.test.js b/test/auro-button.test.js
index e691fdac..9a898e04 100644
--- a/test/auro-button.test.js
+++ b/test/auro-button.test.js
@@ -226,6 +226,23 @@ describe('auro-button', () => {
     await expect(el).to.be.accessible();
   });
 
+  it(`auro-button is accessible with various ARIA attrs`, async () => {
+    const el = await fixture(html`
+      <div>
+        <auro-button tIndex="-1" ariahidden="true">Click Me!</auro-button>
+        <auro-button arialabel="This is a button">Click Me!</auro-button>
+        <auro-button ariaexpanded="true">Click Me!</auro-button>
+      </div>
+    `);
+
+    await expect(el.children[0].shadowRoot.querySelector('button')).to.have.attribute('tabindex', '-1');
+    await expect(el.children[0].shadowRoot.querySelector('button')).to.have.attribute('aria-hidden', 'true');
+    await expect(el.children[1].shadowRoot.querySelector('button')).to.have.attribute('aria-label', 'This is a button');
+    await expect(el.children[2].shadowRoot.querySelector('button')).to.have.attribute('aria-expanded', 'true');
+
+    await expect(el).to.be.accessible();
+  });
+
   it('auro-button custom element is defined', async () => {
     const el = await Boolean(customElements.get("auro-button"));
 


Reviews:
user: login: sourcery-ai[bot]
body: Hey @sun-mota - I've reviewed your changes - here's some feedback:

- Consider using a Boolean type for the `ariahidden` property (rather than String) since `aria-hidden` is defined as a boolean attribute in the ARIA spec and updating its binding accordingly will improve ARIA compliance.
- It may be clearer to expose `tabindex` as a Number‐typed `tabIndex` property (instead of String‐typed `tIndex`) to align with the standard DOM API and simplify usage.
- Consider renaming `tIndex` to `tabIndex` (or using CamelCase for other ARIA props like `ariaHidden`) for a more consistent property naming convention across the component.

<details>
<summary>Here's what I looked at during the review</summary>

- 🟡 **General issues**: 6 issues found
- 🟢 **Testing**: all looks good
- 🟢 **Documentation**: all looks good
</details>

***

<details>
<summary>Sourcery is free for open source - if you like our reviews please consider sharing them ✨</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20got%20an%20instant%20code%20review%20from%20%40SourceryAI%2C%20and%20it%20was%20brilliant%21%20It%27s%20free%20for%20open%20source%20and%20has%20a%20free%20trial%20for%20private%20code.%20Check%20it%20out%20https%3A//sourcery.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20got%20an%20instant%20code%20review%20from%20%40SourceryAI%2C%20and%20it%20was%20brilliant%21%20It%27s%20free%20for%20open%20source%20and%20has%20a%20free%20trial%20for%20private%20code.%20Check%20it%20out%20https%3A//sourcery.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https://sourcery.ai)
- [Facebook](https://www.facebook.com/sharer/sharer.php?u=https://sourcery.ai)

</details>

<sub>
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
</sub>
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T19:33:05Z
user: login: sun-mota
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-14T19:35:10Z
user: login: sourcery-ai[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T19:36:51Z
user: login: sun-mota
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-14T19:41:23Z
user: login: sourcery-ai[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T19:41:50Z
user: login: jyang81
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T22:14:24Z
user: login: jyang81
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T22:27:40Z
user: login: jyang81
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T22:28:52Z
user: login: sun-mota
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-14T22:30:15Z
user: login: jyang81
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T23:40:30Z

Review comments:
diff_hunk: @@ -110,73 +90,177 @@ export class AuroButton extends LitElement {
 
   static get properties() {
     return {
+
+      /**
+       * This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
+       */
       autofocus:        {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, button will become disabled and not allow for interactions.
+       */
       disabled:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       secondary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       tertiary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Alters the shape of the button to be full width of its parent container.
+       */
       fluid:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will contain an icon with no additional content.
+       */
       iconOnly: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true button text will be replaced with `auro-loader` and become disabled.
+       */
       loading:          {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
+       */
       loadingText:      {
         type: String
       },
+
+      /**
+       * Set value for on-dark version of auro-button.
+       */
       onDark:           {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will have a rounded shape.
+       */
       rounded: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Set value for slim version of auro-button.
+       */
       slim: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       */
+      tIndex: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Set the unique ID of an element.
+       */
+      id: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Populated the `aria-hidden` attribute to hide the button from a11y API.
+       */
+      ariahidden: {
+        type: String,
+        reflect: true,
+      },
path: src/auro-button.js
user: login: sourcery-ai[bot]
body: **suggestion:** Use camelCase 'ariaHidden' property and Boolean type for aria-hidden

Rename to `ariaHidden` and change its type to Boolean to match JS conventions and ARIA specs.

```suggestion
      /**
       * Populated the `aria-hidden` attribute to hide the button from a11y API.
       */
      ariaHidden: {
        type: Boolean,
        reflect: true,
      },
```
created_at: 2025-05-14T19:33:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -110,73 +90,177 @@
 
   static get properties() {
     return {
+
+      /**
+       * This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
+       */
       autofocus:        {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, button will become disabled and not allow for interactions.
+       */
       disabled:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       secondary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       tertiary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Alters the shape of the button to be full width of its parent container.
+       */
       fluid:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will contain an icon with no additional content.
+       */
       iconOnly: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true button text will be replaced with `auro-loader` and become disabled.
+       */
       loading:          {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
+       */
       loadingText:      {
         type: String
       },
+
+      /**
+       * Set value for on-dark version of auro-button.
+       */
       onDark:           {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will have a rounded shape.
+       */
       rounded: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Set value for slim version of auro-button.
+       */
       slim: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       */
+      tIndex: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Set the unique ID of an element.
+       */
+      id: {
path: src/auro-button.js
user: login: sourcery-ai[bot]
body: **suggestion (bug_risk):** Avoid overriding the native 'id' property on the host element

Remove or rename this custom `id` to avoid conflicts with the native HTMLElement `id` property.
created_at: 2025-05-14T19:33:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -3,35 +3,32 @@
 
 # auro-button
 
-## Attributes
-
-| Attribute | Type     | Description                      |
-|-----------|----------|----------------------------------|
-| [id](#id)      | `String` | Set the unique ID of an element. |
-
 ## Properties
 
 | Property         | Attribute        | Type      | Default | Description                                      |
 |------------------|------------------|-----------|---------|--------------------------------------------------|
-| [ariaexpanded](#ariaexpanded)   | `ariaexpanded`   | `Boolean` |         | Populates the `aria-expanded` attribute that indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. This is an optional attribute for buttons. |
-| [arialabel](#arialabel)      | `arialabel`      | `String`  |         | Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead. |
-| [arialabelledby](#arialabelledby) | `arialabelledby` | `String`  |         | Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. |
-| [autofocus](#autofocus)      | `autofocus`      | `Boolean` | false   | This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user |
-| [disabled](#disabled)       | `disabled`       | `Boolean` | false   | If set to true, button will become disabled and not allow for interactions |
-| [fluid](#fluid)          | `fluid`          | `Boolean` | false   | Alters the shape of the button to be full width of its parent container |
-| [iconOnly](#iconOnly)       | `iconOnly`       | `Boolean` | false   | If set to true, the button will contain an icon with no additional content |
-| [loading](#loading)        | `loading`        | `Boolean` | false   | If set to true button text will be replaced with `auro-loader` and become disabled |
-| [loadingText](#loadingText)    | `loadingText`    | `String`  |         | Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used. |
-| [onDark](#onDark)         | `onDark`         | `Boolean` | false   | Set value for on-dark version of auro-button     |
+| [ariaexpanded](#ariaexpanded)   | `ariaexpanded`   | `boolean` |         | Populates the `aria-expanded` attribute that indicates whether the element,<br />or another grouping element it controls, is currently expanded or collapsed.<br />This is an optional attribute for buttons. |
+| [ariahidden](#ariahidden)     | `ariahidden`     | `string`  |         | Populated the `aria-hidden` attribute to hide the button from a11y API. |
path: demo/api.md
user: login: sourcery-ai[bot]
body: **issue (typo):** Typo in description and missing period for `ariahidden`.

Replace “Populated” with “Populates” and add a period at the end to match other descriptions.

```suggestion
| [ariahidden](#ariahidden)     | `ariahidden`     | `string`  |         | Populates the `aria-hidden` attribute to hide the button from a11y API. |
```
created_at: 2025-05-14T19:33:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -271,9 +355,11 @@
     return html`
       <button
         part="button"
+        aria-hidden="${ifDefined(this.ariahidden ? this.ariahidden : undefined)}"
path: src/auro-button.js
user: login: sourcery-ai[bot]
body: **suggestion (code-quality):** Avoid unneeded ternary statements ([`simplify-ternary`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/simplify-ternary))

```suggestion
        aria-hidden="${ifDefined(this.ariahidden || undefined)}"
```

<br/><details><summary>Explanation</summary>It is possible to simplify certain ternary statements into either use of an `||` or `!`.
This makes the code easier to read, since there is no conditional logic.
</details>
created_at: 2025-05-14T19:33:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -110,73 +90,177 @@ export class AuroButton extends LitElement {
 
   static get properties() {
     return {
+
+      /**
+       * This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
+       */
       autofocus:        {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, button will become disabled and not allow for interactions.
+       */
       disabled:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       secondary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       tertiary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Alters the shape of the button to be full width of its parent container.
+       */
       fluid:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will contain an icon with no additional content.
+       */
       iconOnly: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true button text will be replaced with `auro-loader` and become disabled.
+       */
       loading:          {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
+       */
       loadingText:      {
         type: String
       },
+
+      /**
+       * Set value for on-dark version of auro-button.
+       */
       onDark:           {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will have a rounded shape.
+       */
       rounded: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Set value for slim version of auro-button.
+       */
       slim: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       */
+      tIndex: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Set the unique ID of an element.
+       */
+      id: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Populated the `aria-hidden` attribute to hide the button from a11y API.
+       */
+      ariahidden: {
+        type: String,
+        reflect: true,
+      },
path: src/auro-button.js
user: login: sun-mota
body: it's all lower cases to match other aria* props.
created_at: 2025-05-14T19:35:09Z
author_association: MEMBER
diff_hunk: @@ -110,73 +90,177 @@ export class AuroButton extends LitElement {
 
   static get properties() {
     return {
+
+      /**
+       * This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
+       */
       autofocus:        {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, button will become disabled and not allow for interactions.
+       */
       disabled:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       secondary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       tertiary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Alters the shape of the button to be full width of its parent container.
+       */
       fluid:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will contain an icon with no additional content.
+       */
       iconOnly: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true button text will be replaced with `auro-loader` and become disabled.
+       */
       loading:          {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
+       */
       loadingText:      {
         type: String
       },
+
+      /**
+       * Set value for on-dark version of auro-button.
+       */
       onDark:           {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will have a rounded shape.
+       */
       rounded: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Set value for slim version of auro-button.
+       */
       slim: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       */
+      tIndex: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Set the unique ID of an element.
+       */
+      id: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Populated the `aria-hidden` attribute to hide the button from a11y API.
+       */
+      ariahidden: {
+        type: String,
+        reflect: true,
+      },
path: src/auro-button.js
user: login: sourcery-ai[bot]
body: I get where you’re coming from, but I’d still recommend we follow LitElement/ARIA conventions:

1. **Property naming**  
   • In JS we use camelCase for props, LitElement will reflect them to dash-case attributes automatically.  
   • So `ariaHidden` → `aria-hidden` at the DOM level.  
2. **Type**  
   • ARIA attributes are boolean (true/false), not strings.  
   • Using `type: Boolean` means `<auro-button aria-hidden>` or it’s omitted.  

Putting it together, something like:

```js
/**
 * Hides the button from assistive technologies.
 */
ariaHidden: {
  type: Boolean,
  reflect: true,
},
```

Under the hood LitElement will map your JS `this.ariaHidden = true` to `<auro-button aria-hidden>`.  

—  

Also a quick note on `tIndex`:  
• Rename that to `tabIndex` (so it maps to `tabindex`)  
• Use `type: Number` so you can pass a real integer  

```js
/**
 * Controls the element’s place in keyboard navigation.
 */
tabIndex: {
  type: Number,
  reflect: true,
},
```

Let me know what you think!
created_at: 2025-05-14T19:36:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -110,73 +90,177 @@ export class AuroButton extends LitElement {
 
   static get properties() {
     return {
+
+      /**
+       * This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
+       */
       autofocus:        {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, button will become disabled and not allow for interactions.
+       */
       disabled:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       secondary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       tertiary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Alters the shape of the button to be full width of its parent container.
+       */
       fluid:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will contain an icon with no additional content.
+       */
       iconOnly: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true button text will be replaced with `auro-loader` and become disabled.
+       */
       loading:          {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
+       */
       loadingText:      {
         type: String
       },
+
+      /**
+       * Set value for on-dark version of auro-button.
+       */
       onDark:           {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will have a rounded shape.
+       */
       rounded: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Set value for slim version of auro-button.
+       */
       slim: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       */
+      tIndex: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Set the unique ID of an element.
+       */
+      id: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Populated the `aria-hidden` attribute to hide the button from a11y API.
+       */
+      ariahidden: {
+        type: String,
+        reflect: true,
+      },
path: src/auro-button.js
user: login: sun-mota
body: naming tIndex to tabindex cause nested interactive elements structure, if tabindex is set to 0, as the button under shadowRoot will also have tabindex="0".

Won't address both recommendation.
created_at: 2025-05-14T19:41:23Z
author_association: MEMBER
diff_hunk: @@ -110,73 +90,177 @@ export class AuroButton extends LitElement {
 
   static get properties() {
     return {
+
+      /**
+       * This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
+       */
       autofocus:        {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, button will become disabled and not allow for interactions.
+       */
       disabled:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       secondary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       tertiary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Alters the shape of the button to be full width of its parent container.
+       */
       fluid:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will contain an icon with no additional content.
+       */
       iconOnly: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true button text will be replaced with `auro-loader` and become disabled.
+       */
       loading:          {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
+       */
       loadingText:      {
         type: String
       },
+
+      /**
+       * Set value for on-dark version of auro-button.
+       */
       onDark:           {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the button will have a rounded shape.
+       */
       rounded: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Set value for slim version of auro-button.
+       */
       slim: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       */
+      tIndex: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Set the unique ID of an element.
+       */
+      id: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Populated the `aria-hidden` attribute to hide the button from a11y API.
+       */
+      ariahidden: {
+        type: String,
+        reflect: true,
+      },
path: src/auro-button.js
user: login: sourcery-ai[bot]
body: Good point about the nested focusable elements—if we reflect a real `tabindex` on the host *and* let the inner `<button>` default to `0`, you end up with two focus stops. What I’d propose instead is:

1. Rename the prop to `tabIndex` (camelCase in JS → `tabindex` in DOM)  
2. Use `type: Number` so authors can pass real integers  
3. **Don’t reflect** it back on the host—instead, bind it directly to the inner `<button>` in your template  

Example:

```js
// in the static props
/**
 * Controls the element’s place in keyboard navigation.
 */
tabIndex: {
  type: Number
},
```

```js
// in render()
return html`
  <button
    tabindex=${ifDefined(this.tabIndex)}
    ... >
    ${this.label}
  </button>
`;
```

That way:

– The host `<auro-button>` remains non-focusable  
– You only get one focus stop: the real `<button>`  
– You still expose a clean, idiomatic `tabIndex` API

Let me know if that approach works for you!
created_at: 2025-05-14T19:41:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -578,6 +568,11 @@ To provide a custom loading message for assistive technologies, use the `loading
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+## ARIA tags
path: demo/api.md
user: login: jyang81
body: should we say ARIA attributes instead of ARIA tags?
created_at: 2025-05-14T22:14:24Z
author_association: CONTRIBUTOR
diff_hunk: @@ -206,21 +279,6 @@ export class AuroButton extends LitElement {
     this.renderRoot.querySelector('button').focus();
   }
 
-  /**
path: src/auro-button.js
user: login: jyang81
body: Do we not need this anymore?
created_at: 2025-05-14T22:27:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -271,9 +355,11 @@
     return html`
       <button
         part="button"
+        aria-hidden="${ifDefined(this.ariahidden ? this.ariahidden : undefined)}"
path: src/auro-button.js
user: login: jyang81
body: i think this suggestion makes sense
created_at: 2025-05-14T22:28:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -206,21 +279,6 @@ export class AuroButton extends LitElement {
     this.renderRoot.querySelector('button').focus();
   }
 
-  /**
path: src/auro-button.js
user: login: sun-mota
body: no, this is an old legacy logic we do not need anymore as I heard from Jason. 
created_at: 2025-05-14T22:30:15Z
author_association: MEMBER

PR comments:
user: login: sourcery-ai[bot]
created_at: 2025-05-14T19:28:52Z
body: <!-- Generated by sourcery-ai[bot]: start review_guide -->

## Reviewer's Guide

This PR introduces two new accessibility props—`ariahidden` and `tIndex`—to the AuroButton component, reflects them as LitElement properties, binds them in the render template on the `<button>` element, and updates all related documentation to expose their usage and guidelines.

### File-Level Changes

| Change | Details | Files |
| ------ | ------- | ----- |
| Introduce ariahidden and tIndex properties in the component API | <ul><li>Define new `tIndex` property with type and reflection</li><li>Define new `ariahidden` property with type and reflection</li><li>Add JSDoc comments for each new ARIA prop</li></ul> | `src/auro-button.js` |
| Bind new ARIA props in the button render template | <ul><li>Add `aria-hidden` attribute binding using `ariahidden` prop</li><li>Add `tabIndex` attribute binding using `tIndex` prop</li></ul> | `src/auro-button.js` |
| Update documentation with new ARIA properties and usage notes | <ul><li>Add `ariahidden` and `tIndex` entries in API property tables</li><li>Insert ARIA tags guidance section explaining attribute naming</li><li>Normalize type casing (boolean/string) and punctuation in docs</li></ul> | `demo/api.md`<br/>`docs/api.md`<br/>`docs/partials/api.md` |

---

<details>
<summary>Tips and commands</summary>

#### Interacting with Sourcery

- **Trigger a new review:** Comment `@sourcery-ai review` on the pull request.
- **Continue discussions:** Reply directly to Sourcery's review comments.
- **Generate a GitHub issue from a review comment:** Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with `@sourcery-ai issue` to create an issue from it.
- **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull
  request title to generate a title at any time. You can also comment
  `@sourcery-ai title` on the pull request to (re-)generate the title at any time.
- **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment `@sourcery-ai summary` on the pull request to
  (re-)generate the summary at any time.
- **Generate reviewer's guide:** Comment `@sourcery-ai guide` on the pull
  request to (re-)generate the reviewer's guide at any time.
- **Resolve all Sourcery comments:** Comment `@sourcery-ai resolve` on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
- **Dismiss all Sourcery reviews:** Comment `@sourcery-ai dismiss` on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  `@sourcery-ai review` to trigger a new review!

#### Customizing Your Experience

Access your [dashboard](https://app.sourcery.ai) to:
- Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
- Change the review language.
- Add, remove or edit custom review instructions.
- Adjust other review settings.

#### Getting Help

- [Contact our support team](mailto:support@sourcery.ai) for questions or feedback.
- Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information.
- Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

</details>

<!-- Generated by sourcery-ai[bot]: end review_guide -->
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-14T19:29:44Z
body: Surge demo deployment failed! 😭
<!-- thollander/actions-comment-pull-request "demo_comment" -->
author_association: NONE
user: login: jyang81
created_at: 2025-05-14T22:40:34Z
body: Could you write some tests to ensure that aria-hidden and tabindex are getting set properly on the shadow button?
author_association: CONTRIBUTOR
user: login: blackfalcon
created_at: 2025-05-16T17:01:23Z
body: :tada: This PR is included in version 9.4.0 :tada:

The release is available on:
- [npm package (@latest dist-tag)](https://www.npmjs.com/package/@aurodesignsystem/auro-button/v/9.4.0)
- [GitHub release](https://github.com/AlaskaAirlines/auro-button/releases/tag/v9.4.0)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: MEMBER