accessible astro components
v3.0.1
مجموعة من مكونات واجهة المستخدم في الواجهة الأمامية التي يمكن الوصول إليها وسهلة الاستخدام للواجهة. يتم استخدام معظم هذه المكونات في بداية Astro التي يمكن الوصول إليها وموضوعات Astro Dashboard التي يمكن الوصول إليها وتوفر حالات استخدام مثالية لهذه المكونات. كمكافأة ، تحتوي هذه المواضيع أيضًا على مكونات مخصصة خاصة بها (مثل لوحة المفاتيح التي يمكن الوصول إليها وسريعة الاستجابة) والعديد من فئات فئات نظام التصميم ، والأنماط والأواليت (مثل الشبكات ، والأزرار ، والقوائم ، والتبادل ، والأحجام والمزيد).
معاينة حية
قم بتشغيل الأمر التالي في مجلد المشروع الخاص بك للبدء:
npm install accessible-astro-components --save-dev يمكنك استيراد المكونات المختلفة من الحزمة باستخدام عبارة الاستيراد التالية:
---
import { Accordion , AccordionItem , Card , Modal , ... } from ' accessible-astro-components '
---تخطي إلى : الأكورديون ، فتات الخبز ، البطاقة ، الظلام ، الوسائط ، الوسائط ، الإخطار ، ترقيم الصفحات ، skiplinks
تعد الأكورديون رائعة لتجميع أجزاء كبيرة من المحتوى إلى رؤوس أسهل في المسح الذي يمكن للمستخدم التوسع فيه عندما يرغب في قراءة ما يرتبط بهذا الرأس. يستخدم هذا المكون عناصر HTML الأصلية <details> و <summary> لإمكانية الوصول المدمجة والوظائف.
بعض ميزات (إمكانية الوصول) من الأكورديون :
name الدعامةallow-keywords allow-discrete المسموح بها على العناصر الزائفة ::details-content ---
import { Accordion , AccordionItem } from ' accessible-astro-components '
---
< Accordion >
< AccordionItem
title = " First Item "
>
< p >Lorem ipsum dolor sit amet consectetur adipisicing elit.</ p >
< a href = " # " >Tab to me!</ a >
</ AccordionItem >
<!-- Items in the same group will close others when opened -->
< AccordionItem
name = " group1 "
title = " Second Item "
>
< p >Content for second item</ p >
</ AccordionItem >
< AccordionItem
name = " group1 "
title = " Third Item "
>
< p >Content for third item</ p >
</ AccordionItem >
</ Accordion >الأكورديونتيم
title (مطلوب): النص الموضح في رأس الأكورديونname (اختياري): اسم المجموعة للسلوك الحصري - العناصر التي تحمل نفس الاسم ستغلق الآخرين عند فتحهاchildren : المحتوى الموضح عند توسيع الأكورديون يمكنك تطبيق الأنماط الخاصة بك إما عن طريق تعيين الخصائص الفردية باستخدام :global(body .accordion__item) على سبيل المثال ، أو إعداد علامة نمط عالمية وتحديد أنماطك هناك:
< style lang="scss" is:global>
body .accordion__wrapper {
background-color : purple ;
& [ open ] {
background-color : peru ;
}
}
</ style >تعتبر فتات الخبز وسيلة رائعة لمساعدة المستخدمين على الانتقال إلى الصفحة أو القسم السابق. إنها أيضًا طريقة رائعة للمساعدة في فحص مستخدمي قارئهم على فهم مكان وجودهم في الموقع.
بعض ميزات (إمكانية الوصول) من فتات الخبز :
aria-label="Breadcrumbs"<nav> لإخبار مستخدمي القراء بأن هذا عنصر تنقل ---
import { Breadcrumbs , BreadcrumbsItem } from ' accessible-astro-components '
---
< Breadcrumbs >
< BreadcrumbsItem
href = " / "
label = " Home "
/>
< BreadcrumbsItem
href = " /blog "
label = " Blog "
/>
< BreadcrumbsItem
currentPage = { true }
label = " My blog post "
/>
</ Breadcrumbs > يمكنك تطبيق الأنماط الخاصة بك إما عن طريق ضبط الخصائص الفردية باستخدام :global(body .breadcrumbs__item) على سبيل المثال ، أو إعداد علامة نمط عالمية وتحديد أنماطك هناك:
< style lang="scss" is:global>
body .breadcrumbs__item {
li ::after {
content : ' > ' ;
}
}
</ style > عادة ما تستخدم البطاقات في مجموعات. من خلال لفهم في قائمة غير مرتبة ، نقدم مستخدمي قارئ الشاشة مع اختصارات للقوائم وقائمة العناصر. يتيح قراء الشاشة أيضًا للمستخدمين معرفة عدد العناصر الموجودة في القائمة. في المثال أدناه ، ستجد الهيكل باستخدام قائمة وعرض غير مرتبة display: grid ، مع التأكد من أننا نترك كفاية بين البطاقات على أجهزة اللمس للأشخاص الذين يجدون أن لديهم دقة منخفضة عند استهداف العناصر ، بما في ذلك أولئك الذين يعانون من مرض باركنسون والروماتيزم. إن ترك فجوة أكبر يجعل التمرير أسهل دون تنشيط ارتباط البطاقات عن طريق الخطأ.
بعض ميزات (إمكانية الوصول) للبطاقة :
<a> ::after العنصر الزائف<h3> بحيث يمكن استخدامه في العديد من السياقات ( <h2> سيكون محدودًا جدًاmax-width على 70ch ---
import { Card } from ' accessible-astro-components '
---
< ul >
< li >
< Card
url = " /link-to-my-post "
img = " /assets/post-cover.jpg "
title = " My Awesome Post "
footer = " Tony Stark "
>
Lorem ipsum dolor sit amet.
</ Card >
</ li >
< li >
<!-- ... -->
</ li >
</ ul >
< style lang="scss">
ul {
display : grid ;
grid-template-columns : 1 fr ;
grid-gap : 4 rem ;
@media ( min-width : 550 px ) {
grid-template-columns : repeat ( 2 , 1 fr );
grid-gap : 2 rem ;
}
@media ( min-width : 950 px ) {
grid-template-columns : repeat ( 3 , 1 fr );
}
}
</ style > يمكنك تطبيق الأنماط الخاصة بك إما عن طريق ضبط الخصائص الفردية باستخدام :global(body .card) على سبيل المثال ، أو إعداد علامة نمط عالمية وتحديد أنماطك هناك:
< style lang="scss" is:global>
body .card {
color : purple ;
background-color : blue ;
a {
color : gold ;
}
}
// set your own image height
.card__image {
height : 10 rem ;
}
</ style > DarkMode هو مكون زر تبديل لإضافة وإزالة فئة من .darkmode إلى <body> استنادًا إلى تفضيل المستخدم إما لنظام الألوان الخفيف أو الداكن. يتم حفظ تفضيل المستخدم إلى localStorage للحفاظ على اختياره للزيارات المستقبلية.
بعض ميزات (إمكانية الوصول) من DarkMode :
aria-pressed للإشارة إلى مستخدمي القارئ على ما إذا كان المخطط المظلم معتمد أم لاaria-label Saria-hidden لإخفاء الرموز لوضع الظلام والضوء ويستخدم aria-labels بدلاً من ذلكcolor-scheme على light أو dark بناءً على تفضيل المستخدم حتى تتمكن من استخدام وظيفة light-dark() في CSS initialMode (اختياري): يعين نظام الألوان الأولي. يقبل 'light' أو 'dark' أو 'auto' (الافتراضي: 'auto' )'light' : وضع الإضاءة في الزيارة الأولى'dark' : القوات المظلمة في الزيارة الأولى'auto' : يستخدم تفضيلات النظام في الزيارة الأولى ---
import { DarkMode } from ' accessible-astro-components '
---
<!-- Uses system preferences by default -->
< DarkMode />
<!-- Forces dark mode on first visit -->
< DarkMode initialMode = " dark " />
<!-- Forces light mode on first visit -->
< DarkMode initialMode = " light " />< style lang="scss">
body .darkmode {
// define your dark color scheme
}
</ style > ملاحظة: بعد الزيارة الأولى ، سيتم حفظ التفضيل المختار للمستخدم إلى LocalStorage وسيأخذ الأسبقية على إعداد initialMode .
الوسائط مكون بسيط للغاية يستخدم لعلامات <img> . يحتوي على علامة alt فارغة افتراضية مطلوبة للصور غير المخلوطة. إذا تكون الصورة وصفية ، على سبيل المثال عندما لا يكون هناك نص (تكميلي) ، فيجب عليك دائمًا كتابة علامة alt وصفية جيدة. يستخدم مكون الوسائط أيضًا علامة loading="lazy" لتحسين الأداء من جانب المتصفحات.
بعض ميزات (إمكانية الوصول) للوسائط :
alt فارغة افتراضية والتي تكون مطلوبة دائمًا للصور غير الوصفية. ---
import { Media } from ' accessible-astro-components '
---
< Media
classes = " elevation-300 radius-large "
src = " https://unsplash.com/photos/d0oYF8hm4GI "
alt = " A tiny toy astronaut, sitting on a yellow toy moon "
/> الوسائط هي Windows التي تظهر أعلى الشاشة الأصل ، وعادة ما تعطل استخدام الشاشة الأصل وتتطلب إجراء فوري من المستخدم. يستخدم هذا المكون عنصر HTML <dialog> الأصلي لإمكانية الوصول المدمجة ووظائفها ، ويعززها التحولات السلسة.
بعض ميزات (إمكانية الوصول) للوسائط :
<dialog> الأصلي لإمكانية الوصول المدمجid و aria-labeledby@starting-style و allow-discrete ---
import { Modal } from ' accessible-astro-components '
---
< button id = " modal1-trigger " >Modal 1</ button >
< button id = " modal2-trigger " >Modal 2</ button >
< Modal
triggerId = " modal1-trigger "
title = " Modal 1 "
>
< p >Why hello, I be the < strong >first</ strong > Modal.</ p >
</ Modal >
< Modal
triggerId = " modal2-trigger "
title = " Modal 2 "
closeText = " Cancel "
>
< p >Ah yes, and I be the < strong >second</ strong > Modal.</ p >
<!--
calls the closeModal() function, you can also use this
as a callback in your own function
-->
< button onclick = " closeModal () " >Confirm action</ button >
</ Modal > يمكنك تطبيق الأنماط الخاصة بك إما عن طريق تعيين الخصائص الفردية باستخدام :global(body .modal) على سبيل المثال ، أو إعداد علامة نمط عالمية وتحديد أنماطك هناك:
< style lang="scss" is:global>
body {
.modal {
color : purple ;
background-color : gold ;
}
.modal__inner {
border-color : orange ;
}
.modal__content {
gap : 1.5 rem ;
padding : 1 rem ;
}
.modal__close button {
color : white ;
background-color : blue ;
& :hover ,
& :focus {
background-color : green ;
}
}
}
</ style > غالبًا ما يتم استخدام الإخطارات للحفاظ على تحديث المستخدم حول تغيير الحالة على موقع ويب أو تطبيق. يمكن أيضًا استخدامها كوسيلة عامة لعرض بعض المعلومات المميزة في مقال على سبيل المثال. هناك قاعدتان من الإبهام عندما يتعلق الأمر بالإشعارات وتلك التي تضيف دائمًا معلومات سياقية حول الإخطار (مثل البدء بـ "Tip:" ، "info:" ، خطأ: ") وعند إضافة إشعار إلى DOM استجابةً لإجراء المستخدم ، يجب عليك دائمًا استخدام role="status" و aria-live="polite" لإبلاغ مستخدمي القراء على الشاشة. لإضافة بعض الصور الإضافية ، يمكنك الجمع بين مكون الإخطار مع أيقونة Astro.
بعض ميزات (إمكانية الوصول) للإشعار :
role="status" و aria-live="polite" ---
import { Notification } from ' accessible-astro-components '
---
< Notification
type = " info "
>
< p >< strong >Info:</ strong > This is a notification of type info.</ p >
</ Notification >
<!-- example using Astro Icon -->
< Notification
type = " info "
>
< Icon pack = " ion " name = " information-circle-outline " />< p >< strong >Info:</ strong > This is a notification of type info.</ p >
</ Notification >
<!-- when added to the DOM after a user interaction -->
< Notification
type = " info "
role = " status "
aria-live = " polite "
>
< p >< strong >Info:</ strong > This is a notification of type info.</ p >
</ Notification > يمكنك تطبيق الأنماط الخاصة بك إما عن طريق تعيين الخصائص الفردية باستخدام :global(body .notification) على سبيل المثال ، أو إعداد علامة نمط عالمية وتحديد أنماطك هناك:
< style lang="scss" is:global>
body {
.notification {
color : var ( --neutral-900 , #202427 );
background-color : var ( --neutral-200 , #f6f8f9 );
border : 2 px solid var ( --neutral-600 , #858d93 );
& .type-info {
color : var ( --info-900 , #035486 );
background-color : var ( --info-100 , #e0f7ff );
border-color : var ( --info-600 , #1a91d1 );
}
& .type-success {
color : var ( --success-900 , #014b3e );
background-color : var ( --success-100 , #eefcf6 );
border-color : var ( --success-500 , #28a980 );
}
& .type-warning {
color : var ( --warning-900 , #8e2a0b );
background-color : var ( --warning-100 , #fffbeb );
border-color : var ( --warning-600 , #dc901e );
}
& .type-error {
color : var ( --error-900 , #5e0317 );
background-color : var ( --error-100 , #ffe0e0 );
border-color : var ( --error-500 , #df2a39 );
}
}
}
</ style >مكون ترقيم الصفحات بسيط إلى حد ما ولكنه فعال يحتوي على زر الصفحة الأولى والسابقة والمتابعة والأخير. كما يخبر المستخدم عدد الصفحات الموجودة والصفحة التي يتم تشغيلها حاليًا. مكون ترقيم الصفحات يمكن الوصول إليه بالكامل والوحة المفاتيح قابلة للملاحة.
بعض ميزات (إمكانية الوصول) للترقيم :
aria-label S لإخبار المستخدم بما إذا كان سيذهب إلى الصفحة السابقة أو التالية وأي رقم الصفحةaria-hidden لإخفاء الرموز للصفحات السابقة والحالة التالية ---
import { Pagination } from ' accessible-astro-components '
---
< Pagination
firstPage = " /1 "
previousPage = " /4 "
nextPage = " /6 "
lastPage = " /10 "
currentPage = " /5 "
totalPages = " 10 "
/> ---
import { Pagination } from ' accessible-astro-components '
export async function getStaticPaths({ paginate }) {
const response = await fetch ( ' https://jsonplaceholder.typicode.com/posts ' )
const data = await response . json ()
return paginate ( data , { pageSize: 6 })
}
const { page } = Astro . props
---
< Pagination
firstPage = { page . url . prev ? ' /blog ' : null }
previousPage = { page . url . prev ? page . url . prev : null }
nextPage = { page . url . next ? page . url . next : null }
lastPage = { page . url . next ? ` /blog/${ Math . round ( page . total / page . size )} ` : null }
currentPage = { page . currentPage }
totalPages = { Math . round ( page . total / page . size ) }
/> يمكنك تطبيق الأنماط الخاصة بك إما عن طريق تعيين الخصائص الفردية باستخدام :global(body .pagination) على سبيل المثال ، أو إعداد علامة نمط عالمية وتحديد أنماطك هناك:
< style lang="scss" is:global>
body .pagination a {
svg path {
stroke : gold ;
}
& :hover ,
& :focus-visible {
background-color : purple ;
svg path {
stroke : white ;
}
}
.disabled {
border-color : red ;
opacity : 0.1 ;
}
}
</ style > توفر Skiplinks طريقة للمستخدمين الذين يستخدمون تقنيات مساعدة لتخطي المحتوى المتكرر على الصفحات للانتقال مباشرة إلى المحتوى الرئيسي لموقع ويب أو تطبيق. لاستخدام هذا المكون بشكل صحيح ، تأكد من إعطاء المحتوى الرئيسي لمشروعك id من #main-content حتى يتمكن Skiplink من استهدافه. كاحتفال ، سيحاول Skiplink استهداف h1 للصفحة. إذا لم يتم العثور على تحذير سيتم تسجيله إلى وحدة التحكم.
بعض ميزات (إمكانية الوصول) من skiplinks :
---
import { SkipLinks } from ' accessible-astro-components '
---
< SkipLinks /> يمكنك تطبيق الأنماط الخاصة بك إما عن طريق تعيين الخصائص الفردية باستخدام :global(body .skiplinks) على سبيل المثال ، أو إعداد علامة نمط عالمية وتحديد أنماطك هناك:
< style lang="scss" is:global>
body .skiplinks a {
color : white ;
background-color : purple ;
& :hover
& :focus {
background-color : indigo ;
}
}
</ style >مكون علامات تبويب يمكن الوصول إليه بالكامل يتبع إرشادات WAI-ARIA. تعد علامات التبويب طريقة رائعة لتنظيم المحتوى في أقسام مختلفة ، مما يسمح للمستخدمين بالتبديل بينهما بسهولة.
بعض ميزات (إمكانية الوصول) من علامات التبويب :
id ، aria-controls و aria-labelledby ---
import { Tabs , TabsList , TabsPanel , TabsTab } from ' accessible-astro-components '
---
< Tabs >
< TabsList >
< TabsTab id = " tab1 " controls = " panel1 " selected >Tab 1</ TabsTab >
< TabsTab id = " tab2 " controls = " panel2 " >Tab 2</ TabsTab >
< TabsTab id = " tab3 " controls = " panel3 " >Tab 3</ TabsTab >
</ TabsList >
< TabsPanel id = " panel1 " labelledby = " tab1 " selected >
< h2 >Panel 1</ h2 >
< p >Content for first panel</ p >
</ TabsPanel >
< TabsPanel id = " panel2 " labelledby = " tab2 " >
< h2 >Panel 2</ h2 >
< p >Content for second panel</ p >
</ TabsPanel >
< TabsPanel id = " panel3 " labelledby = " tab3 " >
< h2 >Panel 3</ h2 >
< p >Content for third panel</ p >
</ TabsPanel >
</ Tabs >علامات التبويب
class - سلسلة اختيارية لفئات CSS إضافيةقائمة التبويب
class - سلسلة اختيارية لفئات CSS إضافيةTabstab
id - سلسلة مطلوبة لتحديد علامات التبويب الفريدةcontrols - سلسلة مطلوبة تتطابق مع معرف اللوحة هذه عناصر التحكم في علامة التبويبselected - منطقي اختياري لتعيين الحالة المحددة الأوليةclass - سلسلة اختيارية لفئات CSS إضافيةTabspanel
id - سلسلة مطلوبة لتحديد لوحة فريدةlabelledby - سلسلة مطلوبة تطابق معرف علامة التبويب التي تسمي هذه اللوحةselected - منطقي اختياري لتعيين الحالة المحددة الأوليةclass - سلسلة اختيارية لفئات CSS إضافية يمكنك تطبيق الأنماط الخاصة بك إما عن طريق ضبط الخصائص الفردية باستخدام :global(body .tabs) على سبيل المثال ، أو إعداد علامة نمط عالمية وتحديد أنماطك هناك:
< style lang="scss" is:global>
body .tabs-list {
background-color : purple ;
}
</ style >إذا وجدت أن شيئًا ما لا يعمل بشكل صحيح ، فأنا سعيد دائمًا لسماعه لتحسين هذه المكونات! يمكنك المساهمة بعدة طرق وأشكال. اسمحوا لي أن أعرف من خلال:
أرغب في توسيع امتناني لمبدعي Astro وجميع الذين استخدموا هذه المكونات وتبادلوا رؤى قيمة لتعزيز إمكانية الوصول إلى الويب في جميع أنحاء العالم. بالإضافة إلى ذلك ، أود أن أقر بمساهمات الشخصيات البارزة في مجتمع تطوير الويب ، بما في ذلك Zell Liew من Learn JavaScript اليوم و Heydon Pickering ، مؤلف المكونات الشاملة ، من بين أمور أخرى. شكر خاص لجميع المساهمين في هذا المستودع ، مع اعتراف خاص لديفيد أبيل ، الذي استفاد مساهماته الكبيرة ، مثل إضافة دعم TypeScript ، من المشروع إلى حد كبير. تحظى جهودك الجماعية بتقدير كبير!
