ویجت سوالات متداول

ویجت سوالات متداول یک آکاردئون دسترس‌پذیر است: هر پرسش یک دکمه داخل یک تگ عنوان دارد و پاسخ در یک ناحیه‌ی region قرار می‌گیرد که با aria-labelledby به همان دکمه وصل است. همراه ویجت، خروجی ساخت‌یافته‌ی FAQPage هم چاپ می‌شود.

بخش «سوال‌ها»

تنها کنترل این بخش یک تکرارشونده (Repeater) به نام آیتم‌ها است که سه فیلد دارد:

هنگام اولین استفاده، ویجت با چند آیتم نمونه پر می‌شود تا ساختار را ببینید؛ متن همه‌ی آن‌ها را با محتوای خودتان عوض کنید.

بخش «تنظیمات رفتار»

حالت آکاردئون: با باز شدن یک آیتم، آیتم باز قبلی بسته می‌شود. برای فهرست‌های طولانی و صفحه‌های موبایل مناسب‌تر است.

حالت آزاد: هر آیتم مستقل باز و بسته می‌شود و کاربر می‌تواند چند پاسخ را هم‌زمان باز نگه دارد؛ برای مقایسه‌ی چند پرسش بهتر است.

آیکون‌ها SVG درون‌خطی‌اند و با currentColor رنگ می‌گیرند، پس از کنترل‌های رنگ بخش «آیکون» پیروی می‌کنند. در حالت باز، آیکون پلاس 45 درجه و آیکون‌های فلش و سفارشی 180 درجه می‌چرخند؛ میزان چرخش آیکون سفارشی با کنترل «چرخش آیکون سفارشی در حالت باز (درجه)» قابل تنظیم است.

بخش «سئو و ساختار»

شکل خروجی اسکیمای ساخت‌یافته

{
	"@context": "https://schema.org",
	"@type": "FAQPage",
	"mainEntity": [
		{
			"@type": "Question",
			"name": "دوره‌ها به چه صورت برگزار می‌شوند؟",
			"acceptedAnswer": {
				"@type": "Answer",
				"text": "همه دوره‌ها ویدیویی و آنلاین هستند…"
			}
		}
	]
}

خروجی با JSON_UNESCAPED_UNICODE چاپ می‌شود، یعنی متن فارسی به‌صورت خوانا در کد صفحه می‌ماند و به \uXXXX تبدیل نمی‌شود.

ساختار خروجی HTML

<div class="wgcr-faq" data-mode="accordion" data-speed="300">
	<div class="wgcr-faq-list">
		<div class="wgcr-faq-item open" data-icon="plus">
			<h3 class="wgcr-faq-qwrap">
				<button type="button" class="wgcr-faq-q" id="wgcr-faq-q-abc123-0"
					aria-expanded="true" aria-controls="wgcr-faq-a-abc123-0">
					<span class="wgcr-faq-qtext">عنوان سوال</span>
					<span class="wgcr-faq-ic"><svg viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
				</button>
			</h3>
			<div class="wgcr-faq-a" role="region" id="wgcr-faq-a-abc123-0"
				aria-labelledby="wgcr-faq-q-abc123-0">
				<div class="wgcr-faq-atext">متن پاسخ…</div>
			</div>
		</div>
	</div>
</div>

دسترس‌پذیری و کیبورد

• پاسخ‌های بسته‌شده از ترتیب Tab بیرون می‌مانند (با visibility: hidden)، پس کاربر با کیبورد داخل محتوای پنهان گیر نمی‌کند.
• حلقه‌ی فوکوس فقط با :focus-visible دیده می‌شود تا کلیک با ماوس خط آبی نیاندازد.
• اگر کاربر prefers-reduced-motion را فعال کرده باشد، انیمیشن حذف می‌شود و آیتم‌ها فوری باز و بسته می‌شوند.
• ارتفاع هر پاسخ باز به‌صورت پویا محاسبه می‌شود و با تغییر اندازه‌ی پنجره دوباره اندازه‌گیری می‌شود؛ پس پاسخ‌های بلند کوتاه نمی‌شوند.
• حرکت بین پرسش‌ها حلقه‌ای است: بعد از آخرین پرسش، ArrowDown به اولین پرسش می‌رود.

جزئیات بیشتر در صفحه‌های دسترس‌پذیری و میان‌برهای کیبورد.

بخش‌های استایل

طرح کلی

بدنه کارت

عنوان

کارت توضیحات

آیکون

نمونه‌ی استایل سفارشی

اگر می‌خواهید ظاهر را بیرون از کنترل‌ها تغییر دهید، این قطعه در CSS سفارشی پوسته کافی است:

.wgcr-faq-item {
	border-radius: 16px;
	box-shadow: 0 2px 10px rgb(15 23 42 / 6%);
}
.wgcr-faq-item.open .wgcr-faq-qtext {
	color: #1d4ed8;
}
@media (prefers-reduced-motion: reduce) {
	.wgcr-faq-a { transition: none; }
}

فهرست کامل کنترل‌ها

همه‌ی کنترل‌های محتوایی ویجت به ترتیب بخش‌های پنل. کنترل‌های استایل در بخش‌های بالا فهرست شده‌اند.

رفع مشکلات