EDSC-3068: Remove the empty heading Well renders on the order status page

[suthat]

Overview

What is the feature?

Closes #1362.

Well always renders a header block at the top of the component:

<section className={classes}>
  <header>
    <h2 className="well__heading">{heading}</h2>
    <div className="well__intro">{introduction}</div>
  </header>
  <div className="well__content">
    {children}
  </div>
</section>

Nothing ever passes heading or introduction. OrderStatus is the only consumer of Well in the app, and it uses the Well.Heading and Well.Introduction compound components as children instead. So on /downloads/:id the markup comes out with an empty <h2 class="well__heading"> sitting above the content — the empty heading SortSite flagged, and the grey gap in the screenshot on the issue. A screen reader user navigating by heading lands on a blank one before reaching "Download Status".

The intro <div> is dead in the same way, and there's a second clue that this block was left behind by the move to compound components: it renders well__intro, which doesn't exist in Well.scss. The stylesheet only defines well__introduction, which is the class WellIntroduction renders. That div has never had any styling.

What is the Solution?

Remove the header block and the two props that fed it.

I went with deleting rather than guarding with {heading && ...} because there's no caller to keep working — the props have no users, and the class name mismatch means half of the block was never wired up correctly in the first place. Happy to switch to a conditional render if you'd rather keep the props available.

Well had no test file, so I added one covering the children and the empty heading.

What areas of the application does this impact?

The order status page (/downloads/:id), which is the only place Well is used. Visually the only change is that the empty h2's bottom margin goes away, so the content above the "Download Status" heading tightens up slightly.

Testing

Reproduction steps

• Environment for testing: local
• Collection to test with: any collection you can place an order for

1. Download some data so that you have a retrieval, then open it from the Download Status and History page.
2. Inspect the page and look at the top of section.well. On main there's an <h2 class="well__heading"></h2> with nothing in it, followed by an empty <div class="well__intro">. Both are gone with this change.
3. Or navigate by heading with a screen reader — the blank stop before "Download Status" disappears.

The two new tests fail on main (expected document not to contain element, found <h2 and expected [ …(2) ] to have a length of 1 but got 2) and pass here.

$ npx vitest run static/src/js/components/Well static/src/js/components/OrderStatus
Test Files  18 passed (18)
     Tests  85 passed (85)

npm run lint is clean.

Attachments

No screenshot — the empty heading has no visible content, only a small amount of vertical space.

Unrelated to this change, but while I was in the folder I noticed WellHeading.jsx declares its component as WellSection, so headings show up under the wrong name in React DevTools. Happy to send a follow-up for that if it's worth fixing.

Checklist

• I have added automated tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas — n/a, this only removes code
• I have made corresponding changes to the documentation — n/a
• I have run npm audit fix and made note of any changes in this PR — no dependencies are touched by this PR
• My changes generate no new warnings