widgets: Rename confusing variable name in tabbed_instructions.ts.

The `tabbed_instructions` widget used for both language toggles in our
API documentation and app toggles in our Help Center documentation
misleadingly calls the identifier for the tab `language` in local
variables and its interface.

- Renames local variables `language` -> `tab_key`.
- Renames HTML data attributes `data-language` -> `data-tab-key`.

Fixes #24669.

web/src/portico/help.js

@@ -14,13 +14,13 @@ function registerCodeSection($codeSection) {
     const $blocks = $codeSection.find(".blocks div");
 
     $li.on("click", function () {
-        const language = this.dataset.language;
+        const tab_key = this.dataset.tabKey;
 
         $li.removeClass("active");
-        $li.filter("[data-language=" + language + "]").addClass("active");
+        $li.filter("[data-tab-key=" + tab_key + "]").addClass("active");
 
         $blocks.removeClass("active");
-        $blocks.filter("[data-language=" + language + "]").addClass("active");
+        $blocks.filter("[data-tab-key=" + tab_key + "]").addClass("active");
     });
 
     $li.on("keydown", (e) => {

web/src/portico/tabbed-instructions.ts

@@ -31,25 +31,25 @@ export function activate_correct_tab($codeSection: JQuery): void {
     const $blocks = $codeSection.find(".blocks div");
 
     $li.each(function () {
-        const language = this.dataset.language;
+        const tab_key = this.dataset.tabKey;
         $(this).removeClass("active");
-        if (language === user_os) {
+        if (tab_key === user_os) {
             $(this).addClass("active");
         }
 
-        if (desktop_os.has(user_os) && language === "desktop-web") {
+        if (desktop_os.has(user_os) && tab_key === "desktop-web") {
             $(this).addClass("active");
         }
     });
 
     $blocks.each(function () {
-        const language = this.dataset.language;
+        const tab_key = this.dataset.tabKey;
         $(this).removeClass("active");
-        if (language === user_os) {
+        if (tab_key === user_os) {
             $(this).addClass("active");
         }
 
-        if (desktop_os.has(user_os) && language === "desktop-web") {
+        if (desktop_os.has(user_os) && tab_key === "desktop-web") {
             $(this).addClass("active");
         }
     });
@@ -58,9 +58,9 @@ export function activate_correct_tab($codeSection: JQuery): void {
     const $active_list_items = $li.filter(".active");
     if (!$active_list_items.length) {
         $li.first().addClass("active");
-        const language = $li.first()[0].dataset.language;
+        const tab_key = $li.first()[0].dataset.tabKey;
-        if (language) {
+        if (tab_key) {
-            $blocks.filter("[data-language=" + language + "]").addClass("active");
+            $blocks.filter("[data-tab-key=" + tab_key + "]").addClass("active");
         } else {
             blueslip.error("Tabbed instructions widget has no tabs to activate!");
         }

zerver/lib/markdown/tabbed_sections.py

@@ -27,11 +27,11 @@ NAV_BAR_TEMPLATE = """
 """.strip()
 
 NAV_LIST_ITEM_TEMPLATE = """
-<li data-language="{data_language}" tabindex="0">{label}</li>
+<li data-tab-key="{data_language}" tabindex="0">{label}</li>
 """.strip()
 
 DIV_TAB_CONTENT_TEMPLATE = """
-<div data-language="{data_language}" markdown="1">
+<div data-tab-key="{data_language}" markdown="1">
 {content}
 </div>
 """.strip()

zerver/tests/test_templates.py

@@ -38,14 +38,14 @@ header
 <p>
   <div class="code-section has-tabs" markdown="1">
     <ul class="nav">
-      <li data-language="ios" tabindex="0">iOS</li>
+      <li data-tab-key="ios" tabindex="0">iOS</li>
-      <li data-language="desktop-web" tabindex="0">Desktop/Web</li>
+      <li data-tab-key="desktop-web" tabindex="0">Desktop/Web</li>
     </ul>
     <div class="blocks">
-      <div data-language="ios" markdown="1"></p>
+      <div data-tab-key="ios" markdown="1"></p>
         <p>iOS instructions</p>
       <p></div>
-      <div data-language="desktop-web" markdown="1"></p>
+      <div data-tab-key="desktop-web" markdown="1"></p>
         <p>Desktop/browser instructions</p>
       <p></div>
     </div>
@@ -56,14 +56,14 @@ header
 <p>
   <div class="code-section has-tabs" markdown="1">
     <ul class="nav">
-      <li data-language="desktop-web" tabindex="0">Desktop/Web</li>
+      <li data-tab-key="desktop-web" tabindex="0">Desktop/Web</li>
-      <li data-language="android" tabindex="0">Android</li>
+      <li data-tab-key="android" tabindex="0">Android</li>
     </ul>
     <div class="blocks">
-      <div data-language="desktop-web" markdown="1"></p>
+      <div data-tab-key="desktop-web" markdown="1"></p>
         <p>Desktop/browser instructions</p>
       <p></div>
-      <div data-language="android" markdown="1"></p>
+      <div data-tab-key="android" markdown="1"></p>
         <p>Android instructions</p>
       <p></div>
     </div>
@@ -74,10 +74,10 @@ header
 <p>
   <div class="code-section no-tabs" markdown="1">
     <ul class="nav">
-      <li data-language="instructions-for-all-platforms" tabindex="0">Instructions for all platforms</li>
+      <li data-tab-key="instructions-for-all-platforms" tabindex="0">Instructions for all platforms</li>
     </ul>
     <div class="blocks">
-      <div data-language="instructions-for-all-platforms" markdown="1"></p>
+      <div data-tab-key="instructions-for-all-platforms" markdown="1"></p>
         <p>Instructions for all platforms</p>
       <p></div>
     </div>