javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-12-19 09:09:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve playground link accessibility (#22995)

Browse Source 
* docs: improve playground link accessibility

* improvement: apply suggestion

Co-authored-by: rzzf <cszhjh@gmail.com>

---------

Co-authored-by: rzzf <cszhjh@gmail.com>
This commit is contained in:
Noblet Ouways
2025-12-04 23:32:12 +01:00
committed by GitHub
parent 39013a96c8
commit 8f5cc7dd5b
1 changed files with 13 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/.vitepress/vitepress/components/vp-demo.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed, getCurrentInstance, ref, toRef } from 'vue'
import { isClient, useClipboard, useToggle } from '@vueuse/core'
import { useClipboard, useToggle } from '@vueuse/core'
import { EVENT_CODE } from 'element-plus'
import { CaretTop } from '@element-plus/icons-vue'
import { useLang } from '../composables/lang'
@@ -26,18 +26,13 @@ const { copy, isSupported } = useClipboard({
const [sourceVisible, toggleSourceVisible] = useToggle()
const lang = useLang()
const demoSourceUrl = useSourceCode(toRef(props, 'path'))
const { link: playgroundUrl } = usePlayground(props.rawSource)
const sourceCodeRef = ref<HTMLButtonElement>()
const locale = computed(() => demoBlockLocale[lang.value])
const decodedDescription = computed(() => decodeURIComponent(props.description))
const onPlaygroundClick = () => {
const { link } = usePlayground(props.rawSource)
if (!isClient) return
window.open(link)
}
const onSourceVisibleKeydown = (e: KeyboardEvent) => {
if (
[EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space].includes(
@@ -82,17 +77,15 @@ const copyCode = async () => {
:trigger="['hover', 'focus']"
:trigger-keys="[]"
>
<ElIcon
:size="16"
:aria-label="locale['edit-in-editor']"
tabindex="0"
role="link"
class="op-btn"
@click="onPlaygroundClick"
@keydown.prevent.enter="onPlaygroundClick"
@keydown.prevent.space="onPlaygroundClick"
>
<i-ri-flask-line />
<ElIcon :size="16" class="op-btn">
<a
:href="playgroundUrl"
:aria-label="locale['edit-in-editor']"
rel="noreferrer noopener"
target="_blank"
>
<i-ri-flask-line />
</a>
</ElIcon>
</ElTooltip>
<ElTooltip
@@ -101,11 +94,7 @@ const copyCode = async () => {
:trigger="['hover', 'focus']"
:trigger-keys="[]"
>
<ElIcon
:size="16"
class="op-btn github"
style="color: var(--text-color-light)"
>
<ElIcon :size="16" class="op-btn github">
<a
:href="demoSourceUrl"
:aria-label="locale['edit-on-github']"
@@ -213,7 +202,7 @@ const copyCode = async () => {
color: var(--text-color-lighter);
transition: 0.2s;
&.github a {
a {
transition: 0.2s;
color: var(--text-color-lighter);