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

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

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

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

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

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

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

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

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

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

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