From a90ea78e67e0fcb1f7a341523dbe4dd9ee7dba98 Mon Sep 17 00:00:00 2001
From: Mahdi Khashan <58775404+mahdikhashan@users.noreply.github.com>
Date: Mon, 8 Apr 2024 10:22:08 +0200
Subject: [PATCH] comply with image-alt and region rules of a11y (#373)

* add aria-label, aria-labelledby and alt to event-image

* change div to nav to comply with landmark region rule

* add pictureAltText event property

* replace `PICTUREALTTEXT` with `PICTURE_ALT_TEXT` in eventService
---
 .../boudicca/publisher/event/html/service/EventService.kt     | 1 +
 .../src/main/resources/templates/events/event.hbs             | 2 +-
 .../src/main/resources/templates/layout/header_links.hbs      | 4 ++--
 .../src/main/kotlin/base/boudicca/SemanticKeys.kt             | 2 ++
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/boudicca.base/publisher-event-html/src/main/kotlin/base/boudicca/publisher/event/html/service/EventService.kt b/boudicca.base/publisher-event-html/src/main/kotlin/base/boudicca/publisher/event/html/service/EventService.kt
index f9a1c8de..9b9c1f1d 100644
--- a/boudicca.base/publisher-event-html/src/main/kotlin/base/boudicca/publisher/event/html/service/EventService.kt
+++ b/boudicca.base/publisher-event-html/src/main/kotlin/base/boudicca/publisher/event/html/service/EventService.kt
@@ -156,6 +156,7 @@ class EventService @Autowired constructor(
                         pictureProxyService.submitPicture(event.data["pictureUrl"]!!).toString()
                     else
                         "",
+            "pictureAltText" to (event.data[SemanticKeys.PICTURE_ALT_TEXT] ?: ""),
             "accessibilityProperties" to getAllAccessibilityValues(event).joinToString(", "),
         )
     }
diff --git a/boudicca.base/publisher-event-html/src/main/resources/templates/events/event.hbs b/boudicca.base/publisher-event-html/src/main/resources/templates/events/event.hbs
index e098ff3d..e483c515 100644
--- a/boudicca.base/publisher-event-html/src/main/resources/templates/events/event.hbs
+++ b/boudicca.base/publisher-event-html/src/main/resources/templates/events/event.hbs
@@ -1,7 +1,7 @@
 <div class="event">
         <div class="event-image {{#if event.category}}event-image-{{event.category}}{{/if}}">
             {{#if event.pictureUuid}}
-                <img src="/picture?uuid={{event.pictureUuid}}" style="height:100px;max-height:250px;max-width:300px;" />
+                <img src="/picture?uuid={{event.pictureUuid}}" style="height:100px;max-height:250px;max-width:300px;" alt="{{#if event.pictureAltText}}{{event.pictureAltText}}{{else}}Event Bild{{/if}}" aria-label="Event Bild" aria-labelledby="image" />
             {{else}}
                 <svg title="Event Bild" viewBox="0 0 512 512" height="100px" >
                     <use xlink:href="#{{#if event.category}}{{event.category}}{{else}}image{{/if}}"></use>
diff --git a/boudicca.base/publisher-event-html/src/main/resources/templates/layout/header_links.hbs b/boudicca.base/publisher-event-html/src/main/resources/templates/layout/header_links.hbs
index a655c8a7..e44b54c3 100644
--- a/boudicca.base/publisher-event-html/src/main/resources/templates/layout/header_links.hbs
+++ b/boudicca.base/publisher-event-html/src/main/resources/templates/layout/header_links.hbs
@@ -1,7 +1,7 @@
-<div class="header-links">
+<nav class="header-links">
     <a href="/" target="_self">Events</a>
     <a href="/sources" target="_self">Sources</a>
     {{#each extensionHeaders as |extensionHeader|}}
         <a href="{{extensionHeader.url}}" target="{{extensionHeader.target}}">{{extensionHeader.text}}</a>
     {{/each}}
-</div>
+</nav>
diff --git a/boudicca.base/semantic-conventions/src/main/kotlin/base/boudicca/SemanticKeys.kt b/boudicca.base/semantic-conventions/src/main/kotlin/base/boudicca/SemanticKeys.kt
index c9e7c958..26723047 100644
--- a/boudicca.base/semantic-conventions/src/main/kotlin/base/boudicca/SemanticKeys.kt
+++ b/boudicca.base/semantic-conventions/src/main/kotlin/base/boudicca/SemanticKeys.kt
@@ -13,11 +13,13 @@ object SemanticKeys {
     const val RECURRENCE_INTERVAL = "recurrence.interval"
     const val TAGS = "tags"
     const val REGISTRATION = "registration"
+
     const val PICTURE_URL = "pictureUrl"
     @Deprecated("use PICTURE_URL instead")
     const val PICTUREURL = PICTURE_URL
     const val PICTURE_ALT_TEXT = "pictureAltText"
     const val PICTURE_COPYRIGHT = "pictureCopyright"
+
     const val COLLECTORNAME = "collectorName"
     const val SOURCES = "sources"
     const val ADDITIONAL_EVENTS_URL = "additionalEventsFromSourceUrl"