[Search][a11y] Fixing connectors pageHeader hirarchy content

[JoseLuisGJ]

Replace the existing ConnectorNameAndDescription component with separate ConnectorName and ConnectorDescription components for improved accessibility as pointed out in this issue #198001 . Now only the H1 wraps the Title and the Descriptions is out of it.

Before:

After:

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)

[elasticmachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 9c72b9e

Failed CI Steps

• FTR Configs #102

Test Failures

• [job] [logs] FTR Configs #102 / dashboard app - group 6 dashboard view edit mode shows lose changes warning and loses changes on confirmation when a new vis is added

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
enterpriseSearch	2312	2313	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
enterpriseSearch	2.6MB	2.6MB	+417.0B

cc @JoseLuisGJ

[navarone-feekery]

Small request; can you provide a gif of you interacting with the title/description just to confirm the functionality still works?

[JoseLuisGJ]

Sure @navarone-feekery :

CleanShot.2024-11-22.at.15.13.48.mp4

[jedrazb]

could you expand the h1 tag to make sure no buttons are wrapped within h1 tag?

[JoseLuisGJ]

Good point @jedrazb there are still buttons within the h1 tag reading the expected behaviour from the issue ticket #198001:

Expected Result

Heading level is only announced one time (for one element, in this case title of connector). Heading level is not announced for description, nor for Save, Cancel buttons.

As commented here in the original issue ticket: we, from Search POV, can solve the issue regarding H1 not wrapping the description.

But bearing in mind that:

<EnterpriseSearchContentPageTemplate
      pageChrome={[...connectorsBreadcrumbs, connector?.name ?? '...']}
      pageViewTelemetry={tabId}
      isLoading={isLoading}
      pageHeader={{
        description: connector ? <ConnectorDescription connector={connector} /> : '...',
        pageTitle: connector ? <ConnectorName connector={connector} /> : '...',
        rightSideGroupProps: {
          gutterSize: 's',
          responsive: false,
          wrap: false,
        },
        rightSideItems: getHeaderActions(index, connector),
        tabs: tabs as Array<EuiTabProps & { label: React.ReactNode }>,
      }}
    >
      {selectedTab?.content || null}
</EnterpriseSearchContentPageTemplate>

1. PageHeader.PageTitle renders the content wrapped in a H1 by default
2. Within the ConnectorName we provide. We use and consume this EUI component EuiInlineEditTitle which renders these two buttons. So this part would be so hard to fix due to is part of the global PageTemplate we use. So we should decide if that's OK leaving this buttons within H1 oterwise we should think about remove completely the edit inline feature for titles to get the accessibility compliance.