feat: improved lighthouse reports

theme/templates/components/theme-switch.html

@@ -2,6 +2,7 @@
   onclick="switchTheme()"
   id="theme-toggle"
   type="button"
+  aria-label="switchtheme"
   class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5">
     {% include 'components/icons/moon.svg' %}
     {% include 'components/icons/sun.svg' %}

theme/templates/theme/seo.html

@@ -3,3 +3,4 @@
 <meta property="og:description" content="{{ description }}" />
 <meta property="og:image" content="{{ image }}" />
 <meta property="og:url" content="permalink" />
+<meta name="description" content="{{ description }}" />

web/templates/components/cart/add_to_cart.html

@@ -7,7 +7,7 @@
   <input class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600
                 focus:border-primary-600 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
                 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 mr-4"
-         id="quantity" type="number" min="1" max="10" name="quantity" value="1">
+         id="quantity" aria-label="quantity" type="number" min="1" max="10" name="quantity" value="1">
   <button class="w-full flex justify-center rounded-lg bg-primary-700 px-5 py-2.5
                  text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4
                  focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800

web/templates/components/cart/cart.html

@@ -35,7 +35,7 @@
                                             {% csrf_token %}
                                             <button
                                                     type="submit"
-                                                    class="inline-flex items-center text-sm font-medium text-red-600 hover:underline dark:text-red-500"
+                                                    class="inline-flex items-center text-sm font-medium text-red-700 hover:underline dark:text-red-400"
                                             >
                                                 {% include 'components/icons/x.svg' %}
                                                 {% translate 'Quitar' %}
@@ -367,7 +367,7 @@
                         <div class="flex items-center justify-center gap-2">
                             <span class="text-sm font-normal text-gray-500 dark:text-gray-400"> {% translate 'o' %} </span>
                             <a href="{% url 'web:index' %}" title=""
-                               class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">
+                               class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline dark:text-primary-400">
                                 {% translate 'Seguir comprando' %}
                             </a>
                         </div>

web/templates/components/generic/navbar.html

@@ -9,7 +9,7 @@
       <div class="flex items-center space-x-8">
         <div class="shrink-0">
           <a class="flex flex-row items-center" href="{% url 'web:index' %}">
-            <img class="w-8 h-8 mr-2" src="{{ logo }}" alt="{{ web_title }}">
+            <img class="w-8 h-8 mr-2" src="{{ logo }}" alt="{{ web_title }} logo">
             <h1 class="text-xl font-semibold text-gray-900 dark:text-white">{{ web_title }}</h1>
           </a>
         </div>
@@ -47,6 +47,7 @@
             hx-on:click="htmx.toggleClass(htmx.find('#userDropdown1'), 'hidden'); htmx.addClass(htmx.find('#myCartDropdown1'), 'hidden')"
             id="userDropdownButton1"
             data-dropdown-toggle="userDropdown1" type="button"
+            aria-label="show menu"
             class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
             {% include 'components/icons/user.svg' %}
             <span class="hidden sm:flex">
@@ -71,6 +72,7 @@
         <button hx-on:click="htmx.toggleClass(htmx.find('#ecommerce-navbar-menu-1'), 'hidden')" type="button"
                 data-collapse-toggle="ecommerce-navbar-menu-1" aria-controls="ecommerce-navbar-menu-1"
                 aria-expanded="false"
+                aria-label="show menu"
                 class="inline-flex lg:hidden items-center justify-center hover:bg-gray-100 rounded-md dark:hover:bg-gray-700 p-2 text-gray-900 dark:text-white">
           <span class="sr-only">
             {% translate 'Abrir menú' %}

web/templates/components/products/wishlist_button.html

@@ -3,7 +3,7 @@
   <form action="" hx-post="{% url 'web:delete_from_wishlist' pk=product.pk %}" hx-swap="none">
     <input type="hidden" name="product" value="{{ product.pk }}">
     {% csrf_token %}
-    <button>
+    <button aria-label="dislike">
       {% include 'components/icons/liked.svg' %}
     </button>
   </form>
@@ -11,7 +11,7 @@
   <form action="" hx-post="{% url 'web:add_to_wishlist' %}" hx-swap="none">
     <input type="hidden" name="product" value="{{ product.pk }}">
     {% csrf_token %}
-    <button>
+    <button aria-label="like">
       {% include 'components/icons/like.svg' %}
     </button>
   </form>

web/templates/users/login.html

@@ -41,7 +41,7 @@
               <p class="text-sm font-light text-gray-500 my-4 dark:text-gray-400">
                 {% translate '¿Aún no tienes cuenta?' %}
                 <a href="{% url 'web:register' %}"
-                   class="font-medium text-primary-600 hover:underline dark:text-primary-500">{% translate 'Regístrate aquí' %}</a>
+                   class="font-medium text-primary-700 hover:underline dark:text-primary-400">{% translate 'Regístrate aquí' %}</a>
               </p>
             </div>
 
@@ -58,7 +58,7 @@
             <div class="flex justify-center">
               <p class="text-sm font-light text-gray-500 mt-4 dark:text-gray-400">
                 <a href="{% url 'web:reset_password' %}"
-                   class="font-medium text-primary-600 hover:underline dark:text-primary-500">{% translate '¿Has olvidado tu contraseña?' %}</a>
+                   class="font-medium text-primary-700 hover:underline dark:text-primary-400">{% translate '¿Has olvidado tu contraseña?' %}</a>
               </p>
             </div>
 

web/templates/users/user_details.html

@@ -4,11 +4,11 @@
   {% include 'components/generic/navbar.html' %}
   <section class="bg-white py-8 antialiased dark:bg-gray-900 md:py-8">
     <div class="mx-auto max-w-screen-lg px-4 2xl:px-0">
-      <h4
+      <h2
         class="mb-4 text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl md:mb-6"
       >
         {% translate 'Mi cuenta' %}
-      </h4>
+      </h2>
 
       <div class="flex space-x-4">
         <div>
@@ -58,16 +58,6 @@
                 </dl>
               </div>
               <div class="space-y-4">
-                <dl class="mb-5 mt-5">
-                <span
-                  class="bg-primary-100 text-primary-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-primary-900 dark:text-primary-300">
-                  {% if address.address_type == 'BILL' %}
-                    {% translate 'Dirección de facturación' %}
-                  {% else %}
-                    {% translate 'Dirección de envío' %}
-                  {% endif %}
-                </span>
-                </dl>
                 <dl>
                   <dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Localidad' %}</dt>
                   <dd class="text-gray-500 dark:text-gray-400">{{ address.address_town }}</dd>

web/templates/web/order.html

@@ -176,7 +176,7 @@
                     <div class="flex items-center justify-center gap-2">
                         <span class="text-sm font-normal text-gray-500 dark:text-gray-400"> {% translate 'o' %} </span>
                         <a href="{% url 'web:index' %}" title=""
-                           class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">
+                           class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline dark:text-primary-400">
                             {% translate 'Seguir comprando' %}
                         </a>
                     </div>

web/views/users.py

@@ -250,8 +250,10 @@ class MyAccountView(TemplateView):
 
     def get_context_data(self, **kwargs):
         addresses = CustomerAddress.objects.filter(user=self.request.user)
-        settings = WebSettings.load()
+        web_settings = WebSettings.load()
         return {
+            "title": f"{web_settings.web_title} - Mi cuenta",
+            "description": f"{web_settings.web_title} - Mi cuenta",
             "customer_addresses": addresses,
         }
 

web/views/web.py

@@ -77,6 +77,7 @@ class CartDetail(TemplateView, CreateView):
         cart_items = CartItem.objects.filter(cart=cart).prefetch_related("product")
 
         return {
+            "title": web_settings.web_title,
             "cart": cart,
             "items": cart_items,
             "description": _("resumen del carrito"),