accessible astro components
v3.0.1
一組可訪問，易於使用的前端UI組件，用於Astro。這些組件中的大多數用於可訪問的Astro啟動器和可訪問的Astro儀表板主題，它們為這些組件提供了模範用例。作為獎勵，這些主題還具有自己的專用組件（例如鍵盤可訪問且響應式導航）以及許多設計系統實用程序類，模式和原語（例如網格，按鈕，列表，列表，間距，大小等）。
實時預覽
在項目文件夾中運行以下命令以開始：
npm install accessible-astro-components --save-dev 您可以使用以下導入語句從軟件包導入不同組件：
---
import { Accordion , AccordionItem , Card , Modal , ... } from ' accessible-astro-components '
---跳過：手風琴，麵包屑，卡片，darkmode，媒體，模態，通知，分頁，跳過
手風琴非常適合將大量內容分組為更容易掃描標題，當用戶想讀取與該標頭相關的內容時，它們可以擴展。該組件使用本機HTML <details>和<summary>元素用於內置可訪問性和功能。
手風琴的某些（可訪問性）功能：
name道具的可選獨家行為allow-discrete和allow-keywords在::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 pseudo元素可單擊整個卡<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是一個切換按鈕組件，可根據用戶對輕度或深色配色方案的偏好添加和刪除<body>的.darkmode類。用戶的喜好將其保存到localStorage中，以保留其未來訪問的選擇。
Darkmode的一些（可訪問性）功能：
aria-pressed來指示篩選讀取器用戶是否已切換aria-label S切換了哪些狀態aria-hidden將圖標隱藏為黑暗和光模式，並使用aria-labels Scolor-scheme到light或dark ，以便您可以在CSS中使用light-dark()函數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 "
/>模式是出現在父屏幕頂部的窗口，通常禁用父屏幕的使用並要求用戶立即採取操作。該組件使用本機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 >通知通常用於使用戶有關在網站或應用程序上更改狀態的最新信息。例如，它們也可以用作一種在文章中顯示一些突出顯示信息的一般方法。在通知方面，有兩個經驗法則，這些規則始終添加有關該通知的上下文信息（例如，以“提示：”，“ 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為使用輔助技術的用戶提供了一種跳過頁面上的重複內容，直接轉到網站或應用程序的主要內容。要正確使用此組件，請確保您將項目的主要內容提供給#main-content的id ，以便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類的可選字符串tabslist
class - 其他CSS類的可選字符串TABSTAB
id唯一標籤標識的必需字符串controls - 所需的字符串匹配面板ID此選項卡控件selected - 可選的布爾值以設置初始選定狀態class - 其他CSS類的可選字符串Tabspanel
id唯一面板標識所需的字符串labelledby - 必需的字符串匹配標記此面板的選項卡IDselected - 可選的布爾值以設置初始選定狀態class - 其他CSS類的可選字符串您可以使用以下設置單個屬性來應用自己的樣式:global(body .tabs)
< style lang="scss" is:global>
body .tabs-list {
background-color : purple ;
}
</ style >如果您發現某件事不正確，那麼我總是很高興聽到它改善這些組件！您可以通過多種方式和形式做出貢獻。讓我知道：
我要感謝Astro的創建者以及所有使用這些組件並共享寶貴見解的人，以增強全球網絡訪問性。此外，我想承認網絡開發社區中著名人物的貢獻，包括今天的Learn JavaScript的Zell Liew和包容性組件的作者Heydon Pickering等。特別感謝該存儲庫的所有貢獻者，並特別認可了大衛·阿貝爾（David Abell），他們的大量貢獻（例如增加打字稿支持）極大地受益匪淺。高度讚賞您的集體努力！
