From 3f6fe3795b32e0ad7eb4599226095e89a4133115 Mon Sep 17 00:00:00 2001
From: kirsty-hames <kirsty-hames@users.noreply.github.com>
Date: Tue, 2 Jul 2024 15:39:55 +0100
Subject: [PATCH 1/3] use image template for menu item graphic

- set alt text as 'null' to prevent aria-label being applied to img. Maintain alt text reading in the menu item details instead.
---
 templates/boxMenuItem.jsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/templates/boxMenuItem.jsx b/templates/boxMenuItem.jsx
index d07a3c9..28479ef 100644
--- a/templates/boxMenuItem.jsx
+++ b/templates/boxMenuItem.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Adapt from 'core/js/adapt';
-import { classes, compile } from 'core/js/reactHelpers';
+import { classes, compile, templates } from 'core/js/reactHelpers';
 
 export default function BoxMenuItem (props) {
 
@@ -38,15 +38,11 @@ export default function BoxMenuItem (props) {
   return (
     <div className="menu-item__inner boxmenu-item__inner">
 
-      {_graphic?.src &&
-      <div className="menu-item__image-container boxmenu-item__image-container">
-        <img
-          className="menu-item__image boxmenu-item__image"
-          src={_graphic.src}
-          aria-hidden="true"
-        />
-      </div>
-      }
+      <templates.image {..._graphic}
+        classNamePrefixes={['menu-item', 'boxmenu-item']}
+        attributionClassNamePrefixes={['menu-item', 'boxmenu-item']}
+        alt={null}
+      />
 
       <div className="menu-item__details boxmenu-item__details">
         <div className="menu-item__details-inner boxmenu-item__details-inner">

From 668a4c828c97357d4f93cf116575b7f9b9b42c89 Mon Sep 17 00:00:00 2001
From: kirsty-hames <kirsty-hames@users.noreply.github.com>
Date: Tue, 2 Jul 2024 15:42:36 +0100
Subject: [PATCH 2/3] remove attributionClassNamePrefixes

this only needs setting if different to classNamePrefixes
---
 templates/boxMenuItem.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/templates/boxMenuItem.jsx b/templates/boxMenuItem.jsx
index 28479ef..2ecaed5 100644
--- a/templates/boxMenuItem.jsx
+++ b/templates/boxMenuItem.jsx
@@ -40,7 +40,6 @@ export default function BoxMenuItem (props) {
 
       <templates.image {..._graphic}
         classNamePrefixes={['menu-item', 'boxmenu-item']}
-        attributionClassNamePrefixes={['menu-item', 'boxmenu-item']}
         alt={null}
       />
 

From 4bc718b51c7dc070c5dee3a416427c17a9df36f8 Mon Sep 17 00:00:00 2001
From: kirsty-hames <kirsty-hames@users.noreply.github.com>
Date: Tue, 2 Jul 2024 15:51:58 +0100
Subject: [PATCH 3/3] exclude use of attribution

- attribution not currently supported in existing Boxmenu
- the reading order would render attribution before menu item title and image alt text which isn't logical
---
 templates/boxMenuItem.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/templates/boxMenuItem.jsx b/templates/boxMenuItem.jsx
index 2ecaed5..eb05bf3 100644
--- a/templates/boxMenuItem.jsx
+++ b/templates/boxMenuItem.jsx
@@ -41,6 +41,7 @@ export default function BoxMenuItem (props) {
       <templates.image {..._graphic}
         classNamePrefixes={['menu-item', 'boxmenu-item']}
         alt={null}
+        attribution={null}
       />
 
       <div className="menu-item__details boxmenu-item__details">