From 2c6e29c7ad46a4db4c80d24a9fd0ec2708f2ce00 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Tue, 21 May 2024 17:02:22 -0500
Subject: [PATCH] Feedback

---
 packages/nimble-components/CONTRIBUTING.md    | 19 +++++++++++++------
 .../src/toggle-button/template.ts             |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/nimble-components/CONTRIBUTING.md b/packages/nimble-components/CONTRIBUTING.md
index d0d8de9cde..7d3fe21b1d 100644
--- a/packages/nimble-components/CONTRIBUTING.md
+++ b/packages/nimble-components/CONTRIBUTING.md
@@ -387,14 +387,21 @@ export class MyComponent {
 
 Then in the template, bind the focusable elements' `tabindex` to the host component's property:
 
+<!-- prettier-ignore -->
 ```html
-html<MyComponent
-    >`
-    <nimble-button ... tabindex="${x => x.tabIndex}"></nimble-button>
+html<MyComponent>`
+    <nimble-button 
+        ...
+        tabindex="${x => x.tabIndex}">
+    </nimble-button>
     // or for an element that isn't focusable by default:
-    <div ... tabindex="${x => (x.disabled ? null : x.tabIndex ?? 0)}"></div>
-    `;</MyComponent
->
+    <div
+        ...
+        tabindex="${x => {
+            const tabindex = x.tabIndex ?? 0;
+            return x.disabled ? undefined : `${tabindex}`;
+        }">
+    </div>`;
 ```
 
 ### Leverage mixins for shared APIs across components
diff --git a/packages/nimble-components/src/toggle-button/template.ts b/packages/nimble-components/src/toggle-button/template.ts
index 98e01aca57..9d002aeec4 100644
--- a/packages/nimble-components/src/toggle-button/template.ts
+++ b/packages/nimble-components/src/toggle-button/template.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-restricted-syntax */
 import { html, ref, ViewTemplate } from '@microsoft/fast-element';
 import {
     endSlotTemplate,
@@ -65,3 +64,4 @@ ButtonOptions
         ${endSlotTemplate(context, definition)}
     </div>
 `;
+/* eslint-enable @typescript-eslint/indent */