diff options
Diffstat (limited to 'src/view/com/lightbox')
4 files changed, 32 insertions, 7 deletions
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx index 6880008e4..84e5f90fb 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx @@ -20,7 +20,11 @@ const ImageDefaultHeader = ({onRequestClose}: Props) => ( <TouchableOpacity style={styles.closeButton} onPress={onRequestClose} - hitSlop={HIT_SLOP}> + hitSlop={HIT_SLOP} + accessibilityRole="button" + accessibilityLabel="Close image" + accessibilityHint="Closes viewer for header image" + onAccessibilityEscape={onRequestClose}> <Text style={styles.closeText}>✕</Text> </TouchableOpacity> </SafeAreaView> diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx index 12d37e283..658735724 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -127,7 +127,8 @@ const ImageItem = ({ <TouchableWithoutFeedback onPress={doubleTapToZoomEnabled ? handleDoubleTap : undefined} onLongPress={onLongPressHandler} - delayLongPress={delayLongPress}> + delayLongPress={delayLongPress} + accessibilityRole="image"> <Animated.Image source={imageSrc} style={imageStylesWithOpacity} diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx index c10d57b37..531df129e 100644 --- a/src/view/com/lightbox/ImageViewing/index.tsx +++ b/src/view/com/lightbox/ImageViewing/index.tsx @@ -112,7 +112,12 @@ function ImageViewing({ } return ( - <SafeAreaView style={styles.screen} onLayout={onLayout} edges={edges}> + <SafeAreaView + style={styles.screen} + onLayout={onLayout} + edges={edges} + aria-modal + accessibilityViewIsModal> <ModalsContainer /> <View style={[styles.container, {opacity, backgroundColor}]}> <Animated.View style={[styles.header, {transform: headerTransform}]}> diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx index c17356d94..1d4a9c215 100644 --- a/src/view/com/lightbox/Lightbox.web.tsx +++ b/src/view/com/lightbox/Lightbox.web.tsx @@ -89,13 +89,25 @@ function LightboxInner({ return ( <View style={styles.mask}> - <TouchableWithoutFeedback onPress={onClose}> + <TouchableWithoutFeedback + onPress={onClose} + accessibilityRole="button" + accessibilityLabel="Close image viewer" + accessibilityHint="Exits image view" + onAccessibilityEscape={onClose}> <View style={styles.imageCenterer}> - <Image source={imgs[index]} style={styles.image} /> + <Image + accessibilityIgnoresInvertColors + source={imgs[index]} + style={styles.image} + /> {canGoLeft && ( <TouchableOpacity onPress={onPressLeft} - style={[styles.btn, styles.leftBtn]}> + style={[styles.btn, styles.leftBtn]} + accessibilityRole="button" + accessibilityLabel="Go back" + accessibilityHint="Navigates to previous image in viewer"> <FontAwesomeIcon icon="angle-left" style={styles.icon} @@ -106,7 +118,10 @@ function LightboxInner({ {canGoRight && ( <TouchableOpacity onPress={onPressRight} - style={[styles.btn, styles.rightBtn]}> + style={[styles.btn, styles.rightBtn]} + accessibilityRole="button" + accessibilityLabel="Go to next" + accessibilityHint="Navigates to next image in viewer"> <FontAwesomeIcon icon="angle-right" style={styles.icon} |