fix(dashboard) Standardize heading levels for consistent hierarchy (#13861)

## Summary

**What** — What changes are introduced in this PR?

This PR standardizes heading levels across dashboard components to maintain proper semantic HTML hierarchy.

**Why** — Why are these changes relevant or necessary?  

*Please provide answer here*

**How** — How have these changes been implemented?

- Added optional `headingLevel` prop `"h1" | "h2" | "h3"` to `DataTable` component with default value of `"h1"`

- Modified `Heading` component usage to explicitly specify the appropriate level based on context

**Testing** — How have these changes been tested, or how can the reviewer test the feature?

*Please provide answer here*

---

## Checklist

Please ensure the following before requesting a review:

- [x] I have added a **changeset** for this PR
    - Every non-breaking change should be marked as a **patch**
    - To add a changeset, run `yarn changeset` and follow the prompts
- [ ] The changes are covered by relevant **tests**
- [x] I have verified the code works as intended locally
- [ ] I have linked the related issue(s) if applicable
This commit is contained in:
Radek Napora
2025-10-28 13:11:50 +01:00
committed by GitHub
parent 0b202cc509
commit c1c0e1490a
14 changed files with 22 additions and 18 deletions

View File

@@ -77,6 +77,7 @@ interface DataTableProps<TData> {
rowHref?: (row: TData) => string
emptyState?: DataTableEmptyStateProps
heading?: string
headingLevel?: "h1" | "h2" | "h3"
subHeading?: string
prefix?: string
pageSize?: number
@@ -117,6 +118,7 @@ export const DataTable = <TData,>({
enableFilterMenu,
rowHref,
heading,
headingLevel = "h1",
subHeading,
prefix,
pageSize = 10,
@@ -384,7 +386,7 @@ export const DataTable = <TData,>({
<div className="flex items-center gap-x-4">
{shouldRenderHeading && (
<div>
{heading && <Heading>{heading}</Heading>}
{heading && <Heading level={headingLevel}>{heading}</Heading>}
{subHeading && (
<Text size="small" className="text-ui-fg-subtle">
{subHeading}