ویژگی نقش HTML ARIA – یک جدول پرس و جو کتابخانه آزمایشی مناسب

سال 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
.
دفعه بعد که نمی دانید عناصر جزء شما چه نقشی دارند، به این جدول مراجعه کنید. می دانم که خواهم کرد
نقش هایی که در جدول گنجانده نشده اند
نقشها بدون عنصر پیشفرض 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 پست شده است