Skip to content
Snippets Groups Projects
Unverified Commit 69e0d903 authored by Abhinav Kumar's avatar Abhinav Kumar Committed by GitHub
Browse files

feat: improve color contrast in image gallery for WCAG compliance (#35233)

parent 4d6b8789
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
.changeset/green-rules-cover.md 0 → 100644
+ 5
− 0
View file @ 69e0d903
---
'@rocket.chat/meteor': patch
---
Improves color contrast in image gallery icon buttons to meet WCAG compliance.
apps/meteor/client/components/ImageGallery/ImageGallery.tsx
+ 90
− 76
View file @ 69e0d903
import type { IUpload } from '@rocket.chat/core-typings'; import type { IUpload } from '@rocket.chat/core-typings';
import { css } from '@rocket.chat/css-in-js'; import { css } from '@rocket.chat/css-in-js';
import { Box, ButtonGroup, IconButton, Palette, Throbber } from '@rocket.chat/fuselage'; import { Box, ButtonGroup, IconButton, Palette, PaletteStyleTag, Throbber, padding } from '@rocket.chat/fuselage';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { FocusScope } from 'react-aria'; import { FocusScope } from 'react-aria';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
...@@ -32,10 +32,8 @@ const swiperStyle = css` ...@@ -32,10 +32,8 @@ const swiperStyle = css`
background-color: var(--rcx-color-surface-overlay, rgba(0, 0, 0, 0.6)); background-color: var(--rcx-color-surface-overlay, rgba(0, 0, 0, 0.6));
} }
.rcx-swiper-close-button, .swiper-slide {
.rcx-swiper-prev-button, padding: ${padding('x144')} ${padding('x60')} ${padding('x96')};
.rcx-swiper-next-button {
color: var(--rcx-color-font-pure-white, #ffffff) !important;
} }
.rcx-swiper-prev-button, .rcx-swiper-prev-button,
...@@ -96,11 +94,7 @@ const swiperStyle = css` ...@@ -96,11 +94,7 @@ const swiperStyle = css`
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
transition: background-color 0.2s; background-color: ${Palette.surface['surface-sidebar']};
&:hover {
background-color: ${Palette.surface['surface-overlay']};
transition: background-color 0.2s;
}
} }
`; `;
...@@ -126,77 +120,97 @@ export const ImageGallery = ({ images, onClose, loadMore }: { images: IUpload[]; ...@@ -126,77 +120,97 @@ export const ImageGallery = ({ images, onClose, loadMore }: { images: IUpload[];
const preventPropagation = usePreventPropagation(); const preventPropagation = usePreventPropagation();
return createPortal( return createPortal(
<FocusScope contain autoFocus> <>
<Box role='dialog' aria-modal='true' aria-label={t('Image_gallery')} className={swiperStyle}> <PaletteStyleTag theme='dark' selector='.swiper-container.image-gallery' tagId='image-gallery-palette' />
<div role='presentation' className='swiper-container' onClick={onClose}> <FocusScope contain autoFocus>
<ButtonGroup role='toolbar' className='rcx-swiper-controls' onClick={preventPropagation}> <Box role='dialog' aria-modal='true' aria-label={t('Image_gallery')} className={swiperStyle}>
{zoomScale !== 1 && ( <div role='presentation' className='swiper-container image-gallery' onClick={onClose}>
<IconButton name='resize' small icon='arrow-collapse' title={t('Resize')} rcx-swiper-zoom-out onClick={handleResize} /> <ButtonGroup role='toolbar' className='rcx-swiper-controls' onClick={preventPropagation}>
)} {zoomScale !== 1 && (
<IconButton
name='resize'
small
icon='arrow-collapse'
title={t('Resize')}
rcx-swiper-zoom-out
secondary
onClick={handleResize}
/>
)}
<IconButton
name='zoom-out'
small
icon='h-bar'
title={t('Zoom_out')}
rcx-swiper-zoom-out
onClick={handleZoomOut}
secondary
disabled={zoomScale === 1}
/>
<IconButton name='zoom-in' small icon='plus' title={t('Zoom_in')} rcx-swiper-zoom-in secondary onClick={handleZoomIn} />
<IconButton
name='close'
small
icon='cross'
aria-label={t('Close_gallery')}
className='rcx-swiper-close-button'
secondary
onClick={onClose}
/>
</ButtonGroup>
<IconButton <IconButton
name='zoom-out' icon='chevron-right'
small aria-label={t('Next_image')}
icon='h-bar' className='rcx-swiper-prev-button'
title={t('Zoom_out')} secondary
rcx-swiper-zoom-out onClick={preventPropagation}
onClick={handleZoomOut}
disabled={zoomScale === 1}
/> />
<IconButton name='zoom-in' small icon='plus' title={t('Zoom_in')} rcx-swiper-zoom-in onClick={handleZoomIn} />
<IconButton <IconButton
name='close' icon='chevron-left'
small aria-label={t('Previous_image')}
icon='cross' className='rcx-swiper-next-button'
aria-label={t('Close_gallery')} secondary
className='rcx-swiper-close-button' onClick={preventPropagation}
onClick={onClose}
/> />
</ButtonGroup> <Swiper
<IconButton icon='chevron-right' aria-label={t('Next_image')} className='rcx-swiper-prev-button' onClick={preventPropagation} /> ref={swiperRef}
<IconButton navigation={{
icon='chevron-left' nextEl: '.rcx-swiper-next-button',
aria-label={t('Previous_image')} prevEl: '.rcx-swiper-prev-button',
className='rcx-swiper-next-button' }}
onClick={preventPropagation} keyboard
/> zoom={{ toggle: false }}
<Swiper lazyPreloaderClass='rcx-lazy-preloader'
ref={swiperRef} runCallbacksOnInit
navigation={{ onKeyPress={(_: SwiperClass, keyCode: string) => String(keyCode) === '27' && onClose()}
nextEl: '.rcx-swiper-next-button', modules={[Navigation, Zoom, Keyboard, A11y]}
prevEl: '.rcx-swiper-prev-button', onInit={(swiper: SwiperClass) => setSwiperInst(swiper)}
}} onSlidesGridLengthChange={(swiper: SwiperClass) => {
keyboard swiper.slideTo(images.length - gridSize, 0);
zoom={{ toggle: false }} setGridSize(images.length);
lazyPreloaderClass='rcx-lazy-preloader' }}
runCallbacksOnInit onReachBeginning={loadMore}
onKeyPress={(_: SwiperClass, keyCode: string) => String(keyCode) === '27' && onClose()} initialSlide={images.length - 1}
modules={[Navigation, Zoom, Keyboard, A11y]} >
onInit={(swiper: SwiperClass) => setSwiperInst(swiper)} {[...images].reverse().map(({ _id, path, url }) => (
onSlidesGridLengthChange={(swiper: SwiperClass) => { <SwiperSlide key={_id}>
swiper.slideTo(images.length - gridSize, 0); <div className='swiper-zoom-container'>
setGridSize(images.length); {/* eslint-disable-next-line
}} jsx-a11y/no-noninteractive-element-interactions,
onReachBeginning={loadMore} jsx-a11y/click-events-have-key-events
initialSlide={images.length - 1} */}
> <img src={path || url} loading='lazy' alt='' data-qa-zoom-scale={zoomScale} onClick={preventPropagation} />
{[...images].reverse().map(({ _id, path, url }) => ( <div className='rcx-lazy-preloader'>
<SwiperSlide key={_id}> <Throbber inheritColor />
<div className='swiper-zoom-container'> </div>
{/* eslint-disable-next-line
jsx-a11y/no-noninteractive-element-interactions,
jsx-a11y/click-events-have-key-events
*/}
<img src={path || url} loading='lazy' alt='' data-qa-zoom-scale={zoomScale} onClick={preventPropagation} />
<div className='rcx-lazy-preloader'>
<Throbber inheritColor />
</div> </div>
</div> </SwiperSlide>
</SwiperSlide> ))}
))} </Swiper>
</Swiper> </div>
</div> </Box>
</Box> </FocusScope>
</FocusScope>, </>,
document.body, document.body,
); );
}; };
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment