Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement: Accessibility issues on the Welcome page #3173

Merged
merged 5 commits into from
Sep 23, 2024
Merged

Enhancement: Accessibility issues on the Welcome page #3173

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
12c9957
fix: accessibility issue in Welcome page
shrilakshmishastry Mar 23, 2024
8c026fc
Merge remote-tracking branch 'origin/main' into pr-1906
Pragadesh-45 Sep 23, 2024
befad7e
enhance: accessibility over the buttons on the welcome page
Pragadesh-45 Sep 23, 2024
753f23f
Merge remote-tracking branch 'origin/main' into pr-1906
Pragadesh-45 Sep 23, 2024
8b82662
chore: fix translations
Pragadesh-45 Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 46 additions & 19 deletions packages/bruno-app/src/components/Welcome/index.js
View file
Open in desktop
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