forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: add screen reader text for outdated deps
+20
-6
+20
-6
app/components/PackageDependencies.vue
+20
-6
app/components/PackageDependencies.vue
···
81
81
>
82
82
{{ dep }}
83
83
</NuxtLink>
84
-
<span
85
-
class="font-mono text-xs text-right truncate"
86
-
:class="getVersionClass(outdatedDeps[dep])"
87
-
:title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
88
-
>
89
-
{{ version }}
84
+
<span class="flex items-center gap-1">
85
+
<span
86
+
v-if="outdatedDeps[dep]"
87
+
class="shrink-0"
88
+
:class="getVersionClass(outdatedDeps[dep])"
89
+
:title="getOutdatedTooltip(outdatedDeps[dep])"
90
+
aria-hidden="true"
91
+
>
92
+
<span class="i-carbon-warning-alt w-3 h-3" />
93
+
</span>
94
+
<span
95
+
class="font-mono text-xs text-right truncate"
96
+
:class="getVersionClass(outdatedDeps[dep])"
97
+
:title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
98
+
>
99
+
{{ version }}
100
+
</span>
101
+
<span v-if="outdatedDeps[dep]" class="sr-only">
102
+
({{ getOutdatedTooltip(outdatedDeps[dep]) }})
103
+
</span>
90
104
</span>
91
105
</li>
92
106
</ul>