Merge pull request #638 from itk-dev/hotfix/flags-as-buttons

Changed flag a tags to buttons

Author: martinyde

.docker/templates/default.conf.template

@@ -89,7 +89,7 @@ server {
     # Define which paths to protect
     location ~ ^/(flag/flag|admin|user/login) {
         # Block bots on these paths only
-        if ($http_user_agent ~* (bot|crawler|spider|scraper)) {
+        if ($http_user_agent ~* (bot|crawl|crawler|spider|scraper)) {
             return 403;
         }
 

CHANGELOG.md

@@ -6,6 +6,9 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+* [PR-638](https://github.com/itk-dev/deltag.aarhus.dk/pull/638)
+  Changed flags templates to use html button instead of anchor tag.
+
 ## [4.16.0] - 2026-03-09
 
 * [PR-635](https://github.com/itk-dev/deltag.aarhus.dk/pull/635)

web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss

@@ -1,4 +1,4 @@
-a:has(svg) {
+button:has(svg) {
   /* prettier-ignore */
   --ease-spring-lazy: linear(0, 0.008 1.1%, 0.034 2.3%, 0.134 4.9%, 0.264 7.3%, 0.683 14.3%, 0.797 16.5%, 0.89 18.6%, 0.967 20.7%, 1.027 22.8%, 1.073 25%, 1.104 27.3%, 1.123 30.6%, 1.119 34.3%, 1.018 49.5%, 0.988 58.6%, 0.985 65.2%, 1 84.5%, 1);
   /* prettier-ignore */
@@ -80,8 +80,8 @@ a:has(svg) {
   }
 }
 
-/* Click on <a> with thumbs-up svg */
-.liked a:has(svg) {
+/* Click on <button> with thumbs-up svg */
+.liked button:has(svg) {
   g.thumbs-up {
     path:first-of-type {
       animation: rotatePop 500ms var(--ease-spring-lazy);
@@ -93,7 +93,7 @@ a:has(svg) {
 }
 
 /* Thumbs-up already set*/
-.action-unflag a:has(svg) {
+.action-unflag button:has(svg) {
   g.thumbs-up {
     path:last-child {
       fill: var(--interactive-primary);

web/themes/custom/hoeringsportal/assets/css/module/_dialogue.scss

@@ -12,9 +12,14 @@
 }
 
 .flag-wrapper {
-  .flag a {
+  .flag button {
+    background: none;
+    border: 0;
     color: inherit;
+    letter-spacing: 0.05em;
     text-decoration: none;
+    text-transform: lowercase;
+    padding: 0;
   }
 
   .ajax-progress-throbber {

web/themes/custom/hoeringsportal/templates/content/flag--support-comment.html.twig

@@ -34,8 +34,6 @@
 ]
 %}
 
-{# Set nofollow to prevent search bots from crawling anonymous flag links #}
-{% set attributes = attributes.setAttribute('rel', 'nofollow') %}
 <div class="{{ classes|join(' ') }}">
-  <a{{ attributes.setAttribute('rel', 'nofollow').setAttribute('title', title) }}>{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig') }}{{ flagcount(flag, flaggable) }} {{ 'like this'|t }}</a>
+  <button{{ attributes.setAttribute('title', 'Like this'|t) }}>{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig') }} {{ flagcount(flag, flaggable) }} {{ 'Like this'|t }} </button>
 </div>

web/themes/custom/hoeringsportal/templates/content/flag--support-proposal.html.twig

@@ -34,8 +34,6 @@
 ]
 %}
 
-{# Set nofollow to prevent search bots from crawling anonymous flag links #}
-{% set attributes = attributes.setAttribute('rel', 'nofollow') %}
 <div class="{{ classes|join(' ') }}">
-  <a{{ attributes.setAttribute('rel', 'nofollow').setAttribute('title', title) }} title="{{ 'Like this'|t }}">{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig') }}{{ flagcount(flag, flaggable) }} {{ 'like this'|t }}</a>
+  <button{{ attributes.setAttribute('title', 'Like this'|t) }}>{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig') }} {{ flagcount(flag, flaggable) }} {{ 'Like this'|t }} </button>
 </div>

web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig

@@ -21,7 +21,7 @@
           <div class="col">
             <div class="d-flex flex-wrap px-0">
               <div class="me-3">
-                <!--<span class="flag-wrapper">{{ content.flag_support_proposal }}</span>-->
+                <span class="flag-wrapper">{{ content.flag_support_proposal }}</span>
               </div>
               <div>
                 <a href="#comments" class="text-secondary">{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig') }}<span>{% trans %}1 comment{% plural node.field_comments.comment_count %}{{ count }} comments{% endtrans %}</span></a>