Change which elements are considered headings

6 files changed, 20 insertions, 11 deletions

diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx
index 3d344887bd..6dae04387e 100644
--- a/gui/src/renderer/components/Account.tsx
+++ b/gui/src/renderer/components/Account.tsx
@@ -16,7 +16,7 @@ import AccountTokenLabel from './AccountTokenLabel';
 import * as AppButton from './AppButton';
 import { Layout } from './Layout';
 import { ModalContainer } from './Modal';
-import { BackBarItem, NavigationBar, NavigationItems } from './NavigationBar';
+import { BackBarItem, NavigationBar, NavigationItems, TitleBarItem } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
 import { AccountToken } from '../../shared/daemon-rpc-types';
@@ -45,6 +45,12 @@ export default class Account extends React.Component<IProps> {
                     messages.pgettext('navigation-bar', 'Settings')
                   }
                 </BackBarItem>
+                <TitleBarItem>
+                  {
+                    // TRANSLATORS: Title label in navigation bar
+                    messages.pgettext('account-view', 'Account')
+                  }
+                </TitleBarItem>
               </NavigationItems>
             </NavigationBar>
 
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index 20045086be..a18e3f09b3 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -53,7 +53,7 @@ const BrandContainer = styled.div({
   alignItems: 'center',
 });
 
-const Title = styled.h1({
+const Title = styled.span({
   fontFamily: 'DINPro',
   fontSize: '24px',
   fontWeight: 900,
diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index 28b6178397..01d42bb8ba 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -136,7 +136,7 @@ const TitleBarItemContext = React.createContext({
   get titleContainerRef(): React.RefObject<HTMLDivElement> {
     throw Error('Missing TitleBarItemContext provider');
   },
-  get measuringTitleRef(): React.RefObject<HTMLSpanElement> {
+  get measuringTitleRef(): React.RefObject<HTMLHeadingElement> {
     throw Error('Missing TitleBarItemContext provider');
   },
 });
@@ -151,7 +151,7 @@ export const NavigationBar = function NavigationBarT(props: INavigationBarProps)
   const [titleAdjustment, setTitleAdjustment] = useState(0);
 
   const titleContainerRef = useRef() as React.RefObject<HTMLDivElement>;
-  const measuringTitleRef = useRef() as React.RefObject<HTMLSpanElement>;
+  const measuringTitleRef = useRef() as React.RefObject<HTMLHeadingElement>;
   const navigationBarRef = useRef() as React.RefObject<HTMLDivElement>;
 
   useLayoutEffect(() => {
@@ -215,10 +215,7 @@ export const TitleBarItem = React.memo(function TitleBarItemT(props: ITitleBarIt
 
   return (
     <StyledTitleBarItemContainer ref={titleContainerRef}>
-      <StyledTitleBarItemLabel
-        titleAdjustment={titleAdjustment}
-        visible={visible}
-        aria-hidden={!visible}>
+      <StyledTitleBarItemLabel titleAdjustment={titleAdjustment} visible={visible}>
         {props.children}
       </StyledTitleBarItemLabel>
 
diff --git a/gui/src/renderer/components/NavigationBarStyles.tsx b/gui/src/renderer/components/NavigationBarStyles.tsx
index c141f4cfed..3f964c1f93 100644
--- a/gui/src/renderer/components/NavigationBarStyles.tsx
+++ b/gui/src/renderer/components/NavigationBarStyles.tsx
@@ -44,7 +44,7 @@ interface ITitleBarItemLabelProps {
   visible?: boolean;
 }
 
-export const StyledTitleBarItemLabel = styled.span({}, (props: ITitleBarItemLabelProps) => ({
+export const StyledTitleBarItemLabel = styled.h1({}, (props: ITitleBarItemLabelProps) => ({
   fontFamily: 'Open Sans',
   fontSize: '16px',
   fontWeight: 600,
diff --git a/gui/src/renderer/components/SettingsHeader.tsx b/gui/src/renderer/components/SettingsHeader.tsx
index c0223461e0..808b6f80c7 100644
--- a/gui/src/renderer/components/SettingsHeader.tsx
+++ b/gui/src/renderer/components/SettingsHeader.tsx
@@ -13,7 +13,7 @@ export const ContentWrapper = styled.div({
   },
 });
 
-export const HeaderTitle = styled.h1(bigText);
+export const HeaderTitle = styled.span(bigText);
 export const HeaderSubTitle = styled.span(smallText);
 
 interface ISettingsHeaderProps {
diff --git a/gui/src/renderer/components/Support.tsx b/gui/src/renderer/components/Support.tsx
index 9436636516..d1aee5b0d4 100644
--- a/gui/src/renderer/components/Support.tsx
+++ b/gui/src/renderer/components/Support.tsx
@@ -5,7 +5,7 @@ import * as AppButton from './AppButton';
 import ImageView from './ImageView';
 import { Layout } from './Layout';
 import { ModalAlert, ModalAlertType, ModalContainer } from './Modal';
-import { BackBarItem, NavigationBar, NavigationItems } from './NavigationBar';
+import { BackBarItem, NavigationBar, NavigationItems, TitleBarItem } from './NavigationBar';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 import {
   StyledBlueButton,
@@ -159,6 +159,12 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
                     messages.pgettext('navigation-bar', 'Settings')
                   }
                 </BackBarItem>
+                <TitleBarItem>
+                  {
+                    // TRANSLATORS: Title label in navigation bar
+                    messages.pgettext('support-view', 'Report a problem')
+                  }
+                </TitleBarItem>
               </NavigationItems>
             </NavigationBar>
             <StyledContentContainer>