From c330a91f522f58fdb1bcb1dd13036d0c8e02b912 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Mon, 27 Apr 2026 20:33:17 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20collapse=202018=20image=20under=20spoil?=
 =?UTF-8?q?er;=20segmented=20"T=E1=BA=A5t=20c=E1=BA=A3=20ng=C3=B4n=20ng?=
 =?UTF-8?q?=E1=BB=AF"=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- wrap original 2018 image in <details class="original-image"> spoiler again
- view-toggle becomes a 2-state segmented control (TIOBE Top 20 / Tất cả ngôn ngữ)
  matching the source-toggle pattern, with arrow-key roving tabindex
- label both controls ("Nguồn màu" / "Hiển thị") for discoverability
---
 index.html            | 18 +++++++----
 js/render-elements.js | 62 ++++++++++++++++++++++++++---------
 style.css             | 75 ++++++++++++++++++++++++++-----------------
 3 files changed, 104 insertions(+), 51 deletions(-)

diff --git a/index.html b/index.html
index c9c764d..e8785c6 100644
--- a/index.html
+++ b/index.html
@@ -41,17 +41,23 @@
     <section class="elements">
       <h2>Ngũ Hành &amp; ngôn ngữ <small class="mode-tag" id="source-tag">Nguồn: GitHub Linguist</small></h2>
       <div class="modern-controls">
-        <div id="source-toggle"></div>
-        <div id="view-toggle"></div>
+        <div class="control-group">
+          <span class="control-label">Nguồn màu</span>
+          <div id="source-toggle"></div>
+        </div>
+        <div class="control-group">
+          <span class="control-label">Hiển thị</span>
+          <div id="view-toggle"></div>
+        </div>
       </div>
       <div class="grid" id="element-grid"></div>
       <p class="legend"></p>
       <details id="debug-panel" hidden></details>
-      <p class="disclaimer">* Mặc định hiển thị TIOBE Top 20 (April 2026). Bấm "Xem tất cả ngôn ngữ" để mở rộng. Có thể đổi nguồn màu giữa GitHub Linguist và GitLab Linguist (palette khác hẳn).</p>
+      <p class="disclaimer">* Mặc định hiển thị TIOBE Top 20 (April 2026). Chuyển sang "Tất cả ngôn ngữ" để xem toàn bộ Linguist. Có thể đổi nguồn màu giữa GitHub Linguist và GitLab Linguist (palette khác hẳn).</p>
     </section>
 
-    <section class="figure" aria-labelledby="classic-image-heading">
-      <h2 id="classic-image-heading" class="visually-hidden">Ảnh gốc 2018</h2>
+    <details class="original-image">
+      <summary>Ảnh gốc (2018)</summary>
       <figure>
         <img
           src="assets/ngon-ngu-lap-trinh-phong-thuy.png"
@@ -62,7 +68,7 @@
           <a href="https://toidicodedao.com/2018/01/02/top-5-ngon-ngu-lap-trinh-dang-hoc-cho-nam-2018/" target="_blank" rel="noopener noreferrer">Tôi đi code dạo</a>.
         </figcaption>
       </figure>
-    </section>
+    </details>
 
     <footer class="credit">
       <h2>Credit</h2>
diff --git a/js/render-elements.js b/js/render-elements.js
index 78e9534..bd7837b 100644
--- a/js/render-elements.js
+++ b/js/render-elements.js
@@ -103,22 +103,54 @@ export function mountSourceToggle(mountEl, sources, defaultKey, onChange) {
 
 export function mountViewToggle(mountEl, scopeEl) {
   if (!mountEl || !scopeEl) return;
-  const btn = document.createElement('button');
-  btn.type = 'button';
-  btn.className = 'view-toggle-btn';
-  const labels = {
-    tiobe: 'Xem tất cả ngôn ngữ',
-    all: 'Chỉ TIOBE Top 20',
-  };
-  function apply(view) {
-    scopeEl.classList.toggle('show-all', view === 'all');
-    btn.textContent = labels[view];
-    btn.dataset.view = view;
-    btn.setAttribute('aria-pressed', String(view === 'all'));
+  const views = [
+    { key: 'tiobe', label: 'TIOBE Top 20' },
+    { key: 'all', label: 'Tất cả ngôn ngữ' },
+  ];
+  const DEFAULT_VIEW = 'tiobe';
+
+  const tablist = document.createElement('div');
+  tablist.className = 'view-toggle';
+  tablist.setAttribute('role', 'tablist');
+  tablist.setAttribute('aria-label', 'Phạm vi hiển thị ngôn ngữ');
+
+  const buttons = views.map(({ key, label }) => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.role = 'tab';
+    btn.className = 'view-toggle-btn';
+    btn.dataset.view = key;
+    btn.textContent = label;
+    btn.setAttribute('aria-selected', String(key === DEFAULT_VIEW));
+    btn.tabIndex = key === DEFAULT_VIEW ? 0 : -1;
+    btn.addEventListener('click', () => activate(key));
+    tablist.appendChild(btn);
+    return btn;
+  });
+
+  tablist.addEventListener('keydown', (e) => {
+    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) return;
+    e.preventDefault();
+    const i = buttons.indexOf(document.activeElement);
+    let next;
+    if (e.key === 'Home') next = 0;
+    else if (e.key === 'End') next = buttons.length - 1;
+    else if (e.key === 'ArrowLeft') next = (i <= 0 ? buttons.length : i) - 1;
+    else next = (i + 1) % buttons.length;
+    buttons[next].focus();
+    activate(buttons[next].dataset.view);
+  });
+
+  function activate(key) {
+    for (const b of buttons) {
+      const active = b.dataset.view === key;
+      b.setAttribute('aria-selected', String(active));
+      b.tabIndex = active ? 0 : -1;
+    }
+    scopeEl.classList.toggle('show-all', key === 'all');
   }
-  btn.addEventListener('click', () => apply(btn.dataset.view === 'all' ? 'tiobe' : 'all'));
-  apply('tiobe');
-  mountEl.replaceChildren(btn);
+
+  mountEl.replaceChildren(tablist);
 }
 
 export function renderError(message, mountEl) {
diff --git a/style.css b/style.css
index 6684e57..a883e77 100644
--- a/style.css
+++ b/style.css
@@ -90,24 +90,41 @@ body {
 .hero-ribbon .r-hoa  { background: var(--hoa); }
 .hero-ribbon .r-tho  { background: var(--tho); }
 
-/* ---------- Original figure ---------- */
-.figure { display: flex; justify-content: center; margin: 2rem 0 0; }
-.figure figure {
-  margin: 0; background: var(--card-bg); padding: 0.85rem;
-  border: 1px solid var(--border); border-radius: var(--radius);
-  box-shadow: var(--shadow); max-width: 100%;
+/* ---------- Original-image disclosure ---------- */
+.original-image {
+  margin: 2rem 0 0; background: var(--card-bg);
+  border: 1px solid var(--border); padding: 0.85rem 1rem;
+  border-radius: var(--radius); box-shadow: var(--shadow-sm);
 }
-.figure img {
+.original-image > summary {
+  cursor: pointer; list-style: none; font-weight: 500;
+  display: inline-flex; align-items: center; gap: 0.4rem;
+  color: var(--accent-ink);
+}
+.original-image > summary::-webkit-details-marker { display: none; }
+.original-image > summary::before {
+  content: "▸"; display: inline-block;
+  transition: transform 0.15s ease; color: var(--gold);
+}
+.original-image[open] > summary::before { transform: rotate(90deg); }
+.original-image > summary:focus-visible {
+  outline: none; box-shadow: var(--focus-ring); border-radius: 4px;
+}
+.original-image figure {
+  margin: 0.75rem 0 0; padding: 0.85rem;
+  background: var(--bg-tint); border-radius: var(--radius-sm);
+}
+.original-image img {
   display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm);
 }
-.figure figcaption {
+.original-image figcaption {
   text-align: center; margin-top: 0.6rem; color: var(--muted); font-size: 0.9rem;
 }
-.figure figcaption a {
+.original-image figcaption a {
   color: var(--accent-ink); text-decoration: none;
   border-bottom: 1px dotted var(--accent);
 }
-.figure figcaption a:hover { color: var(--gold); border-bottom-color: var(--gold); }
+.original-image figcaption a:hover { color: var(--gold); border-bottom-color: var(--gold); }
 
 /* ---------- Section headings ---------- */
 .elements h2, .credit h2 {
@@ -168,15 +185,6 @@ body {
 .credit a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }
 .credit .note { font-size: 0.85rem; color: var(--muted); font-style: italic; }
 
-/* ---------- Visually hidden (a11y) ---------- */
-.visually-hidden {
-  position: absolute;
-  width: 1px; height: 1px;
-  margin: -1px; padding: 0;
-  overflow: hidden; clip: rect(0 0 0 0);
-  white-space: nowrap; border: 0;
-}
-
 /* ---------- Debug panel disclosure ---------- */
 #debug-panel > summary {
   cursor: pointer; list-style: none; font-weight: 500;
@@ -219,8 +227,14 @@ body {
 .elements.show-all .chip-other { display: inline-flex; }
 
 .modern-controls {
-  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
-  gap: 0.75rem; margin: 0 0 1rem;
+  display: flex; flex-wrap: wrap; justify-content: center; align-items: end;
+  gap: 1rem 1.25rem; margin: 0 0 1rem;
+}
+.control-group {
+  display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem;
+}
+.control-label {
+  font-size: 0.78rem; color: var(--muted); letter-spacing: 0.3px; text-transform: uppercase;
 }
 .modern-controls #view-toggle,
 .modern-controls #source-toggle { display: flex; margin: 0; }
@@ -239,17 +253,18 @@ body {
 .source-toggle-btn:hover:not([aria-selected="true"]) { background: var(--bg-tint); }
 .source-toggle-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 
+.view-toggle {
+  display: inline-flex; border: 1px solid var(--border-strong);
+  border-radius: 999px; padding: 2px; background: var(--card-bg);
+}
 .view-toggle-btn {
-  font: inherit; font-size: 0.85rem;
-  padding: 0.4rem 0.95rem; border-radius: 999px;
-  border: 1px solid var(--border-strong);
-  background: var(--card-bg); color: var(--fg); cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
-}
-.view-toggle-btn:hover { border-color: var(--accent); }
-.view-toggle-btn[aria-pressed="true"] {
-  background: var(--accent); color: #fff; border-color: var(--accent);
+  font: inherit; font-size: 0.85rem; padding: 0.3rem 0.85rem;
+  border-radius: 999px; border: none; background: transparent;
+  color: var(--fg); cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
 }
+.view-toggle-btn[aria-selected="true"] { background: var(--accent); color: #fff; }
+.view-toggle-btn:hover:not([aria-selected="true"]) { background: var(--bg-tint); }
 .view-toggle-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 
 .legend {