Fix aria label error on the console (#18370)

* fix aria label bug

* improve solution

* improve solution

* improve solution

* update snapshot

ui/components/app/account-menu/__snapshots__/account-menu.test.js.snap

@@ -296,7 +296,7 @@ exports[`Account Menu Render Content should not render keyring label if keyring
         class="account-menu__item__icon"
       >
         <span
-          arialabel="Settings"
+          aria-label="Settings"
           class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
           style="mask-image: url('./images/icons/setting.svg');"
         />

ui/components/ui/box/box.js

@@ -222,6 +222,7 @@ const Box = React.forwardRef(function Box(
     className,
     backgroundColor,
     color,
+    ariaLabel,
     as = 'div',
     ...props
   },
@@ -300,13 +301,31 @@ const Box = React.forwardRef(function Box(
     return children(boxClassName);
   }
   const Component = as;
+
+  const ariaLabelProp = {};
+  if (isCustomComponent(Component)) {
+    ariaLabelProp.ariaLabel = ariaLabel;
+  } else {
+    ariaLabelProp['aria-label'] = ariaLabel;
+  }
+
+  if (props['aria-label']) {
+    ariaLabelProp['aria-label'] = props['aria-label'];
+  }
+
   return (
-    <Component className={boxClassName} ref={ref} {...props}>
+    <Component className={boxClassName} ref={ref} {...props} {...ariaLabelProp}>
       {children}
     </Component>
   );
 });
 
+// Both class or functional components have type function.
+// Built-in HTML elements (div, span, etc.) have type string.
+function isCustomComponent(element) {
+  return typeof element.type === 'function';
+}
+
 Box.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   flexDirection: PropTypes.oneOfType([
@@ -372,6 +391,8 @@ Box.propTypes = {
    * ./ui/helpers/constants/design-system.js
    */
   color: MultipleTextColors,
+  ariaLabel: PropTypes.string,
+  'aria-label': PropTypes.string,
 };
 
 export default Box;