tooot/src/utils/accessibility/AccessibilityManager.tsx

61 lines
1.7 KiB
TypeScript
Raw Normal View History

2021-03-27 00:02:32 +01:00
import React, { createContext, useContext, useEffect, useState } from 'react'
import { AccessibilityInfo } from 'react-native'
type ContextType = {
reduceMotionEnabled: boolean
2021-04-09 21:43:12 +02:00
screenReaderEnabled: boolean
2021-03-27 00:02:32 +01:00
}
const AccessibilityContext = createContext<ContextType>({
2021-04-09 21:43:12 +02:00
reduceMotionEnabled: false,
screenReaderEnabled: false
2021-03-27 00:02:32 +01:00
})
export const useAccessibility = () => useContext(AccessibilityContext)
const AccessibilityManager: React.FC = ({ children }) => {
const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false)
2021-04-09 21:43:12 +02:00
const [screenReaderEnabled, setScreenReaderEnabled] = useState(false)
2021-03-27 00:02:32 +01:00
const handleReduceMotionChanged = (reduceMotionEnabled: boolean) =>
setReduceMotionEnabled(reduceMotionEnabled)
2021-04-09 21:43:12 +02:00
const handleScreenReaderEnabled = (screenReaderEnabled: boolean) =>
setScreenReaderEnabled(screenReaderEnabled)
const loadAccessibilityInfo = async () => {
2021-03-27 00:02:32 +01:00
const reduceMotion = await AccessibilityInfo.isReduceMotionEnabled()
2021-04-09 21:43:12 +02:00
const screenReader = await AccessibilityInfo.isScreenReaderEnabled()
2021-03-27 00:02:32 +01:00
setReduceMotionEnabled(reduceMotion)
2021-04-09 21:43:12 +02:00
setScreenReaderEnabled(screenReader)
2021-03-27 00:02:32 +01:00
}
useEffect(() => {
2021-04-09 21:43:12 +02:00
loadAccessibilityInfo()
2021-03-27 00:02:32 +01:00
2021-12-18 19:59:38 +01:00
const reduceMotionSubscription = AccessibilityInfo.addEventListener(
2021-03-27 00:02:32 +01:00
'reduceMotionChanged',
handleReduceMotionChanged
)
2021-12-18 19:59:38 +01:00
const screenReaderSubscription = AccessibilityInfo.addEventListener(
2021-04-09 21:43:12 +02:00
'screenReaderChanged',
handleScreenReaderEnabled
)
2021-03-27 00:02:32 +01:00
return () => {
2021-12-18 19:59:38 +01:00
reduceMotionSubscription.remove()
screenReaderSubscription.remove()
2021-03-27 00:02:32 +01:00
}
}, [])
return (
<AccessibilityContext.Provider
2021-04-09 21:43:12 +02:00
value={{ reduceMotionEnabled, screenReaderEnabled }}
2021-03-27 00:02:32 +01:00
>
{children}
</AccessibilityContext.Provider>
)
}
export default AccessibilityManager