Skip to content

fix: uniform focus visible style #1814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kalu5 wants to merge 2 commits into from
Closed

fix: uniform focus visible style #1814

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9bda5c7
fix: uniform focus visible style
kalu5 Mar 1, 2026
3e4d618
fix: update focus class in PackageVersions tests from 'focus-visible'…
kalu5 Mar 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions app/assets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,8 +229,11 @@ body {
/* weird Firefox behavior makes it necessary to add `!important`
or otherwise the selector would need to be more specific,
which it explicitly should not be. */
outline: 2px solid var(--accent) !important;
outline-offset: 2px !important;
@apply focus-visible:(ring-2! ring-accent/90!);
}

.focus-ring-accent {
@apply outline-none focus-visible:(ring-2! ring-accent/90!);
Copy link
Copy Markdown
Member

@alexdln alexdln Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think would be better to create a class in unocss

https://unocss.dev/config/rules#rules

}

/* Reset dd margin (browser default is margin-left: 40px) */
Expand Down
2 changes: 1 addition & 1 deletion app/components/AppFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const closeModal = () => modalRef.value?.close?.()
</LinkBase>
<button
type="button"
class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
class="group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) focus-ring-accent transition-colors duration-200"
@click.prevent="showModal"
aria-haspopup="dialog"
>
Expand Down
2 changes: 1 addition & 1 deletion app/components/BaseCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ defineProps<{

<template>
<article
class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer relative outline-none focus-within:ring-2 focus-within:ring-accent/90 focus-within:bg-bg-muted"
:class="{
'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
}"
Expand Down
4 changes: 2 additions & 2 deletions app/components/Button/Base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ defineExpose({
'flex': block,
'text-sm px-4 py-2': size === 'medium',
'text-xs px-2 py-0.5': size === 'small',
'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
'bg-transparent text-fg hover:enabled:(bg-fg/10) outline-none focus-visible:enabled:(bg-fg/10 ring-2 ring-accent/90) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
variant === 'secondary',
'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
'text-bg bg-fg hover:enabled:(bg-fg/50) outline-none focus-visible:enabled:(bg-fg/50 ring-2 ring-accent/90) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
Copy link
Copy Markdown
Member

@alexdln alexdln Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

outline works better then ring in most cases - this is a property that is essentially only needed for focus, while shadow can be used custom

And again, it might be worth creating a class in uno and using it (maybe with a couple of different weights or different types)

variant === 'primary',
}"
:type="props.type"
Expand Down
2 changes: 1 addition & 1 deletion app/components/CallToAction.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ function handleCardClick(event: MouseEvent) {
v-for="link in socialLinks"
:key="link.id"
@click="handleCardClick"
class="cursor-pointer group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
class="cursor-pointer group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/90 focus:border-accent/90"
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Use focus-within:border-… on the card container.

At Line 53, focus:border-accent/90 is applied to a non-focusable div, so it never triggers during keyboard navigation. Use focus-within:border-accent/90 to match the ring behaviour and keep the border state consistent.

Suggested fix 
- class="cursor-pointer group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/90 focus:border-accent/90"
+ class="cursor-pointer group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/90 focus-within:border-accent/90"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
class="cursor-pointer group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/90 focus:border-accent/90"
class="cursor-pointer group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/90 focus-within:border-accent/90"

>
<h3 class="flex gap-2">
<span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
Expand Down
2 changes: 1 addition & 1 deletion app/components/Code/Viewer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ watch(
:key="lineNum"
:href="`#L${lineNum}`"
tabindex="-1"
class="line-number block px-3 py-0 font-mono text-sm leading-6 cursor-pointer transition-colors no-underline"
class="line-number block px-3 py-0 font-mono text-sm leading-6 cursor-pointer transition-colors no-underline focus-ring-accent"
:class="[
isLineSelected(lineNum)
? 'bg-yellow-500/20 text-fg'
Expand Down
2 changes: 1 addition & 1 deletion app/components/CollapsibleSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ useHead({
<button
:id="buttonId"
type="button"
class="size-5 -me-1 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-accent/70 rounded"
class="size-5 -me-1 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-ring-accent rounded"
:aria-expanded="isOpen"
:aria-controls="contentId"
:aria-label="ariaLabel"
Expand Down
2 changes: 1 addition & 1 deletion app/components/Compare/FacetSelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ function isCategoryNoneSelected(category: string): boolean {
:disabled="facet.comingSoon"
:aria-pressed="isFacetSelected(facet.id)"
:aria-label="facet.label"
class="gap-1 px-1.5 rounded transition-colors focus-visible:outline-accent/70"
class="gap-1 px-1.5 rounded transition-colors focus-ring-accent"
:class="
facet.comingSoon
? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
Expand Down
2 changes: 1 addition & 1 deletion app/components/DependencyPathPopup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
<!-- Path badge button -->
<button
type="button"
class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-800 dark:text-amber-400 transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-800 dark:text-amber-400 transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50 focus-ring-accent"
:aria-expanded="isOpen"
@click.stop="togglePopup"
>
Expand Down
4 changes: 2 additions & 2 deletions app/components/Filter/Chips.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const emit = defineEmits<{
}}</span>
<button
type="button"
class="flex items-center p-1 -m-1 hover:text-fg rounded-full transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
class="flex items-center p-1 -m-1 hover:text-fg rounded-full transition-colors duration-200 focus-ring-accent"
:aria-label="$t('filters.remove_filter', { label: chip.label })"
@click="emit('remove', chip)"
>
Expand All @@ -33,7 +33,7 @@ const emit = defineEmits<{
<button
v-if="chips.length > 1"
type="button"
class="text-sm p-0.5 text-fg-muted hover:text-fg underline transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2"
class="text-sm p-0.5 text-fg-muted hover:text-fg underline transition-colors duration-200 focus-ring-accent"
@click="emit('clearAll')"
>
{{ $t('filters.clear_all') }}
Expand Down
6 changes: 3 additions & 3 deletions app/components/Filter/Panel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
<!-- Collapsed header -->
<button
type="button"
class="w-full flex items-center gap-3 px-4 py-3 text-start hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
class="w-full flex items-center gap-3 px-4 py-3 text-start hover:bg-bg-muted transition-colors duration-200 focus-ring-accent"
:aria-expanded="isExpanded"
@click="isExpanded = !isExpanded"
>
Expand Down Expand Up @@ -225,7 +225,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
v-for="scope in SEARCH_SCOPE_VALUES"
:key="scope"
type="button"
class="px-2 py-0.5 text-xs font-mono rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
class="px-2 py-0.5 text-xs font-mono rounded-sm border transition-colors duration-200 focus-ring-accent"
:class="
filters.searchScope === scope
? 'bg-bg-subtle text-fg border-fg-subtle'
Expand Down Expand Up @@ -337,7 +337,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
<button
v-if="hasMoreKeywords"
type="button"
class="text-xs text-fg-subtle self-center font-mono hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
class="text-xs text-fg-subtle self-center font-mono hover:text-fg transition-colors duration-200 focus-ring-accent"
@click="showAllKeywords = true"
>
{{ $t('filters.more_keywords', { count: (availableKeywords?.length ?? 0) - 20 }) }}
Expand Down
2 changes: 1 addition & 1 deletion app/components/Header/AuthModal.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ watch(user, async newUser => {

<details class="text-sm">
<summary
class="text-fg-subtle hover:text-fg-muted transition-colors duration-200 focus-visible:(outline-2 outline-accent/70)"
class="text-fg-subtle hover:text-fg-muted transition-colors duration-200 focus-ring-accent"
>
{{ $t('auth.modal.what_is_atmosphere') }}
</summary>
Expand Down
2 changes: 1 addition & 1 deletion app/components/Header/ConnectorModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ function handleDisconnect() {
:aria-label="
copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
"
class="ms-auto text-fg-subtle p-1.5 -m-1.5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
class="ms-auto text-fg-subtle p-1.5 -m-1.5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/90 rounded"
@click="copyCommand"
>
<span v-if="!copied" class="i-lucide:copy block w-5 h-5" aria-hidden="true" />
Expand Down
2 changes: 1 addition & 1 deletion app/components/Header/MobileMenu.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ onUnmounted(deactivate)
<span class="font-mono text-sm text-fg-muted">{{ $t('nav.menu') }}</span>
<button
type="button"
class="p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
class="p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-ring-accent rounded"
:aria-label="$t('common.close')"
@click="closeMenu"
>
Expand Down
4 changes: 3 additions & 1 deletion app/components/Header/SearchBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,9 @@ defineExpose({ focus })
@blur="isSearchFocused = false"
size="small"
/>
<button type="submit" class="sr-only">{{ $t('search.button') }}</button>
<button type="submit" class="sr-only focus-ring-accent">
{{ $t('search.button') }}
</button>
</div>
</div>
</form>
Expand Down
2 changes: 1 addition & 1 deletion app/components/Input/Base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ defineExpose({
v-bind="props.noCorrect ? noCorrect : undefined"
@focus="emit('focus', $event)"
@blur="emit('blur', $event)"
class="appearance-none bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
class="appearance-none bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle focus-ring-accent disabled:(opacity-50 cursor-not-allowed)"
:class="{
'text-xs leading-[1.2] px-2 py-2 rounded-md': size === 'small',
'text-sm leading-none px-3 py-2.5 rounded-lg': size === 'medium',
Expand Down
2 changes: 1 addition & 1 deletion app/components/LicenseDisplay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
:href="token.url"
target="_blank"
rel="noopener noreferrer"
class="link-subtle"
class="link-subtle hover:(underline-offset-[0.2rem] underline decoration-1 decoration-accent text-accent) focus-ring-accent transition-colors duration-200"
:title="$t('package.license.view_spdx')"
>
{{ token.value }}
Expand Down
11 changes: 6 additions & 5 deletions app/components/Link/Base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,9 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
'text-bg bg-fg': variant === 'button-primary',
'bg-transparent text-fg': variant === 'button-secondary',
}"
><slot
/></span>
>
<slot />
</span>
<NuxtLink
v-bind="props"
v-else
Expand All @@ -93,15 +94,15 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
'inline-flex': !block,
'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
!isLinkAnchor && isLink && !noUnderline,
'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) focus-ring-accent transition-colors duration-200':
isLink,
'justify-center font-mono border border-border rounded-md transition-all duration-200':
isButton,
'text-sm px-4 py-2': isButtonMedium,
'text-xs px-2 py-0.5': isButtonSmall,
'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) focus-ring-accent aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
variant === 'button-secondary',
'text-bg bg-fg hover:(bg-fg/50 text-accent) focus-visible:(bg-fg/50) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
'text-bg bg-fg hover:(bg-fg/50 text-accent) focus-visible:(bg-fg/50) focus-ring-accent aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
variant === 'button-primary',
}"
:to="to"
Expand Down
2 changes: 1 addition & 1 deletion app/components/Modal.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ defineExpose({
<dialog
ref="dialogRef"
closedby="any"
class="w-[calc(100%-2rem)] bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg focus-visible:outline focus-visible:outline-accent/70"
class="w-[calc(100%-2rem)] bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg focus-ring-accent"
:aria-labelledby="modalTitleId"
:aria-describedby="modalSubtitleId"
v-bind="$attrs"
Expand Down
20 changes: 10 additions & 10 deletions app/components/Org/MembersPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ watch(lastExecutionTime, () => {
</h2>
<button
type="button"
class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-ring-accent"
:aria-label="$t('org.members.refresh')"
:disabled="isLoading"
@click="refreshData"
Expand Down Expand Up @@ -351,7 +351,7 @@ watch(lastExecutionTime, () => {
v-for="role in ['all', 'owner', 'admin', 'developer'] as const"
:key="role"
type="button"
class="px-2 py-1 font-mono text-xs rounded transition-colors duration-200 focus-visible:outline-accent/70"
class="px-2 py-1 font-mono text-xs rounded transition-colors duration-200 focus-ring-accent"
:class="filterRole === role ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
:aria-pressed="filterRole === role"
@click="filterRole = role"
Expand Down Expand Up @@ -383,7 +383,7 @@ watch(lastExecutionTime, () => {
>
<button
type="button"
class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-accent/70"
class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-ring-accent"
:class="sortBy === 'name' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
:aria-pressed="sortBy === 'name'"
@click="toggleSort('name')"
Expand All @@ -393,7 +393,7 @@ watch(lastExecutionTime, () => {
</button>
<button
type="button"
class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-accent/70"
class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-ring-accent"
:class="sortBy === 'role' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
:aria-pressed="sortBy === 'role'"
@click="toggleSort('role')"
Expand All @@ -420,7 +420,7 @@ watch(lastExecutionTime, () => {
</p>
<button
type="button"
class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-ring-accent"
@click="loadMembers"
>
{{ $t('common.try_again') }}
Expand Down Expand Up @@ -482,7 +482,7 @@ watch(lastExecutionTime, () => {
<!-- Remove button -->
<button
type="button"
class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-accent/70"
class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-ring-accent"
:aria-label="$t('org.members.remove_from_org', { name: member.name })"
@click="handleRemoveMember(member.name)"
>
Expand All @@ -496,7 +496,7 @@ watch(lastExecutionTime, () => {
v-for="team in member.teams"
:key="team"
type="button"
class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted border border-border rounded hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:outline-accent/70"
class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted border border-border rounded hover:text-fg hover:border-border-hover transition-colors duration-200 focus-ring-accent"
:aria-label="$t('org.members.view_team', { team })"
@click="handleTeamClick(team)"
>
Expand Down Expand Up @@ -562,13 +562,13 @@ watch(lastExecutionTime, () => {
<button
type="submit"
:disabled="!newUsername.trim() || isAddingMember"
class="px-3 py-2 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70"
class="px-3 py-2 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-ring-accent"
>
{{ isAddingMember ? '…' : $t('org.members.add_button') }}
</button>
<button
type="button"
class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-ring-accent"
:aria-label="$t('org.members.cancel_add')"
@click="showAddMember = false"
>
Expand All @@ -580,7 +580,7 @@ watch(lastExecutionTime, () => {
<button
v-else
type="button"
class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-ring-accent"
@click="showAddMember = true"
>
{{ $t('org.members.add_member') }}
Expand Down
Loading
Loading