Feedback

ni · May 21, 2024 · c94b78a · c94b78a
1 parent 3ff07ff
commit c94b78a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/packages/nimble-components/src/checkbox/index.ts b/packages/nimble-components/src/checkbox/index.ts
@@ -29,9 +29,9 @@ export class Checkbox extends FoundationCheckbox {
     /**
      * @internal
      */
-    public getEffectiveTabIndex(): number | null {
-        // prettier-ignore
-        return this.disabled ? null : (this.tabIndex ?? 0);
+    public get resolvedTabIndex(): string | undefined {
+        const tabIndex = this.tabIndex ?? 0;
+        return this.disabled ? undefined : tabIndex.toString();
     }
 }
 

diff --git a/packages/nimble-components/src/checkbox/template.ts b/packages/nimble-components/src/checkbox/template.ts
@@ -15,7 +15,7 @@ CheckboxOptions
         aria-required="${x => x.required}"
         aria-disabled="${x => x.disabled}"
         aria-readonly="${x => x.readOnly}"
-        tabindex="${x => x.getEffectiveTabIndex()}"
+        tabindex="${x => x.resolvedTabIndex}"
         @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
         @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
         class="${x => (x.readOnly ? 'readonly' : '')} ${x => (x.checked ? 'checked' : '')} ${x => (x.indeterminate ? 'indeterminate' : '')}"

diff --git a/packages/nimble-components/src/toggle-button/index.ts b/packages/nimble-components/src/toggle-button/index.ts
@@ -60,9 +60,9 @@ export class ToggleButton extends FoundationSwitch implements ButtonPattern {
     /**
      * @internal
      */
-    public getEffectiveTabIndex(): number | null {
-        // prettier-ignore
-        return this.disabled ? null : (this.tabIndex ?? 0);
+    public get resolvedTabIndex(): string | undefined {
+        const tabIndex = this.tabIndex ?? 0;
+        return this.disabled ? undefined : tabIndex.toString();
     }
 }
 applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);

diff --git a/packages/nimble-components/src/toggle-button/template.ts b/packages/nimble-components/src/toggle-button/template.ts
@@ -17,7 +17,7 @@ ButtonOptions
     <div
         role="button"
         part="control"
-        tabindex="${x => x.getEffectiveTabIndex()}"
+        tabindex="${x => x.resolvedTabIndex}"
         @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
         @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
         class="control ${x => (x.checked ? 'checked' : '')}"