1fc29e6cbf
Enhances accessibility and usability for touch devices and Chromebooks by updating global styles, adding ARIA attributes, and optimizing component layouts. Introduces a new useIsTouchDevice hook, improves focus states, and increases viewport scalability. ChatDetail now supports better keyboard navigation and larger touch targets.
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import * as React from "react"
|
|
|
|
const MOBILE_BREAKPOINT = 768
|
|
|
|
export function useIsMobile() {
|
|
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
|
|
|
React.useEffect(() => {
|
|
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
|
const onChange = () => {
|
|
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
|
}
|
|
mql.addEventListener("change", onChange)
|
|
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
|
return () => mql.removeEventListener("change", onChange)
|
|
}, [])
|
|
|
|
return !!isMobile
|
|
}
|
|
|
|
export function useIsTouchDevice() {
|
|
const [isTouch, setIsTouch] = React.useState<boolean | undefined>(undefined)
|
|
|
|
React.useEffect(() => {
|
|
const checkTouch = () => {
|
|
const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0
|
|
setIsTouch(hasTouch)
|
|
}
|
|
|
|
checkTouch()
|
|
|
|
// Listen for changes in touch capability
|
|
const mediaQuery = window.matchMedia('(pointer: coarse)')
|
|
const handleChange = () => checkTouch()
|
|
|
|
mediaQuery.addEventListener('change', handleChange)
|
|
return () => mediaQuery.removeEventListener('change', handleChange)
|
|
}, [])
|
|
|
|
return !!isTouch
|
|
}
|