Skip to content

Commit

Permalink
Enhancement: Accessibility issues on the Welcome page (#3173)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
  • Loading branch information
Pragadesh-45 and shrilakshmishastry authored Sep 23, 2024
1 parent 641f261 commit 4ef5534
Showing 1 changed file with 46 additions and 19 deletions.
65 changes: 46 additions & 19 deletions packages/bruno-app/src/components/Welcome/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand Down Expand Up @@ -64,48 +62,77 @@ const Welcome = () => {
/>
) : null}

<div>
<div aria-hidden className="">
<Bruno width={50} />
</div>
<div className="text-xl font-semibold select-none">bruno</div>
<div className="mt-4">{t('WELCOME.ABOUT_BRUNO')}</div>

<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>
Expand Down

0 comments on commit 4ef5534

Please sign in to comment.