From b8fbe70c14da990b72227327408ad24dbe1d60e6 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Mon, 12 Jul 2021 10:19:00 +0200
Subject: [PATCH] A11y: ARIA hide image/link duplicate in news panel (#36642)

* fix(a11y): Hide image/link duplicate

* fix: proper heading and time markup
---
 public/app/plugins/panel/news/NewsPanel.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/public/app/plugins/panel/news/NewsPanel.tsx b/public/app/plugins/panel/news/NewsPanel.tsx
index bb38a28fa0e..f28d33489a8 100755
--- a/public/app/plugins/panel/news/NewsPanel.tsx
+++ b/public/app/plugins/panel/news/NewsPanel.tsx
@@ -80,30 +80,33 @@ export class NewsPanel extends PureComponent<Props, State> {
       <CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
         {news.map((item, index) => {
           return (
-            <div key={index} className={cx(styles.item, useWideLayout && styles.itemWide)}>
+            <article key={index} className={cx(styles.item, useWideLayout && styles.itemWide)}>
               {showImage && item.ogImage && (
                 <a
                   href={textUtil.sanitizeUrl(item.link)}
                   target="_blank"
                   rel="noopener noreferrer"
                   className={cx(styles.socialImage, useWideLayout && styles.socialImageWide)}
+                  aria-hidden
                 >
-                  <img src={item.ogImage} />
+                  <img src={item.ogImage} alt={item.title} />
                 </a>
               )}
               <div className={styles.body}>
-                <div className={styles.date}>{dateTimeFormat(item.date, { format: 'MMM DD' })} </div>
+                <time className={styles.date} dateTime={dateTimeFormat(item.date, { format: 'MMM DD' })}>
+                  {dateTimeFormat(item.date, { format: 'MMM DD' })}{' '}
+                </time>
                 <a
                   className={styles.link}
                   href={textUtil.sanitizeUrl(item.link)}
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <div className={styles.title}>{item.title}</div>
+                  <h3 className={styles.title}>{item.title}</h3>
                 </a>
                 <div className={styles.content} dangerouslySetInnerHTML={{ __html: textUtil.sanitize(item.content) }} />
               </div>
-            </div>
+            </article>
           );
         })}
       </CustomScrollbar>