سال 2023 است و روند خوبی در استفاده وجود دارد testing-library و آن ...ByRole پرس و جو.
من کاملاً از این طریق پرس و جو عناصر را دوست دارم، اما صادقانه بگویم، گاهی اوقات کاملاً مشخص نیست که در صورت وجود چه نقشی در مؤلفه های خود دارید.
بنابراین فکر کردم یک پست کوچک در مورد آن بنویسم و ​​یک برگه تقلب برای رایج ترین نقش ها قرار دهم.

ویژگی نقش HTML ARIA توضیح داده شده است

نقش‌های ARIA معنای معنایی محتوا را ارائه می‌کنند و به خوانندگان صفحه و سایر ابزارها اجازه می‌دهند تا تعامل با شی را به گونه‌ای که مطابق با انتظارات کاربر از آن نوع شی باشد، ارائه و پشتیبانی کنند. از نقش‌های ARIA می‌توان برای توصیف عناصری استفاده کرد که در HTML وجود ندارند یا وجود دارند اما هنوز پشتیبانی کامل از مرورگر ندارند.

برگه تقلب

نقش‌های پیش‌فرض عناصر HTML در جدول زیر فهرست شده‌اند.

لطفا توجه داشته باشید که نمونه هایی که دارند role ویژگی تعریف شده انجام دادن به آن ویژگی ها نیاز دارد. مثلا، will not work without `role="radiogroup"`, even though it's more semantically correct than say.

نقش	شرح	برچسب بزنید	دسته بندی	مثال
عنوان	این عنصر را به عنوان عنوان یک صفحه یا بخش تعریف می کند	h1..h6	ساختار سند
دکمه	یک عنصر قابل کلیک	دکمه	ویجت	<دکمه>
ارتباط دادن	فقط با href صفت، در غیر این صورت generic	آ	ویجت
img	یک تصویر	img	ساختار سند
فهرست	لیستی از موارد	ul،اول،منو	ساختار سند
فهرست	یک مورد در یک لیست	لی	ساختار سند
جداکننده	تقسیم‌کننده‌ای که بخش‌هایی از محتوا یا گروه‌ها را جدا و متمایز می‌کند	ساعت	ساختار سند
اصلی	محتوای اصلی صفحه	اصلی	نقطه عطف
جهت یابی	مجموعه ای از عناصر ناوبری (معمولاً پیوندها) برای پیمایش در سند یا اسناد مرتبط	ناوبری	نقطه عطف
مکمل	بخش پشتیبان سند، طراحی شده تا مکمل محتوای اصلی در سطح مشابهی در سلسله مراتب DOM باشد، اما زمانی که از محتوای اصلی جدا شود، معنادار باقی می ماند.	گذشته از	نقطه عطف
اطلاعات محتوا	پاورقی برای نزدیکترین محتوای برش یا عنصر ریشه برش	پاورقی	نقطه عطف
فرم	منطقه ای که شامل مجموعه ای از آیتم ها و اشیاء است که در مجموع با یکدیگر ترکیب می شوند تا یک فرم ایجاد کنند	فرم	نقطه عطف
منطقه	بخشی از صفحه که حاوی محتوایی است که به اندازه کافی مهم است که در خلاصه صفحه یا فهرست مطالب گنجانده شود	بخش	نقطه عطف
جستجو کردن	منطقه ای که شامل مجموعه ای از اقلام و اشیاء است که به عنوان یک کل ترکیب می شوند تا یک مرکز جستجو ایجاد کنند	فرم	نقطه عطف
جعبه متن	یک جعبه متن تک خطی	ورودی	ویجت
چک باکس	یک ورودی قابل بررسی که دارای سه مقدار ممکن است: true، false، یا mixed	ورودی	ویجت
رادیو	یک ورودی قابل بررسی که دارای دو مقدار ممکن است: true یا false	ورودی	ویجت
جعبه جستجو	یک کادر متنی تک خطی برای وارد کردن عبارت‌های جستجو	ورودی	ویجت
جدول	یک ظرف رومیزی	جدول	ساختار سند
سر ردیف	سلولی حاوی اطلاعات سرصفحه برای یک ردیف	هفتم	ساختار سند
سر ستون	یک سلول حاوی اطلاعات سرصفحه برای یک ستون	هفتم	ساختار سند
گروه ردیف	گروهی از سطرها که از سرصفحه سطر و سطرهای داده برای سرصفحه سطر تشکیل شده است	سر،بدن،پا	ساختار سند
ردیف	یک ردیف در ظرف رومیزی	tr	ساختار سند
سلول	یک سلول در یک ظرف جدول. (اگر عنصر جدول اجداد به عنوان یک نقش = جدول در معرض دید قرار گیرد)	td،هفتم	ساختار سند
گروه	گروهی از اشیاء رابط کاربری که قرار نیست توسط فناوری های کمکی در خلاصه صفحه یا فهرست مطالب گنجانده شوند.	مجموعه فیلدها	ویجت
گروه رادیویی	گروهی از دکمه های رادیویی	⛔	ویجت
مقاله	بخشی از یک صفحه که شامل ترکیبی است که بخشی مستقل از یک سند، صفحه یا سایت را تشکیل می دهد	مقاله	ساختار سند
مدت، اصطلاح	تعریف یک اصطلاح	dfn،dt	ساختار سند
تعریف	تعریف یک اصطلاح	⛔	ساختار سند
شکل	بخشی که حاوی محتوایی است که از جریان اصلی سند ارجاع داده شده است، اما می تواند بدون از دست دادن معنی از محتوای اصلی دور شود.	شکل	ساختار سند
گزینه	گزینه ای در لیست انتخابی	گزینه	ویجت
نوار پیشرفت	عنصری که وضعیت پیشرفت کارهایی را که زمان زیادی طول می کشد را نشان می دهد	پیش رفتن	ویجت
لغزنده	کنترلی که به کاربر اجازه می دهد مقداری را از داخل یک محدوده مشخص انتخاب کند	ورودی	ویجت
دکمه چرخشی:	شکلی از محدوده که از کاربر انتظار دارد از میان گزینه های گسسته انتخاب کند	ورودی	ویجت

دفعه بعد که نمی دانید عناصر جزء شما چه نقشی دارند، به این جدول مراجعه کنید. می دانم که خواهم کرد

نقش هایی که در جدول گنجانده نشده اند

نقش‌ها بدون عنصر پیش‌فرض HTML

• grid
• gridcell
• dialog
• alert
• alertdialog
• combobox
• menu
• menubar
• menuitem
• menuitemcheckbox
• menuitemradio
• application
• document
• feed
• tree
• treegrid
• treeitem
• tab
• tablist
• tabpanel
• log
• marquee
• note
• scrollbar
• status
• switch
• timer
• toolbar
• tooltip

نقش های انتزاعی

نقش های انتزاعی برای کامل بودن مستندات گنجانده شده است. آنها نباید توسط نویسندگان وب استفاده شوند.

• command
• composite
• input
• landmark
• range
• roletype
• section
• sectionhead
• select
• structure
• widget
• window

نقش های دیگر

• math نقش برای <math> عنصر را نمی توان توسط پرس و جو کرد testing-library
• presentation و none – معنای ضمنی ARIA یک عنصر را از قرار گرفتن در معرض درخت دسترسی حذف می کند
• comment – یک نقش برجسته که در حال حاضر در پیش نویس پیشنهاد است
• mark نقش برای <mark> در حال حاضر نیز در حال تدوین است
• banner – برای <header> عنصری که واقعاً آن را در برنامه های React خود آزمایش نمی کنید
• generic – این یک نقش پیش فرض برای:
  • <div> و <span> عناصر
  • <a> یا <area> بدون href
  • <b>، <i>
  • <bdi>، <bdo>
  • <body>
  • <header>
  • <data>
  • hgroup>
  • <pre>
  • <q>
  • <samp>
  • <small>
  • <u>
• meter – نقش برای <meter> عنصر در جدول گنجانده نشده است زیرا توسط آن پشتیبانی نمی شود testing-library
• suggestion – نقشی که در حال حاضر در حال تدوین است

منابع

PS

لطفاً به من بگویید که آیا فرمت سبک مستندسازی این مقاله چیزی است که به آن برگردید و به آن مراجعه کنید ❤️

ابتدا در https://colthands.dev/blog/articles/html-aria-roles-a-convenient-testing-library-query-table پست شده است