Add aria-label to resolve accessibility

manifest.json

@@ -8,7 +8,8 @@
   "builders": {
     "store": "0.x",
     "react": "3.x",
-    "docs": "0.x"
+    "docs": "0.x",
+    "messages": "1.x"
   },
   "mustUpdateAt": "2019-04-02",
   "categories": [],

messages/en.json

@@ -0,0 +1,3 @@
+{
+  "store/breadcrumb.homeLink": "Home Link"
+}

messages/es.json

@@ -0,0 +1,3 @@
+{
+  "store/breadcrumb.homeLink": "Enlace de Inicio"
+}

messages/pt.json

@@ -0,0 +1,3 @@
+{
+  "store/breadcrumb.homeLink": "Link de Início"
+}

react/components/BaseBreadcrumb.tsx

@@ -1,5 +1,6 @@
 import React, { Fragment, useMemo } from 'react'
 import unorm from 'unorm'
+import { useIntl } from 'react-intl'
 import { Link } from 'vtex.render-runtime'
 import { useCssHandles, applyModifiers } from 'vtex.css-handles'
 import { IconCaret, IconHome } from 'vtex.store-icons'
@@ -69,6 +70,7 @@ const Breadcrumb: React.FC<Props> = ({
   homeIconSize = 26,
   caretIconSize = 8,
 }) => {
+  const intl = useIntl()
   const handles = useCssHandles(CSS_HANDLES)
   const { isMobile } = useDevice()
   const navigationList = useMemo(
@@ -88,6 +90,9 @@ const Breadcrumb: React.FC<Props> = ({
       <Link
         className={`${handles.link} ${handles.homeLink} ${linkBaseClasses} v-mid`}
         page="store.home"
+        aria-label={intl.formatMessage({
+          id: 'store/breadcrumb.homeLink',
+        })}
       >
         <IconHome size={homeIconSize} />
       </Link>