Change page title of application headers to h1 and xs (#8227) (#8341)

* Change page title of application headers to h1 and xs

* Changeset file for PR #8227 created/updated

---------

(cherry picked from commit 7ab0980)

Signed-off-by: Miki <miki@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
(cherry picked from commit 0fe22af)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

changelogs/fragments/8227.yml

@@ -0,0 +1,2 @@
+feat:
+- Adjust semantics and sizing of page titles in application headers ([#8227](/~https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8227))

src/plugins/navigation/public/top_nav_menu/_index.scss

@@ -67,7 +67,7 @@
 
 .osdTopNavMenuScreenTitle {
   // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
-  .euiText {
+  .euiTitle {
     line-height: $euiFormControlCompressedHeight;
     white-space: nowrap;
     overflow: hidden;

src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx

@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiHeaderLinks, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHeaderLinks, EuiText, EuiTitle } from '@elastic/eui';
 import classNames from 'classnames';
 import React, { ReactElement, useRef } from 'react';
 
@@ -177,7 +177,9 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
                 <MountPointPortal setMountPoint={setMenuMountPoint}>
                   <EuiFlexGroup alignItems="stretch" gutterSize="none">
                     <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
-                      <EuiText size="s">{screenTitle}</EuiText>
+                      <EuiTitle size="xs">
+                        <h1>{screenTitle}</h1>
+                      </EuiTitle>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>{renderMenu(menuClassName)}</EuiFlexItem>
                     <EuiFlexItem>{renderSearchBar({ isFilterBarPortable: true })}</EuiFlexItem>
@@ -192,7 +194,9 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
               <MountPointPortal setMountPoint={setMenuMountPoint}>
                 <EuiFlexGroup alignItems="stretch" gutterSize="none">
                   <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
-                    <EuiText size="s">{screenTitle}</EuiText>
+                    <EuiTitle size="xs">
+                      <h1>{screenTitle}</h1>
+                    </EuiTitle>
                   </EuiFlexItem>
                   <EuiFlexItem>{renderMenu(menuClassName, true)}</EuiFlexItem>
                 </EuiFlexGroup>
@@ -210,7 +214,9 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
                 <MountPointPortal setMountPoint={setMenuMountPoint}>
                   <EuiFlexGroup alignItems="stretch" gutterSize="none">
                     <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
-                      <EuiText size="s">{screenTitle}</EuiText>
+                      <EuiTitle size="xs">
+                        <h1>{screenTitle}</h1>
+                      </EuiTitle>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>{renderMenu(menuClassName)}</EuiFlexItem>
                     <EuiFlexItem className="globalDatePicker">