Skip to content

Commit 49195a6

Browse files
jellydeckjellydeck
committed
outlines in compare, readme, settings
1 parent af5b977 commit 49195a6

8 files changed

Lines changed: 18 additions & 20 deletions

File tree

‎app/assets/main.css‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -199,15 +199,6 @@ input[type='search']:focus-visible {
199199
outline: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
200200
}
201201

202-
/* since we haven't migrated all focus-visible states
203-
we have to keep this otherwise users will get
204-
inconsistent default outlines */
205-
a:focus-visible,
206-
select:focus-visible {
207-
outline: 2px solid var(--accent);
208-
outline-offset: 2px;
209-
}
210-
211202
/* Reset dd margin (browser default is margin-left: 40px) */
212203
dd {
213204
margin: 0;

‎app/components/CollapsibleSection.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ useHead({
106106

107107
<a
108108
:href="`#${id}`"
109-
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
109+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline rounded-sm outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
110110
>
111111
<span v-if="icon" :class="icon" aria-hidden="true" />
112112
{{ title }}

‎app/components/Compare/FacetSelector.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function isCategoryNoneSelected(category: string): boolean {
7777
:disabled="facet.comingSoon"
7878
:aria-pressed="isFacetSelected(facet.id)"
7979
:aria-label="facet.label"
80-
class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:outline-accent/70"
80+
class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:(outline-2 outline-accent outline-offset-2)"
8181
:class="
8282
facet.comingSoon
8383
? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'

‎app/components/Compare/PackageSelector.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ function handleBlur() {
147147
? $t('compare.selector.search_first')
148148
: $t('compare.selector.search_add')
149149
"
150-
class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle motion-reduce:transition-none duration-200 focus:border-accent focus-visible:(outline-2 outline-accent/70)"
150+
class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle motion-reduce:transition-none duration-200 focus:border-accent outline-transparent focus-visible:(outline-2 outline-accent/70)"
151151
aria-autocomplete="list"
152152
@focus="isInputFocused = true"
153153
@blur="handleBlur"

‎app/components/PackageProvenanceSection.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ defineProps<{
1111
<h2 id="provenance-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
1212
<a
1313
href="#provenance"
14-
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
14+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
1515
>
1616
{{ $t('package.provenance_section.title') }}
1717
<span
@@ -40,7 +40,7 @@ defineProps<{
4040
:href="details.buildSummaryUrl"
4141
target="_blank"
4242
rel="noopener noreferrer"
43-
class="link text-sm text-fg-muted inline-flex"
43+
class="link text-sm text-fg-muted inline-flex rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
4444
>
4545
{{ $t('package.provenance_section.view_build_summary') }}
4646
</a>
@@ -56,7 +56,7 @@ defineProps<{
5656
:href="details.sourceCommitUrl"
5757
target="_blank"
5858
rel="noopener noreferrer"
59-
class="link font-mono text-sm block min-w-0 truncate"
59+
class="link font-mono text-sm block min-w-0 truncate rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
6060
:title="details.sourceCommitSha ?? details.sourceCommitUrl"
6161
>
6262
{{
@@ -77,7 +77,7 @@ defineProps<{
7777
:href="details.buildFileUrl"
7878
target="_blank"
7979
rel="noopener noreferrer"
80-
class="link font-mono text-sm block min-w-0 break-words"
80+
class="link font-mono text-sm block min-w-0 break-words rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
8181
:title="details.buildFilePath ?? details.buildFileUrl"
8282
>
8383
{{ details.buildFilePath ?? details.buildFileUrl }}
@@ -94,7 +94,7 @@ defineProps<{
9494
:href="details.publicLedgerUrl"
9595
target="_blank"
9696
rel="noopener noreferrer"
97-
class="link text-sm inline-flex"
97+
class="link text-sm inline-flex rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
9898
>
9999
{{ $t('package.provenance_section.transparency_log_entry') }}
100100
</a>

‎app/components/Readme.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,13 @@ function handleClick(event: MouseEvent) {
145145
text-decoration-color: var(--accent);
146146
}
147147
148+
.readme :deep(a:focus-visible),
149+
.readme :deep(button:focus-visible) {
150+
outline: 2px solid var(--accent);
151+
outline-offset: 2px;
152+
border-radius: 4px;
153+
}
154+
148155
.readme :deep(code) {
149156
@apply font-mono;
150157
font-size: 0.875em;

‎app/pages/compare.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ useSeoMeta({
116116
</h1>
117117
<button
118118
type="button"
119-
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
119+
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
120120
@click="router.back()"
121121
v-show="router.options.history.state.back !== null"
122122
>

‎app/pages/settings.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
5050
</h1>
5151
<button
5252
type="button"
53-
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
53+
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0 -mx-1.5 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
5454
@click="router.back()"
5555
v-show="router.options.history.state.back !== null"
5656
>
@@ -79,7 +79,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
7979
<select
8080
id="theme-select"
8181
:value="colorMode.preference"
82-
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
82+
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle focus-visible:(outline-2 outline-accent outline-offset-2)"
8383
@change="
8484
colorMode.preference = ($event.target as HTMLSelectElement).value as
8585
| 'light'

0 commit comments

Comments
 (0)