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

chore(a11y): improve component roles

Browse Source
This commit is contained in:
liyasthomas
2022-03-01 12:11:53 +05:30
parent b3d0d4d86b
commit 9bd55b6db5
39 changed files with 498 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/hoppscotch-app/components/app/Announcement.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<div <div
class="relative flex items-center px-4 py-2 transition bg-error text-tiny group" class="relative flex items-center px-4 py-2 transition bg-error text-tiny group"
role="alert"
> >
<i class="mr-2 material-icons">info_outline</i> <i class="mr-2 material-icons">info_outline</i>
<span class="text-secondaryDark"> <span class="text-secondaryDark">

1
packages/hoppscotch-app/components/app/Footer.vue
View File

@@ -59,6 +59,7 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.d="documentation.$el.click()" @keyup.d="documentation.$el.click()"
@keyup.s="shortcuts.$el.click()" @keyup.s="shortcuts.$el.click()"
@keyup.c="chat.$el.click()" @keyup.c="chat.$el.click()"

2
packages/hoppscotch-app/components/app/Header.vue
View File

@@ -87,7 +87,7 @@
svg="user" svg="user"
/> />
</template> </template>
<div class="flex flex-col px-2 text-tiny"> <div class="flex flex-col px-2 text-tiny" role="menu">
<span class="inline-flex font-semibold truncate"> <span class="inline-flex font-semibold truncate">
{{ currentUser.displayName }} {{ currentUser.displayName }}
</span> </span>

40
packages/hoppscotch-app/components/app/Sidenav.vue
View File

@@ -1,24 +1,28 @@
<template> <template>
<aside class="flex justify-between h-full md:flex-col"> <aside class="flex justify-between h-full md:flex-col">
<nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none"> <nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none">
<NuxtLink <ul>
v-for="(navigation, index) in primaryNavigation" <li>
:key="`navigation-${index}`" <NuxtLink
:to="localePath(navigation.target)" v-for="(navigation, index) in primaryNavigation"
class="nav-link" :key="`navigation-${index}`"
tabindex="0" :to="localePath(navigation.target)"
> class="nav-link"
<div v-if="navigation.svg"> tabindex="0"
<SmartIcon :name="navigation.svg" class="svg-icons" /> >
</div> <div v-if="navigation.svg">
<span v-if="EXPAND_NAVIGATION">{{ navigation.title }}</span> <SmartIcon :name="navigation.svg" class="svg-icons" />
<tippy </div>
v-if="!EXPAND_NAVIGATION" <span v-if="EXPAND_NAVIGATION">{{ navigation.title }}</span>
:placement="mdAndLarger ? 'right' : 'bottom'" <tippy
theme="tooltip" v-if="!EXPAND_NAVIGATION"
:content="navigation.title" :placement="mdAndLarger ? 'right' : 'bottom'"
/> theme="tooltip"
</NuxtLink> :content="navigation.title"
/>
</NuxtLink>
</li>
</ul>
</nav> </nav>
</aside> </aside>
</template> </template>

1
packages/hoppscotch-app/components/button/Primary.vue
View File

@@ -26,6 +26,7 @@
:disabled="disabled" :disabled="disabled"
:tabindex="loading ? '-1' : '0'" :tabindex="loading ? '-1' : '0'"
:type="type" :type="type"
role="button"
> >
<span <span
v-if="!loading" v-if="!loading"

1
packages/hoppscotch-app/components/button/Secondary.vue
View File

@@ -25,6 +25,7 @@
]" ]"
:disabled="disabled" :disabled="disabled"
:tabindex="loading ? '-1' : '0'" :tabindex="loading ? '-1' : '0'"
role="button"
> >
<span <span
v-if="!loading" v-if="!loading"

34
packages/hoppscotch-app/components/collections/ChooseType.vue
View File

@@ -39,22 +39,24 @@
/> />
</span> </span>
</template> </template>
<SmartItem <div class="flex flex-col" role="menu">
v-for="(team, index) in myTeams" <SmartItem
:key="`team-${index}`" v-for="(team, index) in myTeams"
:label="team.name" :key="`team-${index}`"
:info-icon=" :label="team.name"
team.id === collectionsType.selectedTeam?.id ? 'done' : '' :info-icon="
" team.id === collectionsType.selectedTeam?.id ? 'done' : ''
:active-info-icon="team.id === collectionsType.selectedTeam?.id" "
svg="users" :active-info-icon="team.id === collectionsType.selectedTeam?.id"
@click.native=" svg="users"
() => { @click.native="
updateSelectedTeam(team) () => {
options.tippy().hide() updateSelectedTeam(team)
} options.tippy().hide()
" }
/> "
/>
</div>
</tippy> </tippy>
</SmartIntersection> </SmartIntersection>
</SmartTab> </SmartTab>

1
packages/hoppscotch-app/components/collections/graphql/Collection.vue
View File

@@ -60,6 +60,7 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.n="folderAction.$el.click()" @keyup.n="folderAction.$el.click()"
@keyup.e="edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.delete="deleteAction.$el.click()" @keyup.delete="deleteAction.$el.click()"

1
packages/hoppscotch-app/components/collections/graphql/Folder.vue
View File

@@ -56,6 +56,7 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.n="folderAction.$el.click()" @keyup.n="folderAction.$el.click()"
@keyup.e="edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.delete="deleteAction.$el.click()" @keyup.delete="deleteAction.$el.click()"

64
packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
View File

@@ -16,44 +16,46 @@
svg="more-vertical" svg="more-vertical"
/> />
</template> </template>
<SmartItem <div class="flex flex-col" role="menu">
icon="assignment_returned"
:label="t('import.from_gist')"
@click.native="
() => {
readCollectionGist()
options.tippy().hide()
}
"
/>
<span
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
? `${t('export.require_github')}`
: currentUser.provider !== 'github.com'
? `${t('export.require_github')}`
: undefined
"
>
<SmartItem <SmartItem
:disabled=" icon="assignment_returned"
!currentUser :label="t('import.from_gist')"
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="t('export.create_secret_gist')"
@click.native=" @click.native="
() => { () => {
createCollectionGist() readCollectionGist()
options.tippy().hide() options.tippy().hide()
} }
" "
/> />
</span> <span
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
? `${t('export.require_github')}`
: currentUser.provider !== 'github.com'
? `${t('export.require_github')}`
: undefined
"
>
<SmartItem
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="t('export.create_secret_gist')"
@click.native="
() => {
createCollectionGist()
options.tippy().hide()
}
"
/>
</span>
</div>
</tippy> </tippy>
</span> </span>
</template> </template>

1
packages/hoppscotch-app/components/collections/graphql/Request.vue
View File

@@ -56,6 +56,7 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.e="edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.d="duplicate.$el.click()" @keyup.d="duplicate.$el.click()"
@keyup.delete="deleteAction.$el.click()" @keyup.delete="deleteAction.$el.click()"

1
packages/hoppscotch-app/components/collections/my/Collection.vue
View File

@@ -78,6 +78,7 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.n="folderAction.$el.click()" @keyup.n="folderAction.$el.click()"
@keyup.e="edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.delete="deleteAction.$el.click()" @keyup.delete="deleteAction.$el.click()"

1
packages/hoppscotch-app/components/collections/my/Folder.vue
View File

@@ -56,6 +56,7 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.n="folderAction.$el.click()" @keyup.n="folderAction.$el.click()"
@keyup.e="edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.delete="deleteAction.$el.click()" @keyup.delete="deleteAction.$el.click()"

1
packages/hoppscotch-app/components/collections/my/Request.vue
View File

@@ -80,6 +80,7 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.e="edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.d="duplicate.$el.click()" @keyup.d="duplicate.$el.click()"
@keyup.delete="deleteAction.$el.click()" @keyup.delete="deleteAction.$el.click()"

1
packages/hoppscotch-app/components/collections/teams/Collection.vue
View File

@@ -79,6 +79,7 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.n="folderAction.$el.click()" @keyup.n="folderAction.$el.click()"
@keyup.e="edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.delete="deleteAction.$el.click()" @keyup.delete="deleteAction.$el.click()"

1
packages/hoppscotch-app/components/collections/teams/Folder.vue
View File

@@ -58,6 +58,7 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.n="folderAction.$el.click()" @keyup.n="folderAction.$el.click()"
@keyup.e="edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.delete="deleteAction.$el.click()" @keyup.delete="deleteAction.$el.click()"

1
packages/hoppscotch-app/components/collections/teams/Request.vue
View File

@@ -80,6 +80,7 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.e="edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.d="duplicate.$el.click()" @keyup.d="duplicate.$el.click()"
@keyup.delete="deleteAction.$el.click()" @keyup.delete="deleteAction.$el.click()"

1
packages/hoppscotch-app/components/environments/Environment.vue
View File

@@ -37,6 +37,7 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.e="edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.d="duplicate.$el.click()" @keyup.d="duplicate.$el.click()"
@keyup.delete=" @keyup.delete="

64
packages/hoppscotch-app/components/environments/ImportExport.vue
View File

@@ -16,44 +16,46 @@
svg="more-vertical" svg="more-vertical"
/> />
</template> </template>
<SmartItem <div class="flex flex-col" role="menu">
icon="assignment_returned"
:label="t('import.from_gist')"
@click.native="
() => {
readEnvironmentGist()
options.tippy().hide()
}
"
/>
<span
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
? `${t('export.require_github')}`
: currentUser.provider !== 'github.com'
? `${t('export.require_github')}`
: undefined
"
>
<SmartItem <SmartItem
:disabled=" icon="assignment_returned"
!currentUser :label="t('import.from_gist')"
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="t('export.create_secret_gist')"
@click.native=" @click.native="
() => { () => {
createEnvironmentGist() readEnvironmentGist()
options.tippy().hide() options.tippy().hide()
} }
" "
/> />
</span> <span
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
? `${t('export.require_github')}`
: currentUser.provider !== 'github.com'
? `${t('export.require_github')}`
: undefined
"
>
<SmartItem
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="t('export.create_secret_gist')"
@click.native="
() => {
createEnvironmentGist()
options.tippy().hide()
}
"
/>
</span>
</div>
</tippy> </tippy>
</span> </span>
</template> </template>

52
packages/hoppscotch-app/components/environments/index.vue
View File

@@ -20,31 +20,33 @@
/> />
</span> </span>
</template> </template>
<SmartItem <div class="flex flex-col" role="menu">
:label="`${$t('environment.no_environment')}`" <SmartItem
:info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''" :label="`${$t('environment.no_environment')}`"
:active-info-icon="selectedEnvironmentIndex === -1" :info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
@click.native=" :active-info-icon="selectedEnvironmentIndex === -1"
() => { @click.native="
selectedEnvironmentIndex = -1 () => {
$refs.options.tippy().hide() selectedEnvironmentIndex = -1
} $refs.options.tippy().hide()
" }
/> "
<hr /> />
<SmartItem <hr />
v-for="(gen, index) in environments" <SmartItem
:key="`gen-${index}`" v-for="(gen, index) in environments"
:label="gen.name" :key="`gen-${index}`"
:info-icon="index === selectedEnvironmentIndex ? 'done' : ''" :label="gen.name"
:active-info-icon="index === selectedEnvironmentIndex" :info-icon="index === selectedEnvironmentIndex ? 'done' : ''"
@click.native=" :active-info-icon="index === selectedEnvironmentIndex"
() => { @click.native="
selectedEnvironmentIndex = index () => {
$refs.options.tippy().hide() selectedEnvironmentIndex = index
} $refs.options.tippy().hide()
" }
/> "
/>
</div>
</tippy> </tippy>
<div class="flex justify-between flex-1 border-b border-dividerLight"> <div class="flex justify-between flex-1 border-b border-dividerLight">
<ButtonSecondary <ButtonSecondary

214
packages/hoppscotch-app/components/http/Authorization.vue
View File

@@ -22,81 +22,83 @@
/> />
</span> </span>
</template> </template>
<SmartItem <div class="flex flex-col" role="menu">
label="None" <SmartItem
:icon=" label="None"
authName === 'None' :icon="
? 'radio_button_checked' authName === 'None'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="authName === 'None'" "
@click.native=" :active="authName === 'None'"
() => { @click.native="
authType = 'none' () => {
authTypeOptions.tippy().hide() authType = 'none'
} authTypeOptions.tippy().hide()
" }
/> "
<SmartItem />
label="Basic Auth" <SmartItem
:icon=" label="Basic Auth"
authName === 'Basic Auth' :icon="
? 'radio_button_checked' authName === 'Basic Auth'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="authName === 'Basic Auth'" "
@click.native=" :active="authName === 'Basic Auth'"
() => { @click.native="
authType = 'basic' () => {
authTypeOptions.tippy().hide() authType = 'basic'
} authTypeOptions.tippy().hide()
" }
/> "
<SmartItem />
label="Bearer Token" <SmartItem
:icon=" label="Bearer Token"
authName === 'Bearer' :icon="
? 'radio_button_checked' authName === 'Bearer'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="authName === 'Bearer'" "
@click.native=" :active="authName === 'Bearer'"
() => { @click.native="
authType = 'bearer' () => {
authTypeOptions.tippy().hide() authType = 'bearer'
} authTypeOptions.tippy().hide()
" }
/> "
<SmartItem />
label="OAuth 2.0" <SmartItem
:icon=" label="OAuth 2.0"
authName === 'OAuth 2.0' :icon="
? 'radio_button_checked' authName === 'OAuth 2.0'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="authName === 'OAuth 2.0'" "
@click.native=" :active="authName === 'OAuth 2.0'"
() => { @click.native="
authType = 'oauth-2' () => {
authTypeOptions.tippy().hide() authType = 'oauth-2'
} authTypeOptions.tippy().hide()
" }
/> "
<SmartItem />
label="API key" <SmartItem
:icon=" label="API key"
authName === 'API key' :icon="
? 'radio_button_checked' authName === 'API key'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="authName === 'API key'" "
@click.native=" :active="authName === 'API key'"
() => { @click.native="
authType = 'api-key' () => {
authTypeOptions.tippy().hide() authType = 'api-key'
} authTypeOptions.tippy().hide()
" }
/> "
/>
</div>
</tippy> </tippy>
</span> </span>
<div class="flex"> <div class="flex">
@@ -204,36 +206,38 @@
/> />
</span> </span>
</template> </template>
<SmartItem <div class="flex flex-col" role="menu">
:icon=" <SmartItem
addTo === 'Headers' :icon="
? 'radio_button_checked' addTo === 'Headers'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="addTo === 'Headers'" "
:label="'Headers'" :active="addTo === 'Headers'"
@click.native=" :label="'Headers'"
() => { @click.native="
addTo = 'Headers' () => {
addToOptions.tippy().hide() addTo = 'Headers'
} addToOptions.tippy().hide()
" }
/> "
<SmartItem />
:icon=" <SmartItem
addTo === 'Query params' :icon="
? 'radio_button_checked' addTo === 'Query params'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="addTo === 'Query params'" "
:label="'Query params'" :active="addTo === 'Query params'"
@click.native=" :label="'Query params'"
() => { @click.native="
addTo = 'Query params' () => {
addToOptions.tippy().hide() addTo = 'Query params'
} addToOptions.tippy().hide()
" }
/> "
/>
</div>
</tippy> </tippy>
</div> </div>
</div> </div>

50
packages/hoppscotch-app/components/http/Body.vue
View File

@@ -22,30 +22,32 @@
/> />
</span> </span>
</template> </template>
<SmartItem <div class="flex flex-col" role="menu">
:label="$t('state.none').toLowerCase()" <SmartItem
:info-icon="contentType === null ? 'done' : ''" :label="$t('state.none').toLowerCase()"
:active-info-icon="contentType === null" :info-icon="contentType === null ? 'done' : ''"
@click.native=" :active-info-icon="contentType === null"
() => { @click.native="
contentType = null () => {
$refs.contentTypeOptions.tippy().hide() contentType = null
} $refs.contentTypeOptions.tippy().hide()
" }
/> "
<SmartItem />
v-for="(contentTypeItem, index) in validContentTypes" <SmartItem
:key="`contentTypeItem-${index}`" v-for="(contentTypeItem, index) in validContentTypes"
:label="contentTypeItem" :key="`contentTypeItem-${index}`"
:info-icon="contentTypeItem === contentType ? 'done' : ''" :label="contentTypeItem"
:active-info-icon="contentTypeItem === contentType" :info-icon="contentTypeItem === contentType ? 'done' : ''"
@click.native=" :active-info-icon="contentTypeItem === contentType"
() => { @click.native="
contentType = contentTypeItem () => {
$refs.contentTypeOptions.tippy().hide() contentType = contentTypeItem
} $refs.contentTypeOptions.tippy().hide()
" }
/> "
/>
</div>
</tippy> </tippy>
</span> </span>
</div> </div>

2
packages/hoppscotch-app/components/http/CodegenModal.vue
View File

@@ -31,7 +31,7 @@
:placeholder="`${t('action.search')}`" :placeholder="`${t('action.search')}`"
/> />
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col" role="menu">
<SmartItem <SmartItem
v-for="codegen in filteredCodegenDefinitions" v-for="codegen in filteredCodegenDefinitions"
:key="codegen.name" :key="codegen.name"

16
packages/hoppscotch-app/components/http/Request.vue
View File

@@ -26,12 +26,14 @@
/> />
</span> </span>
</template> </template>
<SmartItem <div class="flex flex-col" role="menu">
v-for="(method, index) in methods" <SmartItem
:key="`method-${index}`" v-for="(method, index) in methods"
:label="method" :key="`method-${index}`"
@click.native="onSelectMethod(method)" :label="method"
/> @click.native="onSelectMethod(method)"
/>
</div>
</tippy> </tippy>
</label> </label>
</div> </div>
@@ -69,6 +71,7 @@
ref="sendTippyActions" ref="sendTippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.c="curl.$el.click()" @keyup.c="curl.$el.click()"
@keyup.s="show.$el.click()" @keyup.s="show.$el.click()"
@keyup.delete="clearAll.$el.click()" @keyup.delete="clearAll.$el.click()"
@@ -150,6 +153,7 @@
ref="saveTippyActions" ref="saveTippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.c="copyRequestAction.$el.click()" @keyup.c="copyRequestAction.$el.click()"
@keyup.s="saveRequestAction.$el.click()" @keyup.s="saveRequestAction.$el.click()"
@keyup.escape="saveOptions.tippy().hide()" @keyup.escape="saveOptions.tippy().hide()"

1
packages/hoppscotch-app/components/http/TestResult.vue
View File

@@ -37,6 +37,7 @@
<div <div
v-if="noEnvSelected && !globalHasAdditions" v-if="noEnvSelected && !globalHasAdditions"
class="flex p-4 bg-error text-secondaryDark" class="flex p-4 bg-error text-secondaryDark"
role="alert"
> >
<i class="mr-4 material-icons"> warning </i> <i class="mr-4 material-icons"> warning </i>
<div class="flex flex-col"> <div class="flex flex-col">

34
packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -51,19 +51,23 @@
arrow arrow
> >
<template #trigger> <template #trigger>
<div v-if="item.kind === 'RootObject'" class="outline">{}</div> <div v-if="item.kind === 'RootObject'" class="outline-item">{}</div>
<div v-if="item.kind === 'RootArray'" class="outline">[]</div> <div v-if="item.kind === 'RootArray'" class="outline-item">[]</div>
<div v-if="item.kind === 'ArrayMember'" class="outline"> <div v-if="item.kind === 'ArrayMember'" class="outline-item">
{{ item.index }} {{ item.index }}
</div> </div>
<div v-if="item.kind === 'ObjectMember'" class="outline"> <div v-if="item.kind === 'ObjectMember'" class="outline-item">
{{ item.name }} {{ item.name }}
</div> </div>
</template> </template>
<div <div
v-if="item.kind === 'ArrayMember' || item.kind === 'ObjectMember'" v-if="item.kind === 'ArrayMember' || item.kind === 'ObjectMember'"
> >
<div v-if="item.kind === 'ArrayMember'" class="flex flex-col"> <div
v-if="item.kind === 'ArrayMember'"
class="flex flex-col"
role="menu"
>
<SmartItem <SmartItem
v-for="(arrayMember, astIndex) in item.astParent.values" v-for="(arrayMember, astIndex) in item.astParent.values"
:key="`ast-${astIndex}`" :key="`ast-${astIndex}`"
@@ -76,7 +80,11 @@
" "
/> />
</div> </div>
<div v-if="item.kind === 'ObjectMember'" class="flex flex-col"> <div
v-if="item.kind === 'ObjectMember'"
class="flex flex-col"
role="menu"
>
<SmartItem <SmartItem
v-for="(objectMember, astIndex) in item.astParent.members" v-for="(objectMember, astIndex) in item.astParent.members"
:key="`ast-${astIndex}`" :key="`ast-${astIndex}`"
@@ -90,7 +98,11 @@
/> />
</div> </div>
</div> </div>
<div v-if="item.kind === 'RootObject'" class="flex flex-col"> <div
v-if="item.kind === 'RootObject'"
class="flex flex-col"
role="menu"
>
<SmartItem <SmartItem
label="{}" label="{}"
@click.native=" @click.native="
@@ -101,7 +113,11 @@
" "
/> />
</div> </div>
<div v-if="item.kind === 'RootArray'" class="flex flex-col"> <div
v-if="item.kind === 'RootArray'"
class="flex flex-col"
role="menu"
>
<SmartItem <SmartItem
label="[]" label="[]"
@click.native=" @click.native="
@@ -206,7 +222,7 @@ const outlinePath = computed(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.outline { .outline-item {
@apply cursor-pointer; @apply cursor-pointer;
@apply flex-grow-0 flex-shrink-0; @apply flex-grow-0 flex-shrink-0;
@apply text-secondaryLight; @apply text-secondaryLight;

76
packages/hoppscotch-app/components/realtime/Socketio.vue
View File

@@ -43,12 +43,14 @@
/> />
</span> </span>
</template> </template>
<SmartItem <div class="flex flex-col" role="menu">
v-for="(_, version) in socketIoClients" <SmartItem
:key="`client-${version}`" v-for="(_, version) in socketIoClients"
:label="`Client ${version}`" :key="`client-${version}`"
@click.native="onSelectVersion(version)" :label="`Client ${version}`"
/> @click.native="onSelectVersion(version)"
/>
</div>
</tippy> </tippy>
</label> </label>
<input <input
@@ -109,36 +111,38 @@
/> />
</span> </span>
</template> </template>
<SmartItem <div class="flex flex-col" role="menu">
label="None" <SmartItem
:icon=" label="None"
authType === 'None' :icon="
? 'radio_button_checked' authType === 'None'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="authType === 'None'" "
@click.native=" :active="authType === 'None'"
() => { @click.native="
authType = 'None' () => {
authTypeOptions.tippy().hide() authType = 'None'
} authTypeOptions.tippy().hide()
" }
/> "
<SmartItem />
label="Bearer Token" <SmartItem
:icon=" label="Bearer Token"
authType === 'Bearer' :icon="
? 'radio_button_checked' authType === 'Bearer'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="authType === 'Bearer'" "
@click.native=" :active="authType === 'Bearer'"
() => { @click.native="
authType = 'Bearer' () => {
authTypeOptions.tippy().hide() authType = 'Bearer'
} authTypeOptions.tippy().hide()
" }
/> "
/>
</div>
</tippy> </tippy>
</span> </span>
<div class="flex"> <div class="flex">

26
packages/hoppscotch-app/components/smart/ChangeLanguage.vue
View File

@@ -15,18 +15,20 @@
/> />
</span> </span>
</template> </template>
<NuxtLink <div class="flex flex-col" role="menu">
v-for="(locale, index) in $i18n.locales" <NuxtLink
:key="`locale-${index}`" v-for="(locale, index) in $i18n.locales"
:to="switchLocalePath(locale.code)" :key="`locale-${index}`"
@click="language.tippy().hide()" :to="switchLocalePath(locale.code)"
> @click="language.tippy().hide()"
<SmartItem >
:label="locale.name" <SmartItem
:active-info-icon="$i18n.locale === locale.code" :label="locale.name"
:info-icon="$i18n.locale === locale.code ? 'done' : null" :active-info-icon="$i18n.locale === locale.code"
/> :info-icon="$i18n.locale === locale.code ? 'done' : null"
</NuxtLink> />
</NuxtLink>
</div>
</tippy> </tippy>
</span> </span>
</template> </template>

2
packages/hoppscotch-app/components/smart/Checkbox.vue
View File

@@ -1,6 +1,8 @@
<template> <template>
<div <div
class="inline-flex items-center justify-center cursor-pointer transition flex-nowrap group hover:text-secondaryDark" class="inline-flex items-center justify-center cursor-pointer transition flex-nowrap group hover:text-secondaryDark"
role="checkbox"
:aria-checked="on"
@click="$emit('change')" @click="$emit('change')"
> >
<input <input

2
packages/hoppscotch-app/components/smart/ConfirmModal.vue
View File

@@ -3,6 +3,8 @@
v-if="show" v-if="show"
dialog dialog
:title="$t('modal.confirm')" :title="$t('modal.confirm')"
role="dialog"
aria-modal="true"
@close="hideModal" @close="hideModal"
> >
<template #body> <template #body>

32
packages/hoppscotch-app/components/smart/FontSizePicker.vue
View File

@@ -15,21 +15,23 @@
/> />
</span> </span>
</template> </template>
<SmartItem <div class="flex flex-col" role="menu">
v-for="(size, index) in fontSizes" <SmartItem
:key="`size-${index}`" v-for="(size, index) in fontSizes"
:label="`${getFontSizeName(size)}`" :key="`size-${index}`"
:icon=" :label="`${getFontSizeName(size)}`"
size === active ? 'radio_button_checked' : 'radio_button_unchecked' :icon="
" size === active ? 'radio_button_checked' : 'radio_button_unchecked'
:active="size === active" "
@click.native=" :active="size === active"
() => { @click.native="
setActiveFont(size) () => {
fontSize.tippy().hide() setActiveFont(size)
} fontSize.tippy().hide()
" }
/> "
/>
</div>
</tippy> </tippy>
</span> </span>
</template> </template>

1
packages/hoppscotch-app/components/smart/Item.vue
View File

@@ -16,6 +16,7 @@
]" ]"
:disabled="disabled" :disabled="disabled"
:tabindex="loading ? '-1' : '0'" :tabindex="loading ? '-1' : '0'"
role="menuitem"
> >
<span <span
v-if="!loading" v-if="!loading"

2
packages/hoppscotch-app/components/smart/Link.js
View File

@@ -28,6 +28,7 @@ const SmartLink = {
switch (tag) { switch (tag) {
case ANCHOR_TAG: case ANCHOR_TAG:
attrs["aria-label"] = "Link" attrs["aria-label"] = "Link"
attrs.role = "link"
// Map `to` prop to the correct attribute // Map `to` prop to the correct attribute
attrs.href = context.props.to attrs.href = context.props.to
@@ -56,6 +57,7 @@ const SmartLink = {
default: default:
attrs["aria-label"] = "Button" attrs["aria-label"] = "Button"
attrs.role = "button"
break break
} }

2
packages/hoppscotch-app/components/smart/Modal.vue
View File

@@ -3,6 +3,8 @@
<div <div
ref="modal" ref="modal"
class="fixed inset-0 z-10 z-50 overflow-y-auto transition hide-scrollbar" class="fixed inset-0 z-10 z-50 overflow-y-auto transition hide-scrollbar"
role="dialog"
aria-modal="true"
> >
<div <div
class="flex items-end justify-center min-h-screen text-center sm:block" class="flex items-end justify-center min-h-screen text-center sm:block"

2
packages/hoppscotch-app/components/smart/Radio.vue
View File

@@ -5,6 +5,8 @@
value === selected ? 'radio_button_checked' : 'radio_button_unchecked' value === selected ? 'radio_button_checked' : 'radio_button_unchecked'
" "
:active="value === selected" :active="value === selected"
role="radio"
:aria-checked="value === selected"
@click.native="$emit('change', value)" @click.native="$emit('change', value)"
/> />
</template> </template>

1
packages/hoppscotch-app/components/smart/Tabs.vue
View File

@@ -19,6 +19,7 @@
class="tab" class="tab"
:class="[{ active: tab.active }, { vertical: vertical }]" :class="[{ active: tab.active }, { vertical: vertical }]"
:aria-label="tab.label" :aria-label="tab.label"
role="button"
@keyup.enter="selectTab(tab)" @keyup.enter="selectTab(tab)"
@click="selectTab(tab)" @click="selectTab(tab)"
> >

92
packages/hoppscotch-app/components/teams/Edit.vue
View File

@@ -104,51 +104,53 @@
/> />
</span> </span>
</template> </template>
<SmartItem <div class="flex flex-col" role="menu">
label="OWNER" <SmartItem
:icon=" label="OWNER"
member.role === 'OWNER' :icon="
? 'radio_button_checked' member.role === 'OWNER'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="member.role === 'OWNER'" "
@click.native=" :active="member.role === 'OWNER'"
() => { @click.native="
updateMemberRole(member.userID, 'OWNER') () => {
memberOptions[index].tippy().hide() updateMemberRole(member.userID, 'OWNER')
} memberOptions[index].tippy().hide()
" }
/> "
<SmartItem />
label="EDITOR" <SmartItem
:icon=" label="EDITOR"
member.role === 'EDITOR' :icon="
? 'radio_button_checked' member.role === 'EDITOR'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="member.role === 'EDITOR'" "
@click.native=" :active="member.role === 'EDITOR'"
() => { @click.native="
updateMemberRole(member.userID, 'EDITOR') () => {
memberOptions[index].tippy().hide() updateMemberRole(member.userID, 'EDITOR')
} memberOptions[index].tippy().hide()
" }
/> "
<SmartItem />
label="VIEWER" <SmartItem
:icon=" label="VIEWER"
member.role === 'VIEWER' :icon="
? 'radio_button_checked' member.role === 'VIEWER'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="member.role === 'VIEWER'" "
@click.native=" :active="member.role === 'VIEWER'"
() => { @click.native="
updateMemberRole(member.userID, 'VIEWER') () => {
memberOptions[index].tippy().hide() updateMemberRole(member.userID, 'VIEWER')
} memberOptions[index].tippy().hide()
" }
/> "
/>
</div>
</tippy> </tippy>
</span> </span>
<div class="flex"> <div class="flex">

92
packages/hoppscotch-app/components/teams/Invite.vue
View File

@@ -160,51 +160,53 @@
/> />
</span> </span>
</template> </template>
<SmartItem <div class="flex flex-col" role="menu">
label="OWNER" <SmartItem
:icon=" label="OWNER"
invitee.value === 'OWNER' :icon="
? 'radio_button_checked' invitee.value === 'OWNER'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="invitee.value === 'OWNER'" "
@click.native=" :active="invitee.value === 'OWNER'"
() => { @click.native="
updateNewInviteeRole(index, 'OWNER') () => {
newInviteeOptions[index].tippy().hide() updateNewInviteeRole(index, 'OWNER')
} newInviteeOptions[index].tippy().hide()
" }
/> "
<SmartItem />
label="EDITOR" <SmartItem
:icon=" label="EDITOR"
invitee.value === 'EDITOR' :icon="
? 'radio_button_checked' invitee.value === 'EDITOR'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="invitee.value === 'EDITOR'" "
@click.native=" :active="invitee.value === 'EDITOR'"
() => { @click.native="
updateNewInviteeRole(index, 'EDITOR') () => {
newInviteeOptions[index].tippy().hide() updateNewInviteeRole(index, 'EDITOR')
} newInviteeOptions[index].tippy().hide()
" }
/> "
<SmartItem />
label="VIEWER" <SmartItem
:icon=" label="VIEWER"
invitee.value === 'VIEWER' :icon="
? 'radio_button_checked' invitee.value === 'VIEWER'
: 'radio_button_unchecked' ? 'radio_button_checked'
" : 'radio_button_unchecked'
:active="invitee.value === 'VIEWER'" "
@click.native=" :active="invitee.value === 'VIEWER'"
() => { @click.native="
updateNewInviteeRole(index, 'VIEWER') () => {
newInviteeOptions[index].tippy().hide() updateNewInviteeRole(index, 'VIEWER')
} newInviteeOptions[index].tippy().hide()
" }
/> "
/>
</div>
</tippy> </tippy>
</span> </span>
<div class="flex"> <div class="flex">

1
packages/hoppscotch-app/components/teams/Team.vue
View File

@@ -86,6 +86,7 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
role="menu"
@keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null" @keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
@keyup.x=" @keyup.x="
!(team.myRole === 'OWNER' && team.ownersCount == 1) !(team.myRole === 'OWNER' && team.ownersCount == 1)