♿️(frontend) add screen reader announcer store
create shared state for screen reader announcements.
This commit is contained in:
33
src/frontend/src/stores/screenReaderAnnouncer.ts
Normal file
33
src/frontend/src/stores/screenReaderAnnouncer.ts
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import { proxy } from 'valtio'
|
||||||
|
|
||||||
|
type Politeness = 'polite' | 'assertive'
|
||||||
|
|
||||||
|
type ScreenReaderAnnouncement = {
|
||||||
|
message: string
|
||||||
|
politeness: Politeness
|
||||||
|
id: number
|
||||||
|
}
|
||||||
|
|
||||||
|
type ScreenReaderAnnouncerState = {
|
||||||
|
announcement: ScreenReaderAnnouncement
|
||||||
|
}
|
||||||
|
|
||||||
|
export const screenReaderAnnouncerStore = proxy<ScreenReaderAnnouncerState>({
|
||||||
|
announcement: {
|
||||||
|
message: '',
|
||||||
|
politeness: 'polite',
|
||||||
|
id: 0,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
export const announceToScreenReader = (
|
||||||
|
message: string,
|
||||||
|
politeness: Politeness = 'polite'
|
||||||
|
) => {
|
||||||
|
screenReaderAnnouncerStore.announcement = {
|
||||||
|
message,
|
||||||
|
politeness,
|
||||||
|
id: screenReaderAnnouncerStore.announcement.id + 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user