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），他们的大量贡献（例如增加打字稿支持）极大地受益匪浅。高度赞赏您的集体努力！
