fix: small "show more" button, a11y issue (#565)
parent
53109e7f23
commit
e16b7dd9fe
|
@ -11,11 +11,11 @@ watchEffect(() => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-if="enabled" flex flex-col items-start>
|
<div v-if="enabled" flex flex-col items-start>
|
||||||
<div class="content-rich" px-4 pb-2 text-center text-secondary text-sm w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
|
<div class="content-rich" px-4 pb-2.5 text-center text-secondary w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
|
||||||
<slot name="spoiler" />
|
<slot name="spoiler" />
|
||||||
</div>
|
</div>
|
||||||
<div flex="~ gap-1 center" w-full mt="-3.5">
|
<div flex="~ gap-1 center" w-full mt="-4.5">
|
||||||
<button btn-text px-2 py-1 text-3 bg-base flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
|
<button btn-text px-2 py-1 bg-base flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
|
||||||
<div v-if="showContent" i-ri:eye-line />
|
<div v-if="showContent" i-ri:eye-line />
|
||||||
<div v-else i-ri:eye-close-line />
|
<div v-else i-ri:eye-close-line />
|
||||||
{{ showContent ? $t('status.spoiler_show_less') : $t(filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more') }}
|
{{ showContent ? $t('status.spoiler_show_less') : $t(filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more') }}
|
||||||
|
|
Loading…
Reference in New Issue