[Look&Feel] Refactor to use semantic headers for page, modal & flyout

[zhongnansu]

Description

Refactor to use semantic headers for page, modal & flyout

Issues Resolved

Screenshot

Testing the changes

Changelog

• refactor: [Look&Feel] Refactor to use semantic headers for page, modal & flyout

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 67.55%. Comparing base (87627af) to head (829e83c).
Report is 339 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7192   +/-   ##
=======================================
  Coverage   67.55%   67.55%           
=======================================
  Files        3469     3469           
  Lines       68479    68479           
  Branches    11130    11130           
=======================================
  Hits        46264    46264           
  Misses      19512    19512           
  Partials     2703     2703           

Flag	Coverage Δ
Linux_1	33.13% <ø> (ø)
Linux_2	55.26% <ø> (ø)
Linux_3	45.30% <ø> (ø)
Linux_4	34.71% <ø> (ø)
Windows_1	33.15% <ø> (ø)
Windows_2	55.21% <ø> (ø)
Windows_3	45.32% <ø> (ø)
Windows_4	34.71% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[virajsanghvi]

Clarifications on guidance after going through these:

• Let's only make changes to page content headers or modal/flyout headers - other h1/h2 tags, let's ignore as they may not be being used correctly or are there for accessibility purposes.
• Let's swap out EuiTitle for EuiText size='s' (or wrap when not present)
• If its using a small or xs EuiTitle, let's probably not change as they're intentionally small.

Also, I think you will want to search for all modals/flyouts to adjust their headers. I don't think they all use header tags today so may not be coming up in your search.

[virajsanghvi]

Is this in a visualization? If so, let's not change - given its intentionally small, not sure if we should change either way. If you can point of screenshot, would help me give feedback

[zhongnansu]

this is a header in the select vis type modal, but it's not the major header. I agree we can leave it as small.

[virajsanghvi]

Let's leave this as is because its in the visualization

[zhongnansu]

this is the page content header for create visualization. Given the requirement, I think we should wrap it with EuiText

[zhongnansu]

Clarifications on guidance after going through these:

• Let's only make changes to page content headers or modal/flyout headers - other h1/h2 tags, let's ignore as they may not be being used correctly or are there for accessibility purposes.
• Let's swap out EuiTitle for EuiText size='s' (or wrap when not present)
• If its using a small or xs EuiTitle, let's probably not change as they're intentionally small.

Also, I think you will want to search for all modals/flyouts to adjust their headers. I don't think they all use header tags today so may not be coming up in your search.

Updated the PR to use EuiText accordingly and refactored missing modals/flyouts to use semantic headers.

[virajsanghvi]

Given this isn't a flyout but a pane, let's not make this change:

[zhongnansu]

Given this isn't a flyout but a pane, let's not make this change:

@virajsanghvi This is actually being reverted and will remain "xs". I will correct the screenshot

[opensearch-trigger-bot]

The backport to 2.x failed:

The process '/usr/bin/git' failed with exit code 128

To backport manually, run these commands in your terminal:

# Navigate to the root of your repository
cd $(git rev-parse --show-toplevel)
# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add ../.worktrees/OpenSearch-Dashboards/backport-2.x 2.x
# Navigate to the new working tree
pushd ../.worktrees/OpenSearch-Dashboards/backport-2.x
# Create a new branch
git switch --create backport/backport-7192-to-2.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 96fb9d629e6539db4dacd922df3fff6809fdb407
# Push it to GitHub
git push --set-upstream origin backport/backport-7192-to-2.x
# Go back to the original working tree
popd
# Delete the working tree
git worktree remove ../.worktrees/OpenSearch-Dashboards/backport-2.x

Then, create a pull request where the base branch is 2.x and the compare/head branch is backport/backport-7192-to-2.x.