only show focus rings when :focus-visible (#663)

DISIC · Feb 21, 2024 · 8cb30d9 · 8cb30d9
1 parent 23f2b85
commit 8cb30d9
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/confiture-web-app/src/components/account/dashboard/AuditRow.vue b/confiture-web-app/src/components/account/dashboard/AuditRow.vue
@@ -334,8 +334,8 @@ const csvExportFilename = computed(() => {
 .audit-name:focus {
   outline: none;
 }
-.audit-name:focus::before {
-  outline: 2px solid #0a76f6;
+.audit-name:focus-visible::before {
+  outline: 2px solid var(--dsfr-outline);
 }
 
 .audit-name::before {

diff --git a/confiture-web-app/src/components/audit/AraTabs.vue b/confiture-web-app/src/components/audit/AraTabs.vue
@@ -179,7 +179,7 @@ li {
   background-color: var(--active-tint);
 }
 
-.tabs button:focus {
+.tabs button:focus-visible {
   outline: 2px solid var(--dsfr-outline);
   outline-offset: -2px;
 }

diff --git a/confiture-web-app/src/components/audit/AuditGenerationFilters.vue b/confiture-web-app/src/components/audit/AuditGenerationFilters.vue
@@ -287,8 +287,8 @@ const notApplicableCount = computed(
   margin-bottom: 2rem;
 }
 
-.toggle-column-button:focus {
-  outline: 2px solid #0a76f6;
+.toggle-column-button:focus-visible {
+  outline: 2px solid var(--dsfr-outline);
   outline-offset: -2px;
 }
 

diff --git a/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue b/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue
@@ -260,7 +260,7 @@ const isOffline = useIsOffline();
 
 .upload-label {
   cursor: pointer;
-  outline-color: #0a76f6;
+  outline-color: var(--dsfr-outline);
   outline-offset: 2px;
   outline-width: 2px;
   outline-style: none;