mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-21 23:43:15 +01:00
Enhancement: Accessibility issues on the Welcome page (#3173)
* fix: accessibility issue in Welcome page - use button tag for collection instead of div - hide decorative image for assistive technology - give meaningful label to links in Links section * enhance: accessibility over the buttons on the welcome page * chore: fix translations --------- Co-authored-by: Shrilakshmi Shastry <shrilakshmi.shastry@smallcase.com>
This commit is contained in:
parent
641f261733
commit
4ef5534d41
@ -21,9 +21,7 @@ const Welcome = () => {
|
||||
const [importCollectionLocationModalOpen, setImportCollectionLocationModalOpen] = useState(false);
|
||||
|
||||
const handleOpenCollection = () => {
|
||||
dispatch(openCollection()).catch(
|
||||
(err) => console.log(err) && toast.error(t('WELCOME.COLLECTION_OPEN_ERROR'))
|
||||
);
|
||||
dispatch(openCollection()).catch((err) => console.log(err) && toast.error(t('WELCOME.COLLECTION_OPEN_ERROR')));
|
||||
};
|
||||
|
||||
const handleImportCollection = ({ collection, translationLog }) => {
|
||||
@ -64,7 +62,7 @@ const Welcome = () => {
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<div>
|
||||
<div aria-hidden className="">
|
||||
<Bruno width={50} />
|
||||
</div>
|
||||
<div className="text-xl font-semibold select-none">bruno</div>
|
||||
@ -72,40 +70,69 @@ const Welcome = () => {
|
||||
|
||||
<div className="uppercase font-semibold heading mt-10">{t('COMMON.COLLECTIONS')}</div>
|
||||
<div className="mt-4 flex items-center collection-options select-none">
|
||||
<div className="flex items-center" onClick={() => setCreateCollectionModalOpen(true)}>
|
||||
<IconPlus size={18} strokeWidth={2} />
|
||||
<button
|
||||
className="flex items-center"
|
||||
onClick={() => setCreateCollectionModalOpen(true)}
|
||||
aria-label={t('WELCOME.CREATE_COLLECTION')}
|
||||
>
|
||||
<IconPlus aria-hidden size={18} strokeWidth={2} />
|
||||
<span className="label ml-2" id="create-collection">
|
||||
{t('WELCOME.CREATE_COLLECTION')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center ml-6" onClick={handleOpenCollection}>
|
||||
<IconFolders size={18} strokeWidth={2} />
|
||||
</button>
|
||||
|
||||
<button className="flex items-center ml-6" onClick={handleOpenCollection} aria-label="Open Collection">
|
||||
<IconFolders aria-hidden size={18} strokeWidth={2} />
|
||||
<span className="label ml-2">{t('WELCOME.OPEN_COLLECTION')}</span>
|
||||
</div>
|
||||
<div className="flex items-center ml-6" onClick={() => setImportCollectionModalOpen(true)}>
|
||||
<IconDownload size={18} strokeWidth={2} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="flex items-center ml-6"
|
||||
onClick={() => setImportCollectionModalOpen(true)}
|
||||
aria-label={t('WELCOME.IMPORT_COLLECTION')}
|
||||
>
|
||||
<IconDownload aria-hidden size={18} strokeWidth={2} />
|
||||
<span className="label ml-2" id="import-collection">
|
||||
{t('WELCOME.IMPORT_COLLECTION')}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="uppercase font-semibold heading mt-10 pt-6">{t('WELCOME.LINKS')}</div>
|
||||
<div className="mt-4 flex flex-col collection-options select-none">
|
||||
<div className="flex items-center mt-2">
|
||||
<a href="https://docs.usebruno.com" target="_blank" className="inline-flex items-center">
|
||||
<IconBook size={18} strokeWidth={2} />
|
||||
<a
|
||||
href="https://docs.usebruno.com"
|
||||
aria-label="Read documentation"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center"
|
||||
>
|
||||
<IconBook aria-hidden size={18} strokeWidth={2} />
|
||||
<span className="label ml-2">{t('COMMON.DOCUMENTATION')}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center mt-2">
|
||||
<a href="https://github.com/usebruno/bruno/issues" target="_blank" className="inline-flex items-center">
|
||||
<IconSpeakerphone size={18} strokeWidth={2} />
|
||||
<a
|
||||
href="https://github.com/usebruno/bruno/issues"
|
||||
aria-label="Report issues on GitHub"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center"
|
||||
>
|
||||
<IconSpeakerphone aria-hidden size={18} strokeWidth={2} />
|
||||
<span className="label ml-2">{t('COMMON.REPORT_ISSUES')}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center mt-2">
|
||||
<a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-center">
|
||||
<IconBrandGithub size={18} strokeWidth={2} />
|
||||
<a
|
||||
href="https://github.com/usebruno/bruno"
|
||||
aria-label="Go to GitHub repository"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center"
|
||||
>
|
||||
<IconBrandGithub aria-hidden size={18} strokeWidth={2} />
|
||||
<span className="label ml-2">{t('COMMON.GITHUB')}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user