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

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

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