From 4782922a47461ed0e8af8cc4aec6f652d094b975 Mon Sep 17 00:00:00 2001
From: Benjamin Staneck <staneck@gmail.com>
Date: Sun, 30 Apr 2023 06:05:21 +0200
Subject: [PATCH] Fixed some aria violations

(cherry picked from commit 7aa846343815105e3576e6aa20eac64fcb0edf8d)

Closes #3589
---
 .../src/Components/DescriptionList/DescriptionListItem.js     | 4 ++--
 frontend/src/Components/Link/IconButton.js                    | 1 +
 frontend/src/Components/Page/Header/PageHeader.js             | 2 ++
 frontend/src/Components/Page/Header/PageHeaderActionsMenu.js  | 2 +-
 frontend/src/Components/ProgressBar.js                        | 4 +++-
 5 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Components/DescriptionList/DescriptionListItem.js b/frontend/src/Components/DescriptionList/DescriptionListItem.js
index 39f634cc9..aac01a6b5 100644
--- a/frontend/src/Components/DescriptionList/DescriptionListItem.js
+++ b/frontend/src/Components/DescriptionList/DescriptionListItem.js
@@ -17,7 +17,7 @@ class DescriptionListItem extends Component {
     } = this.props;
 
     return (
-      <span>
+      <div>
         <DescriptionListItemTitle
           className={titleClassName}
         >
@@ -29,7 +29,7 @@ class DescriptionListItem extends Component {
         >
           {data}
         </DescriptionListItemDescription>
-      </span>
+      </div>
     );
   }
 }
diff --git a/frontend/src/Components/Link/IconButton.js b/frontend/src/Components/Link/IconButton.js
index 1e49e0057..715769d70 100644
--- a/frontend/src/Components/Link/IconButton.js
+++ b/frontend/src/Components/Link/IconButton.js
@@ -23,6 +23,7 @@ function IconButton(props) {
         className,
         isDisabled && styles.isDisabled
       )}
+      aria-label="Table Options Button"
       isDisabled={isDisabled}
       {...otherProps}
     >
diff --git a/frontend/src/Components/Page/Header/PageHeader.js b/frontend/src/Components/Page/Header/PageHeader.js
index 10a6d35e0..6789b603c 100644
--- a/frontend/src/Components/Page/Header/PageHeader.js
+++ b/frontend/src/Components/Page/Header/PageHeader.js
@@ -61,6 +61,7 @@ class PageHeader extends Component {
             <img
               className={styles.logo}
               src={`${window.Lidarr.urlBase}/Content/Images/logo.svg`}
+              alt="Lidarr Logo"
             />
           </Link>
         </div>
@@ -79,6 +80,7 @@ class PageHeader extends Component {
           <IconButton
             className={styles.donate}
             name={icons.HEART}
+            aria-label="Donate"
             to="https://lidarr.audio/donate"
             size={14}
           />
diff --git a/frontend/src/Components/Page/Header/PageHeaderActionsMenu.js b/frontend/src/Components/Page/Header/PageHeaderActionsMenu.js
index 9e73cbc86..5e5dda730 100644
--- a/frontend/src/Components/Page/Header/PageHeaderActionsMenu.js
+++ b/frontend/src/Components/Page/Header/PageHeaderActionsMenu.js
@@ -20,7 +20,7 @@ function PageHeaderActionsMenu(props) {
   return (
     <div>
       <Menu alignMenu={align.RIGHT}>
-        <MenuButton className={styles.menuButton}>
+        <MenuButton className={styles.menuButton} aria-label="Menu Button">
           <Icon
             name={icons.INTERACTIVE}
           />
diff --git a/frontend/src/Components/ProgressBar.js b/frontend/src/Components/ProgressBar.js
index b97d8d577..8d8eef38c 100644
--- a/frontend/src/Components/ProgressBar.js
+++ b/frontend/src/Components/ProgressBar.js
@@ -56,7 +56,9 @@ function ProgressBar(props) {
                 styles[kind],
                 enableColorImpairedMode && 'colorImpaired'
               )}
-              aria-valuenow={progress}
+              role="meter"
+              aria-label={`Progress Bar at ${progress.toFixed(0)}%`}
+              aria-valuenow={progress.toFixed(0)}
               aria-valuemin="0"
               aria-valuemax="100"
               style={{ width: progressPercent }}