IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

A11y: ARIA hide image/link duplicate in news panel (#36642)

Browse Source 
* fix(a11y): Hide image/link duplicate

* fix: proper heading and time markup
This commit is contained in:
Tobias Skarhed 2021-07-12 10:19:00 +02:00 committed by GitHub
parent 2fb385c192
commit b8fbe70c14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/plugins/panel/news/NewsPanel.tsx
View File

@ -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>