Skip to content

Commit

Permalink
Fix accessibility on slider card and info
Browse files Browse the repository at this point in the history
  • Loading branch information
@gkatrakazas
gkatrakazas committed May 16, 2024
1 parent 6cdb869 commit 8ad6b6f
Showing 1 changed file with 30 additions and 33 deletions.
63 changes: 30 additions & 33 deletions src/pages/Home/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import CredentialsContext from '../../context/CredentialsContext';

const Home = () => {
const api = useApi();
const { vcEntityList,latestCredentials, getData } = useContext(CredentialsContext);
const { vcEntityList, latestCredentials, getData } = useContext(CredentialsContext);
const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < 768);
const [currentSlide, setCurrentSlide] = useState(1);
const [showFullscreenImgPopup, setShowFullscreenImgPopup] = useState(false);
Expand Down Expand Up @@ -130,39 +130,36 @@ const Home = () => {
<Slider ref={sliderRef} {...settings}>
{vcEntityList.map((vcEntity, index) => (
<div key={vcEntity.id}>
{(currentSlide === index + 1 ? 'button' : 'div')
.split()
.map(Tag => (
<Tag key={vcEntity.id} className={`relative rounded-xl xl:w-4/5 md:w-full sm:w-full overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer w-full mb-2 ${latestCredentials.has(vcEntity.id) ? 'fade-in' : ''}`}
onClick={() => { setShowFullscreenImgPopup(true); setSelectedVcEntity(vcEntity); }}
aria-label={`${vcEntity.friendlyName}`}
title={t('pageCredentials.credentialFullScreenTitle', { friendlyName: vcEntity.friendlyName })}
<button key={vcEntity.id} className={`relative rounded-xl xl:w-4/5 md:w-full sm:w-full overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer w-full mb-2 ${latestCredentials.has(vcEntity.id) ? 'fade-in' : ''}`}
onClick={() => { setShowFullscreenImgPopup(true); setSelectedVcEntity(vcEntity); }}
aria-label={`${vcEntity.friendlyName}`}
tabindex={(currentSlide != index + 1) && -1}
title={t('pageCredentials.credentialFullScreenTitle', { friendlyName: vcEntity.friendlyName })}
>
<CredentialImage credential={vcEntity.credential} className={`w-full h-full object-cover rounded-xl ${latestCredentials.has(vcEntity.id) ? 'highlight-filter' : ''}`} />
</button>
<div className={`transition-all ease-in-out duration-500 ${(currentSlide === index + 1) ? 'max-h-auto opacity-100' : 'hidden max-h-0 opacity-0'}`}>
<div className="flex items-center justify-end">
<span className="mr-4 dark:text-white">{currentSlide} of {vcEntityList.length}</span>
<button
onClick={() => sliderRef.current.slickPrev()}
aria-label={currentSlide === 1 ? t('pageCredentials.slideButtonAriaLabelDisable', { direction: t('pageCredentials.slidePrevious') }) : t('pageCredentials.slideButtonAriaLabelEnable', { direction: t('pageCredentials.slidePrevious') })}
title={currentSlide === 1 ? t('pageCredentials.slideButtonTitleDisable', { direction: t('pageCredentials.slidePrevious') }) : t('pageCredentials.slideButtonTitleEnable', { direction: t('pageCredentials.slidePrevious') })}
disabled={currentSlide === 1}
className={`${currentSlide === 1 ? 'opacity-50 cursor-not-allowed dark:text-gray-400' : 'text-primary dark:text-white hover:text-primary-hover dark:hover:text-gray-300'}`}
>
<CredentialImage credential={vcEntity.credential} className={`w-full h-full object-cover rounded-xl ${latestCredentials.has(vcEntity.id) ? 'highlight-filter' : ''}`} />
</Tag>
))}
<div className="flex items-center justify-end">
<span className="mr-4 dark:text-white">{currentSlide} of {vcEntityList.length}</span>
<button
onClick={() => sliderRef.current.slickPrev()}
aria-label={currentSlide === 1 ? t('pageCredentials.slideButtonAriaLabelDisable', { direction: t('pageCredentials.slidePrevious') }) : t('pageCredentials.slideButtonAriaLabelEnable', { direction: t('pageCredentials.slidePrevious') })}
title={currentSlide === 1 ? t('pageCredentials.slideButtonTitleDisable', { direction: t('pageCredentials.slidePrevious') }) : t('pageCredentials.slideButtonTitleEnable', { direction: t('pageCredentials.slidePrevious') })}
disabled={currentSlide === 1}
className={`${currentSlide === 1 ? 'opacity-50 cursor-not-allowed dark:text-gray-400' : 'text-primary dark:text-white hover:text-primary-hover dark:hover:text-gray-300'}`}
>
<BiLeftArrow size={22} />
</button>
<button
onClick={() => sliderRef.current.slickNext()}
aria-label={currentSlide === vcEntityList.length ? t('pageCredentials.slideButtonAriaLabelDisable', { direction: t('pageCredentials.slideNext') }) : t('pageCredentials.slideButtonAriaLabelEnable', { direction: t('pageCredentials.slideNext') })}
title={currentSlide === vcEntityList.length ? t('pageCredentials.slideButtonTitleDisable', { direction: t('pageCredentials.slideNext') }) : t('pageCredentials.slideButtonTitleEnable', { direction: t('pageCredentials.slideNext') })}
disabled={currentSlide === vcEntityList.length}
className={`${currentSlide === vcEntityList.length ? 'opacity-50 cursor-not-allowed dark:text-gray-400' : 'text-primary dark:text-white hover:text-primary-hover dark:hover:text-gray-300'}`}
>
<BiRightArrow size={22} />
</button>
</div>
<div className={`transition-all ease-in-out duration-500 ${(currentSlide === index + 1) ? 'max-h-auto opacity-100' : 'max-h-0 opacity-0'}`}>
<BiLeftArrow size={22} />
</button>
<button
onClick={() => sliderRef.current.slickNext()}
aria-label={currentSlide === vcEntityList.length ? t('pageCredentials.slideButtonAriaLabelDisable', { direction: t('pageCredentials.slideNext') }) : t('pageCredentials.slideButtonAriaLabelEnable', { direction: t('pageCredentials.slideNext') })}
title={currentSlide === vcEntityList.length ? t('pageCredentials.slideButtonTitleDisable', { direction: t('pageCredentials.slideNext') }) : t('pageCredentials.slideButtonTitleEnable', { direction: t('pageCredentials.slideNext') })}
disabled={currentSlide === vcEntityList.length}
className={`${currentSlide === vcEntityList.length ? 'opacity-50 cursor-not-allowed dark:text-gray-400' : 'text-primary dark:text-white hover:text-primary-hover dark:hover:text-gray-300'}`}
>
<BiRightArrow size={22} />
</button>
</div>
<CredentialInfo credential={vcEntity.credential} />
<CredentialDeleteButton onDelete={() => { setShowDeletePopup(true); setSelectedVcEntity(vcEntity); }} />
<CredentialJson credential={vcEntity.credential} />
Expand Down

0 comments on commit 8ad6b6f

Please sign in to comment.