libreria-astro-lefebvre 0.1.84 → 0.1.85

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/carbins/Hero_2026_Lliria.ts +3 -3
  3. package/src/components/Astro/Hero_2026_Lliria.astro +17 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "libreria-astro-lefebvre",
3
- "version": "0.1.84",
3
+ "version": "0.1.85",
4
4
  "description": "Librería de componentes Astro, React y Vue para Lefebvre",
5
5
  "author": "Equipo web desarrollo Lefebvre",
6
6
  "type": "module",
package/src/carbins/Hero_2026_Lliria.ts CHANGED
@@ -36,7 +36,7 @@ export const metadata: ComponentMetadata = {
36
36
  {
37
37
  name: 'imageAlt',
38
38
  type: 'text',
39
- help: 'Texto alternativo de la imagen de fondo para accesibilidad. Si la imagen es puramente decorativa, puede dejarse vacío',
39
+ help: 'Texto alternativo de la imagen de fondo. Al ser una imagen decorativa detrás del texto, lo recomendable es dejarlo VACÍO (el lector de pantalla la ignorará). Rellenar solo si la imagen aporta información que no está en el título ni en la descripción',
40
40
  label: 'Alt de la imagen',
41
41
  mandatory: false,
42
42
  example_value: 'Dos profesionales revisando documentación en una tablet'
@@ -44,7 +44,7 @@ export const metadata: ComponentMetadata = {
44
44
  {
45
45
  name: 'ctaText',
46
46
  type: 'text',
47
- help: 'Texto del botón CTA. El botón SOLO se muestra en móvil (en escritorio el diseño no lo incluye). Si se deja vacío, no aparece ningún botón',
47
+ help: 'Texto del botón CTA. El botón SOLO se muestra en móvil (en escritorio el diseño no lo incluye). Si se deja vacío el texto o la URL, no aparece ningún botón',
48
48
  label: 'Texto del botón (solo móvil)',
49
49
  mandatory: false,
50
50
  example_value: 'Pruébalo ya'
@@ -52,7 +52,7 @@ export const metadata: ComponentMetadata = {
52
52
  {
53
53
  name: 'ctaUrl',
54
54
  type: 'text',
55
- help: 'URL de destino del botón CTA móvil. Solo tiene efecto si se ha informado el texto del botón',
55
+ help: 'URL de destino del botón CTA móvil. Obligatoria para que el botón se muestre: sin URL no se renderiza el botón aunque tenga texto',
56
56
  label: 'URL del botón',
57
57
  mandatory: false,
58
58
  example_value: 'https://www.lefebvre.es/tienda/apuntes-y-consejos'
package/src/components/Astro/Hero_2026_Lliria.astro CHANGED
@@ -5,33 +5,42 @@ const {
5
5
  title,
6
6
  description,
7
7
  image,
8
- imageAlt = '',
8
+ imageAlt,
9
9
  ctaText,
10
- ctaUrl = '#'
10
+ ctaUrl
11
11
  } = Astro.props;
12
+
13
+ // ACCESIBILIDAD Imagen de fondo: si no llega alt (undefined o null desde Mecano) forzamos alt="" para que el lector de pantalla no anuncie el nombre del fichero.
14
+ const safeImageAlt = imageAlt ?? '';
15
+
16
+ // ACCESIBILIDAD El CTA solo se renderiza si hay texto Y URL; evita enlaces "#" que solo saltan al inicio de la página.
17
+ const showCta = Boolean(ctaText && ctaUrl);
18
+
19
+ // ACCESIBILIDAD Id único por instancia para enlazar la sección con su h1 (aria-labelledby) sin colisionar si hay varios heros.
20
+ const titleId = 'hero-title-' + Math.random().toString(36).substring(2, 10);
12
21
  ---
13
22
 
14
- <section class="relative w-full overflow-hidden bg-gray-100">
23
+ <section class="relative w-full overflow-hidden bg-gray-100" aria-labelledby={title ? titleId : undefined}>
15
24
  <LimboImage
16
25
  src={image}
17
- alt={imageAlt}
26
+ alt={safeImageAlt}
18
27
  class="absolute inset-0 w-full h-full object-cover object-left md:object-center"
19
28
  loading="eager"
20
29
  />
21
30
  <div class="relative max-w-7xl w-full mx-auto flex items-center min-h-[600px] px-8 md:px-0">
22
- <div class="w-full md:w-1/2 flex flex-col items-start gap-8 py-8 md:py-20 md:pr-16">
31
+ <div class="w-full md:w-1/2 flex flex-col items-start gap-8 pl-8 py-8 md:pl-6 md:py-20 md:pr-16">
23
32
  <div class="flex flex-col gap-4 w-full">
24
33
  {title && (
25
- <h1 class="font-poppins text-[#262626] text-4xl leading-[44px] tracking-[-0.5px] font-semibold md:text-[56px] md:leading-[64px] md:tracking-[-1px] md:font-normal" set:html={title}></h1>
34
+ <h1 id={titleId} class="font-poppins text-[#262626] text-4xl leading-[44px] tracking-[-0.5px] font-semibold md:text-[56px] md:leading-[64px] md:tracking-[-1px] md:font-normal" set:html={title}></h1>
26
35
  )}
27
36
  {description && (
28
37
  <p class="font-poppins text-[#262626] text-[28px] leading-9 md:text-[32px] md:leading-10 font-normal" set:html={description}></p>
29
38
  )}
30
39
  </div>
31
- {ctaText && (
40
+ {showCta && (
32
41
  <a
33
42
  href={ctaUrl}
34
- class="md:hidden inline-flex items-center justify-center w-fit h-10 px-4 rounded-lg bg-[#00092CE5] text-white font-inter text-base font-semibold leading-6 shadow-md"
43
+ class="md:hidden inline-flex items-center justify-center w-fit min-h-11 h-11 px-4 rounded-lg bg-[#00092CE5] text-white font-inter text-base font-semibold leading-6 shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#00092C]"
35
44
  >
36
45
  {ctaText}
37
46
  </a>