IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webapp): fix badge focus (#8452)

Browse Source 
* Verification badge is never a button

* Fix focus style of badges, removing weird outline

Instead of outline, increase size, like when hovered.
This commit is contained in:
Max 2025-04-28 19:59:35 +02:00 committed by GitHub
parent 9d5396988a
commit d09f1a95f9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
webapp/components/Badges.vue
View File

@ -1,7 +1,7 @@
<template>
<div :class="[badges.length === 2 && 'hc-badges-dual']" class="hc-badges">
<component
:is="selectionMode ? 'button' : 'div'"
:is="selectionMode && index > 0 ? 'button' : 'div'"
class="hc-badge-container"
v-for="(badge, index) in badges"
:key="index"
@ -84,8 +84,10 @@ export default {
transition: transform 0.1s ease-in;
&:hover {
&:hover,
&:focus-visible {
transform: scale(1.1);
outline: none;
}
}

12
webapp/components/__snapshots__/Badges.spec.js.snap
View File

@ -43,7 +43,7 @@ exports[`Badges.vue with badges in selection mode clicking on second badge selec
class="hc-badges"
scale="1.2"
>
<button
<div
class="hc-badge-container"
>
<img
@ -51,7 +51,7 @@ exports[`Badges.vue with badges in selection mode clicking on second badge selec
src="/api/path/to/some/icon"
title="Some description"
/>
</button>
</div>
<button
class="hc-badge-container selectable selected"
>
@ -80,7 +80,7 @@ exports[`Badges.vue with badges in selection mode clicking twice on second badge
class="hc-badges"
scale="1.2"
>
<button
<div
class="hc-badge-container"
>
<img
@ -88,7 +88,7 @@ exports[`Badges.vue with badges in selection mode clicking twice on second badge
src="/api/path/to/some/icon"
title="Some description"
/>
</button>
</div>
<button
class="hc-badge-container selectable"
>
@ -117,7 +117,7 @@ exports[`Badges.vue with badges in selection mode renders 1`] = `
class="hc-badges"
scale="1.2"
>
<button
<div
class="hc-badge-container"
>
<img
@ -125,7 +125,7 @@ exports[`Badges.vue with badges in selection mode renders 1`] = `
src="/api/path/to/some/icon"
title="Some description"
/>
</button>
</div>
<button
class="hc-badge-container selectable"
>

16
webapp/pages/settings/__snapshots__/badges.spec.js.snap
View File

@ -25,7 +25,7 @@ exports[`badge settings with badges more badges available selecting an empty slo
<div
class="hc-badges"
>
<button
<div
class="hc-badge-container"
>
<img
@ -33,7 +33,7 @@ exports[`badge settings with badges more badges available selecting an empty slo
src="/api/verification/icon"
title="Verification description"
/>
</button>
</div>
<button
class="hc-badge-container selectable"
>
@ -160,7 +160,7 @@ exports[`badge settings with badges no more badges available selecting an empty
<div
class="hc-badges"
>
<button
<div
class="hc-badge-container"
>
<img
@ -168,7 +168,7 @@ exports[`badge settings with badges no more badges available selecting an empty
src="/api/verification/icon"
title="Verification description"
/>
</button>
</div>
<button
class="hc-badge-container selectable"
>
@ -242,7 +242,7 @@ exports[`badge settings with badges renders 1`] = `
<div
class="hc-badges"
>
<button
<div
class="hc-badge-container"
>
<img
@ -250,7 +250,7 @@ exports[`badge settings with badges renders 1`] = `
src="/api/verification/icon"
title="Verification description"
/>
</button>
</div>
<button
class="hc-badge-container selectable"
>
@ -402,7 +402,7 @@ exports[`badge settings without badges renders 1`] = `
<div
class="hc-badges"
>
<button
<div
class="hc-badge-container"
>
<img
@ -410,7 +410,7 @@ exports[`badge settings without badges renders 1`] = `
src="/api/verification/icon"
title="Verification description"
/>
</button>
</div>
</div>
</div>