btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor(ui): a11y improvements

Browse Source
This commit is contained in:
liyasthomas
2021-08-06 21:40:26 +05:30
parent 3a96eb003b
commit 346ece94b7
31 changed files with 59 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/app/Footer.vue
View File

@@ -26,7 +26,6 @@
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
@@ -97,7 +96,8 @@
v-tippy="{ theme: 'tooltip' }"
:title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
icon="menu_open"
:class="['transform rotate-180', { 'rotate-0': !RIGHT_SIDEBAR }]"
class="transform rotate-180"
:class="{ 'rotate-0': !RIGHT_SIDEBAR }"
@click.native="toggleSetting('RIGHT_SIDEBAR')"
/>
</div>

22
components/app/Header.vue
View File

@@ -15,21 +15,13 @@
icon="offline_bolt"
@click.native="showInstallPrompt()"
/>
<span tabindex="-1">
<ButtonPrimary
v-if="currentUser === null"
label="Login"
@click.native="showLogin = true"
/>
<tippy
v-else
ref="user"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<ButtonPrimary
v-if="currentUser === null"
label="Login"
@click.native="showLogin = true"
/>
<span v-else>
<tippy ref="user" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ProfilePicture
v-if="currentUser.photoURL"

1
components/app/Sidenav.vue
View File

@@ -63,6 +63,7 @@ export default {
@apply justify-center;
@apply transition;
@apply hover:(bg-primaryDark text-secondaryDark);
@apply focus-visible:(ring ring-inset ring-accent);
.material-icons,
.svg-icons {

4
components/button/Primary.vue
View File

@@ -41,8 +41,8 @@
>
<i
v-if="icon"
class="material-icons"
:class="[
'material-icons',
{ '!text-2xl': large },
label ? (reverse ? 'ml-2' : 'mr-2') : '',
]"
@@ -52,8 +52,8 @@
<SmartIcon
v-if="svg"
:name="svg"
class="svg-icons"
:class="[
'svg-icons',
{ '!h-6 !w-6': large },
label ? (reverse ? 'ml-2' : 'mr-2') : '',
]"

4
components/button/Secondary.vue
View File

@@ -31,8 +31,8 @@
>
<i
v-if="icon"
class="material-icons"
:class="[
'material-icons',
{ '!text-2xl': large },
label ? (reverse ? 'ml-2' : 'mr-2') : '',
]"
@@ -42,8 +42,8 @@
<SmartIcon
v-if="svg"
:name="svg"
class="svg-icons"
:class="[
'svg-icons',
{ '!h-6 !w-6': large },
label ? (reverse ? 'ml-2' : 'mr-2') : '',
]"

1
components/collections/ImportExport.vue
View File

@@ -19,7 +19,6 @@
"
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow

9
components/collections/graphql/Collection.vue
View File

@@ -44,14 +44,7 @@
})
"
/>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

9
components/collections/graphql/Folder.vue
View File

@@ -42,14 +42,7 @@
class="group-hover:inline-flex hidden"
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

9
components/collections/graphql/ImportExport.vue
View File

@@ -3,14 +3,7 @@
<template #header>
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div class="flex">
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<TabPrimary
v-tippy="{ theme: 'tooltip' }"

9
components/collections/graphql/Request.vue
View File

@@ -49,14 +49,7 @@
class="group-hover:inline-flex hidden"
@click.native="!doc ? selectRequest() : {}"
/>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

9
components/collections/my/Collection.vue
View File

@@ -62,14 +62,7 @@
})
"
/>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

9
components/collections/my/Folder.vue
View File

@@ -42,14 +42,7 @@
class="group-hover:inline-flex hidden"
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

9
components/collections/my/Request.vue
View File

@@ -57,14 +57,7 @@
class="group-hover:inline-flex hidden"
@click.native="!doc ? selectRequest() : {}"
/>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

1
components/collections/teams/Collection.vue
View File

@@ -58,7 +58,6 @@
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow

1
components/collections/teams/Folder.vue
View File

@@ -39,7 +39,6 @@
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow

1
components/collections/teams/Request.vue
View File

@@ -54,7 +54,6 @@
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow

9
components/environments/Environment.vue
View File

@@ -25,14 +25,7 @@
</span>
</span>
<span>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

9
components/environments/ImportExport.vue
View File

@@ -5,14 +5,7 @@
{{ $t("import_export") }} {{ $t("environments") }}
</h3>
<div class="flex">
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<TabPrimary
v-tippy="{ theme: 'tooltip' }"

15
components/firebase/Login.vue
View File

@@ -55,7 +55,6 @@
: true
"
type="button"
tabindex="-1"
:label="$t('auth.send_magic_link')"
@click.native="signInWithEmail"
/>
@@ -79,9 +78,19 @@
<template #footer>
<p v-if="mode === 'sign-in'" class="text-secondaryLight">
By signing in, you are agreeing to our
<SmartAnchor class="link" to="/index" label="Terms of Service" />
<SmartAnchor
class="link"
to="https://github.com/hoppscotch/hoppscotch/wiki/Terms-&-Conditions"
blank
label="Terms of Service"
/>
and
<SmartAnchor class="link" to="/index" label="Privacy Policy" />.
<SmartAnchor
class="link"
to="https://github.com/hoppscotch/hoppscotch/wiki/Privacy-Policy"
blank
label="Privacy Policy"
/>.
</p>
<p v-if="mode === 'email'" class="text-secondaryLight">
<SmartAnchor

1
components/http/Body.vue
View File

@@ -4,7 +4,6 @@
<tippy
ref="contentTypeOptions"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow

1
components/http/CodegenModal.vue
View File

@@ -14,7 +14,6 @@
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow

3
components/http/Request.vue
View File

@@ -5,7 +5,6 @@
<tippy
ref="methodOptions"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
@@ -99,7 +98,6 @@
<tippy
ref="sendOptions"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
@@ -149,7 +147,6 @@
<tippy
ref="saveOptions"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow

15
components/profile/Picture.vue
View File

@@ -17,10 +17,17 @@
<div class="rounded-full shadow-inner inset-0 absolute"></div>
<span
v-if="indicator"
:class="[
'border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute',
indicatorStyles,
]"
class="
border-primary
rounded-full
border-2
h-2.5
-top-0.5
-right-0.5
w-2.5
absolute
"
:class="indicatorStyles"
></span>
</div>
</template>

1
components/smart/AceEditor.vue
View File

@@ -41,7 +41,6 @@
v-if="siblingDropDownIndex == index"
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow

9
components/smart/ChangeLanguage.vue
View File

@@ -1,14 +1,7 @@
<template>
<span class="inline-flex">
<span class="select-wrapper">
<tippy
ref="language"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<tippy ref="language" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

9
components/smart/FontSizePicker.vue
View File

@@ -1,14 +1,7 @@
<template>
<span class="inline-flex">
<span class="select-wrapper">
<tippy
ref="fontSize"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<tippy ref="fontSize" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

2
components/smart/Tabs.vue
View File

@@ -8,7 +8,7 @@
:key="`tab-${index}`"
class="tab"
:class="{ active: tab.active }"
:tabindex="0"
tabindex="0"
@keyup.enter="selectTab(tab)"
@click="selectTab(tab)"
>

2
components/teams/Edit.vue
View File

@@ -58,7 +58,6 @@
<tippy
ref="memberOptions"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
@@ -146,7 +145,6 @@
<tippy
ref="newMemberOptions"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow

9
components/teams/Team.vue
View File

@@ -25,14 +25,7 @@
</div>
</div>
<span>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"