chore(js-ts): Improve accessibility and update to useIntl hook

Co-Authored-By: Joseph Gross <joseph@cognition.ai>

Author: devin-ai-integration[bot]

src/elements/common/header/Header.tsx

@@ -4,7 +4,7 @@
  */
 
 import * as React from 'react';
-import { injectIntl, IntlShape } from 'react-intl';
+import { useIntl } from 'react-intl';
 import Logo from './Logo';
 import messages from '../messages';
 import { VIEW_FOLDER, VIEW_SEARCH } from '../../../constants';
@@ -13,7 +13,6 @@ import { View } from '../../../common/types/core';
 import './Header.scss';
 
 interface HeaderProps {
-    intl: IntlShape;
     isHeaderLogoVisible?: boolean;
     isSmall: boolean;
     logoUrl?: string;
@@ -22,17 +21,15 @@ interface HeaderProps {
     view: View;
 }
 
-// eslint-disable-next-line react/prop-types
 const Header = ({
     isHeaderLogoVisible = true,
     view,
     isSmall,
     searchQuery,
     onSearch,
     logoUrl,
-    intl,
 }: HeaderProps): JSX.Element => {
-    const { formatMessage } = intl;
+    const { formatMessage } = useIntl();
     const search = ({ currentTarget }: { currentTarget: HTMLInputElement }): void => onSearch(currentTarget.value);
     const searchMessage = formatMessage(messages.searchPlaceholder);
     const isFolder = view === VIEW_FOLDER;
@@ -57,4 +54,4 @@ const Header = ({
 };
 
 export { Header as HeaderBase };
-export default injectIntl(Header);
+export default Header;

src/elements/common/header/Logo.tsx

@@ -16,14 +16,14 @@ interface LogoProps {
 
 function getLogo(url?: string): React.ReactNode {
     if (url === 'box') {
-        return <IconLogo />;
+        return <IconLogo aria-label="Box logo" role="img" />;
     }
     if (typeof url === 'string') {
-        return <img alt="" className="be-logo-custom" src={url} />;
+        return <img alt="Logo" aria-label="Custom logo" className="be-logo-custom" src={url} />;
     }
 
     return (
-        <div className="be-logo-placeholder">
+        <div className="be-logo-placeholder" role="img" aria-label="Logo placeholder">
             <FormattedMessage {...messages.logo} />
         </div>
     );