@@ -2,21 +2,31 @@ import { afterEach, beforeAll, describe, expect, it } from 'vitest'
22import axe from 'axe-core'
33
44import {
5+ defineSpectreBadge ,
56 defineSpectreButton ,
7+ defineSpectreCard ,
68 defineSpectreCheckbox ,
79 defineSpectreFieldset ,
10+ defineSpectreIconBox ,
811 defineSpectreInput ,
912 defineSpectreLabel ,
1013 defineSpectreRadio ,
14+ defineSpectreRating ,
1115 defineSpectreSelect ,
16+ defineSpectreTestimonial ,
1217 defineSpectreTextarea ,
18+ SpectreBadgeElement ,
1319 SpectreButtonElement ,
20+ SpectreCardElement ,
1421 SpectreCheckboxElement ,
1522 SpectreFieldsetElement ,
23+ SpectreIconBoxElement ,
1624 SpectreInputElement ,
1725 SpectreLabelElement ,
1826 SpectreRadioElement ,
27+ SpectreRatingElement ,
1928 SpectreSelectElement ,
29+ SpectreTestimonialElement ,
2030 SpectreTextareaElement ,
2131} from '../src'
2232
@@ -38,13 +48,18 @@ async function audit(el: HTMLElement): Promise<axe.Result[]> {
3848
3949describe ( 'accessibility audit' , ( ) => {
4050 beforeAll ( ( ) => {
51+ defineSpectreBadge ( )
4152 defineSpectreButton ( )
53+ defineSpectreCard ( )
4254 defineSpectreCheckbox ( )
4355 defineSpectreFieldset ( )
56+ defineSpectreIconBox ( )
4457 defineSpectreInput ( )
4558 defineSpectreLabel ( )
4659 defineSpectreRadio ( )
60+ defineSpectreRating ( )
4761 defineSpectreSelect ( )
62+ defineSpectreTestimonial ( )
4863 defineSpectreTextarea ( )
4964 } )
5065
@@ -175,4 +190,104 @@ describe('accessibility audit', () => {
175190 const violations = await audit ( el )
176191 expect ( violations ) . toEqual ( [ ] )
177192 } )
193+
194+ it ( 'sp-badge has no violations with populated text content' , async ( ) => {
195+ const el = document . createElement ( 'sp-badge' ) as SpectreBadgeElement
196+ el . textContent = 'New'
197+ const violations = await audit ( el )
198+ expect ( violations ) . toEqual ( [ ] )
199+ } )
200+
201+ it ( 'sp-badge has no violations when empty with an aria-label' , async ( ) => {
202+ const el = document . createElement ( 'sp-badge' ) as SpectreBadgeElement
203+ el . setAttribute ( 'aria-label' , 'Unread notifications' )
204+ const violations = await audit ( el )
205+ expect ( violations ) . toEqual ( [ ] )
206+ } )
207+
208+ it ( 'sp-badge has no violations with slotted markup' , async ( ) => {
209+ const el = document . createElement ( 'sp-badge' ) as SpectreBadgeElement
210+ el . innerHTML = '<svg aria-hidden="true"></svg><span>3 new</span>'
211+ const violations = await audit ( el )
212+ expect ( violations ) . toEqual ( [ ] )
213+ } )
214+
215+ it ( 'sp-card has no violations with populated heading content' , async ( ) => {
216+ const el = document . createElement ( 'sp-card' ) as SpectreCardElement
217+ el . innerHTML = '<h2>Card title</h2><p>Card body</p>'
218+ const violations = await audit ( el )
219+ expect ( violations ) . toEqual ( [ ] )
220+ } )
221+
222+ it ( 'sp-card has no violations when empty with an aria-label' , async ( ) => {
223+ const el = document . createElement ( 'sp-card' ) as SpectreCardElement
224+ el . setAttribute ( 'aria-label' , 'Empty placeholder card' )
225+ const violations = await audit ( el )
226+ expect ( violations ) . toEqual ( [ ] )
227+ } )
228+
229+ it ( 'sp-card interactive state has no violations with slotted content' , async ( ) => {
230+ const el = document . createElement ( 'sp-card' ) as SpectreCardElement
231+ el . interactive = true
232+ el . innerHTML = '<h2>Plan</h2><a href="/plan">View details</a>'
233+ const violations = await audit ( el )
234+ expect ( violations ) . toEqual ( [ ] )
235+ } )
236+
237+ it ( 'sp-icon-box has no violations with a projected icon and aria-label' , async ( ) => {
238+ const el = document . createElement ( 'sp-icon-box' ) as SpectreIconBoxElement
239+ el . setAttribute ( 'aria-label' , 'Security feature' )
240+ el . innerHTML = '<svg aria-hidden="true"></svg>'
241+ const violations = await audit ( el )
242+ expect ( violations ) . toEqual ( [ ] )
243+ } )
244+
245+ it ( 'sp-icon-box has no violations when empty with an aria-label' , async ( ) => {
246+ const el = document . createElement ( 'sp-icon-box' ) as SpectreIconBoxElement
247+ el . setAttribute ( 'aria-label' , 'Placeholder icon' )
248+ const violations = await audit ( el )
249+ expect ( violations ) . toEqual ( [ ] )
250+ } )
251+
252+ it ( 'sp-rating has no violations with the default self-generated label' , async ( ) => {
253+ const el = document . createElement ( 'sp-rating' ) as SpectreRatingElement
254+ const violations = await audit ( el )
255+ expect ( violations ) . toEqual ( [ ] )
256+ } )
257+
258+ it ( 'sp-rating has no violations with an explicit aria-label override' , async ( ) => {
259+ const el = document . createElement ( 'sp-rating' ) as SpectreRatingElement
260+ el . setAttribute ( 'aria-label' , 'Average customer rating' )
261+ const violations = await audit ( el )
262+ expect ( violations ) . toEqual ( [ ] )
263+ } )
264+
265+ it ( 'sp-rating has no violations with a visible text label' , async ( ) => {
266+ const el = document . createElement ( 'sp-rating' ) as SpectreRatingElement
267+ el . label = '4.5 out of 5 stars'
268+ const violations = await audit ( el )
269+ expect ( violations ) . toEqual ( [ ] )
270+ } )
271+
272+ it ( 'sp-testimonial has no violations with populated quote content' , async ( ) => {
273+ const el = document . createElement ( 'sp-testimonial' ) as SpectreTestimonialElement
274+ el . innerHTML = '<blockquote>Great product.</blockquote><cite>Jane Doe</cite>'
275+ const violations = await audit ( el )
276+ expect ( violations ) . toEqual ( [ ] )
277+ } )
278+
279+ it ( 'sp-testimonial has no violations when empty with an aria-label' , async ( ) => {
280+ const el = document . createElement ( 'sp-testimonial' ) as SpectreTestimonialElement
281+ el . setAttribute ( 'aria-label' , 'Empty testimonial placeholder' )
282+ const violations = await audit ( el )
283+ expect ( violations ) . toEqual ( [ ] )
284+ } )
285+
286+ it ( 'sp-testimonial has no violations with slotted nested interactive content' , async ( ) => {
287+ const el = document . createElement ( 'sp-testimonial' ) as SpectreTestimonialElement
288+ el . innerHTML =
289+ '<blockquote>Great product.</blockquote><a href="/reviews/1">Read full review</a>'
290+ const violations = await audit ( el )
291+ expect ( violations ) . toEqual ( [ ] )
292+ } )
178293} )
0 commit comments