#1378 Use specific aria props in LocalizedLink (#1379)

* Rename aria to ariaProps on LocalizedLink

avoids name colision with future react prop while allowing for flexibility in what aria props are passed

* Update CHANGELOG to document change

* Use aria attributes with the -

* Define aria-current type with AriaAttributes

CHANGELOG.md

@@ -78,6 +78,7 @@ All notable changes to this project will be documented in this file. The format
 - Fixed:
 
   - Correct LinkButton and other styles in Storybook ([#1309](https://github.com/bloom-housing/bloom/pull/1309)) (Jared White & Jesse James Arnold)
+  - Fix aria reserved for future use warning ([#1378](https://github.com/bloom-housing/bloom/issues/1378)) (Andrea Egan)
 
 ## 1.0.0 / 2021-05-21
 

ui-components/src/config/NavigationContext.tsx

@@ -1,11 +1,12 @@
-import React, { createContext, FunctionComponent } from "react"
+import React, { AriaAttributes, createContext, FunctionComponent } from "react"
 import { UrlObject } from "url"
 
 type Url = UrlObject | string
 
 export interface LinkProps {
   href: string
-  aria?: Record<string, string>
+  "aria-label"?: string
+  "aria-current"?: AriaAttributes["aria-current"]
   className?: string
   tabIndex?: number
 }
@@ -36,7 +37,8 @@ export const NavigationContext = createContext<NavigationContextProps>({
         e.preventDefault()
         alert(`You clicked: ${props.href}`)
       }}
-      {...props.aria}
+      {...(props["aria-label"] ? { "aria-label": props["aria-label"] } : {})}
+      {...(props["aria-current"] ? { "aria-current": props["aria-current"] } : {})}
     >
       {props.children}
     </a>

ui-components/src/headers/SiteHeader.tsx

@@ -69,7 +69,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
       <LocalizedLink
         className={`navbar-item logo ${logoClass} ${getLogoWidthClass()}`}
         href="/"
-        aria={{ "aria-label": "homepage" }}
+        aria-label="homepage"
       >
         <div
           className={`logo__lockup ${getLogoWidthClass()} ${

ui-components/src/navigation/Breadcrumbs.tsx

@@ -10,7 +10,7 @@ const BreadcrumbLink = (props: { href: string; children: React.ReactNode; curren
   <li>
     <LocalizedLink
       className={props.current ? "is-active" : undefined}
-      aria={props.current ? { "aria-current": "page" } : undefined}
+      aria-current={props.current ? "page" : undefined}
       href={props.href}
     >
       {props.children}

ui-components/src/navigation/TabNav.tsx

@@ -35,7 +35,7 @@ const TabNavItem = (props: TabNavItemProps) => {
     >
       <LocalizedLink
         className={props.current ? "is-active" : undefined}
-        aria={props.current ? { "aria-current": "page" } : undefined}
+        aria-current={props.current ? "page" : undefined}
         href={props.href}
         tabIndex={props.current ? 0 : -1}
       >