Skip to content

Expose Empty's title as an ARIA heading via headingLevel - #1179

Open
sbansal-eightfold wants to merge 1 commit into
EightfoldAI:mainfrom
sbansal-eightfold:fix/empty-heading-level
Open

sbansal-eightfold wants to merge 1 commit into
EightfoldAI:mainfrom
sbansal-eightfold:fix/empty-heading-level

Conversation

@sbansal-eightfold

Copy link
Copy Markdown

SUMMARY:

Empty's title has never been exposed to screen readers as a heading. The component has a headingLevel prop, but it's documented @deprecated Unused prop and was never wired into the render — title always renders as a plain <div>. This was flagged in a third-party accessibility audit (Eightfold Jira ENG-215077): a search/filter result page using Empty for its "no results" state has no heading for a screen reader to navigate to.

This wires up headingLevel the same way Dialog's BaseDialog already does it for its header: when headingLevel is set, the title div gets role="heading" and aria-level. No heading role is applied when headingLevel is omitted, so this is fully backward compatible.

JIRA TASK (Eightfold Employees Only):

https://eightfoldai.atlassian.net/browse/ENG-215077

CHANGE TYPE:

  • Bugfix Pull Request
  • Feature Pull Request

TEST COVERAGE:

  • Tests for this change already exist
  • I have added unittests for this change

TEST PLAN:

  • Added 3 Jest tests to Empty.test.tsx mirroring the existing Dialog headingLevel coverage: no heading attributes when headingLevel is undefined, role="heading"/aria-level applied when it's set, and no heading role added when title itself is absent.
  • yarn jest src/components/Empty/Empty.test.tsx — all 9 tests pass (6 existing + 3 new).
  • yarn typecheck — no new errors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant