From 6eca14f140db85f4ca5f3b4513251dbb154e33ba Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Tue, 13 Jul 2021 15:19:52 -0500
Subject: [PATCH] fix issue of invalid aria-label values

---
 static/app-strings.json      | 3 +++
 ui/component/button/view.jsx | 5 ++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index ec9a7c743..d56d79474 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -2040,5 +2040,8 @@
   "Tip Creators": "Tip Creators",
   "Only select creators can receive tips at this time": "Only select creators can receive tips at this time",
   "The payment will be made from your saved card": "The payment will be made from your saved card",
+  "Trending for #Art": "Trending for #Art",
+  "Trending for #Education": "Trending for #Education",
+  "Trending for #Technology": "Trending for #Technology",
   "--end--": "--end--"
 }
diff --git a/ui/component/button/view.jsx b/ui/component/button/view.jsx
index 46d467d05..dc0a18030 100644
--- a/ui/component/button/view.jsx
+++ b/ui/component/button/view.jsx
@@ -97,6 +97,9 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
   const combinedRef = useCombinedRefs(ref, innerRef, myref);
   const size = iconSize || (!label && !children) ? 18 : undefined; // Fall back to default
 
+  // Label can be a string or object ( use title instead )
+  const ariaLabel = description || (typeof label === 'string' ? label : title);
+
   const content = (
     <span className="button__content">
       {icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
@@ -224,7 +227,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
     <button
       ref={combinedRef}
       title={title || defaultTooltip}
-      aria-label={description || label || title}
+      aria-label={ariaLabel}
       className={combinedClassName}
       onClick={(e) => {
         if (onClick) {