方向键以及 Home 或 End 键会通过原生实现切换当前标签页并移动焦点。Enter 和 Space 键也能激活标签页。脚本会同步更新 tabindex、aria-selected、hidden 和 aria-hidden。若只测试 is-active CSS 类，便可能漏掉多个面板仍同时显示，或隐藏面板仍可获得焦点的问题。浏览器检查会同时验证选中项和实际显示的内容。
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop reading brief</title><link rel="stylesheet" href="./node_modules/@undp/design-system-assets/css/base-minimal.min.css"><link rel="stylesheet" href="./node_modules/@undp/design-system-assets/css/components/tab.min.css"><link rel="stylesheet" href="./undp.css"></head><body><main><header class="intro"><div><p class="eyebrow">Learning brief / original sample</p><h1>Plan a local resilience workshop</h1></div><p>A small reading workspace for exploring how a development brief can separate context, participation and follow-through.</p></header><p class="study-note">Native UNDP 2.0.2 tab styles and keyboard behavior. Original OpenDesign sample content, not a UNDP programme or official policy. This preview uses Arial fallback rather than the distributed brand fonts.</p><div class="tabs" data-undpds-component="tabs"><ul role="tablist" aria-label="Workshop reading sections" data-deep-link="false"><li role="tab" class="tabs-title is-active" tabindex="0">Understand</li><li role="tab" class="tabs-title" tabindex="-1">Include</li><li role="tab" class="tabs-title" tabindex="-1">Follow through</li></ul><div class="tabs-content"><section id="understand" class="tabs-panel is-active"><div class="panel-grid"><div><h2>Start with the local context</h2><p>A useful workshop begins with a question people can answer from experience. Ask which everyday service is hardest to rely on during a disruption. Avoid assuming that a technical solution is already agreed.</p><h3>Prepare the conversation</h3><ol><li>Write one plain-language question.</li><li>Invite examples of what already works.</li><li>Record uncertainty separately from an agreed need.</li></ol></div><aside class="reading-card"><h3>What would change the decision?</h3><p>Collect contrasting experiences, not just the first answer. A disagreement can reveal who is missing from the conversation.</p><label><input type="checkbox" data-read="understand">Mark this section as reviewed</label></aside></div></section><section id="include" class="tabs-panel"><div class="panel-grid"><div><h2>Make participation practical</h2><p>Participation depends on when, where and how a session takes place. Offer more than one way to contribute and explain how notes will be used before the discussion begins.</p><h3>Remove avoidable barriers</h3><ol><li>Offer spoken and written contributions.</li><li>Ask participants about access needs privately.</li><li>Explain how to decline recording or attribution.</li></ol></div><aside class="reading-card"><h3>Who has not been heard?</h3><p>A count of attendees does not prove representative participation. Check whether the invitation, language or format prevented people from joining.</p><label><input type="checkbox" data-read="include">Mark this section as reviewed</label></aside></div></section><section id="follow" class="tabs-panel"><div class="panel-grid"><div><h2>Close the loop with participants</h2><p>End with a short record of decisions, open questions and named next steps. Send a readable summary back through a channel that participants can actually access.</p><h3>Turn discussion into a next step</h3><ol><li>Separate decisions from suggestions.</li><li>Attach an owner and review point to the next action.</li><li>Invite corrections before treating the notes as agreed.</li></ol></div><aside class="reading-card"><h3>What happens after the session?</h3><p>A clear follow-up commitment is more useful than a polished report with no owner. Keep unresolved issues visible in the next conversation.</p><label><input type="checkbox" data-read="follow">Mark this section as reviewed</label></aside></div></section></div></div><div class="bottom"><p id="progress" role="status">0 of 3 sections reviewed in this preview</p><button id="reset" type="button">Reset reading progress</button></div></main><script src="./node_modules/@undp/design-system-assets/js/tabs.min.js"></script><script src="./undp-app.js"></script></body></html>
tabs();const boxes=[...document.querySelectorAll('[data-read]')];function progress(){document.querySelector('#progress').textContent=boxes.filter(x=>x.checked).length+' of 3 sections reviewed in this preview';}boxes.forEach(x=>x.addEventListener('change',progress));document.querySelector('#reset').addEventListener('click',()=>{boxes.forEach(x=>x.checked=false);progress();});
