extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-07 16:44:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Enhancement: Accessibility issues on the Welcome page (#3173)

Browse Source 
* 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:
Pragadesh-45 2024-09-23 17:54:24 +05:30 committed by GitHub
parent 641f261733
commit 4ef5534d41
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 46 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
packages/bruno-app/src/components/Welcome/index.js
View File

@ -21,9 +21,7 @@ const Welcome = () => {
const [importCollectionLocationModalOpen, setImportCollectionLocationModalOpen] = useState(false); const [importCollectionLocationModalOpen, setImportCollectionLocationModalOpen] = useState(false);
const handleOpenCollection = () => { const handleOpenCollection = () => {
dispatch(openCollection()).catch( dispatch(openCollection()).catch((err) => console.log(err) && toast.error(t('WELCOME.COLLECTION_OPEN_ERROR')));
(err) => console.log(err) && toast.error(t('WELCOME.COLLECTION_OPEN_ERROR'))
);
}; };
const handleImportCollection = ({ collection, translationLog }) => { const handleImportCollection = ({ collection, translationLog }) => {
@ -64,7 +62,7 @@ const Welcome = () => {
/> />
) : null} ) : null}
<div> <div aria-hidden className="">
<Bruno width={50} /> <Bruno width={50} />
</div> </div>
<div className="text-xl font-semibold select-none">bruno</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="uppercase font-semibold heading mt-10">{t('COMMON.COLLECTIONS')}</div>
<div className="mt-4 flex items-center collection-options select-none"> <div className="mt-4 flex items-center collection-options select-none">
<div className="flex items-center" onClick={() => setCreateCollectionModalOpen(true)}> <button
<IconPlus size={18} strokeWidth={2} /> 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"> <span className="label ml-2" id="create-collection">
{t('WELCOME.CREATE_COLLECTION')} {t('WELCOME.CREATE_COLLECTION')}
</span> </span>
</div> </button>
<div className="flex items-center ml-6" onClick={handleOpenCollection}>
<IconFolders size={18} strokeWidth={2} /> <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> <span className="label ml-2">{t('WELCOME.OPEN_COLLECTION')}</span>
</div> </button>
<div className="flex items-center ml-6" onClick={() => setImportCollectionModalOpen(true)}>
<IconDownload size={18} strokeWidth={2} /> <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"> <span className="label ml-2" id="import-collection">
{t('WELCOME.IMPORT_COLLECTION')} {t('WELCOME.IMPORT_COLLECTION')}
</span> </span>
</div> </button>
</div> </div>
<div className="uppercase font-semibold heading mt-10 pt-6">{t('WELCOME.LINKS')}</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="mt-4 flex flex-col collection-options select-none">
<div className="flex items-center mt-2"> <div className="flex items-center mt-2">
<a href="https://docs.usebruno.com" target="_blank" className="inline-flex items-center"> <a
<IconBook size={18} strokeWidth={2} /> 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> <span className="label ml-2">{t('COMMON.DOCUMENTATION')}</span>
</a> </a>
</div> </div>
<div className="flex items-center mt-2"> <div className="flex items-center mt-2">
<a href="https://github.com/usebruno/bruno/issues" target="_blank" className="inline-flex items-center"> <a
<IconSpeakerphone size={18} strokeWidth={2} /> 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> <span className="label ml-2">{t('COMMON.REPORT_ISSUES')}</span>
</a> </a>
</div> </div>
<div className="flex items-center mt-2"> <div className="flex items-center mt-2">
<a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-center"> <a
<IconBrandGithub size={18} strokeWidth={2} /> 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> <span className="label ml-2">{t('COMMON.GITHUB')}</span>
</a> </a>
</div> </div>