[Search:Connectors:SyncRules page]Heading levels announced together with buttons elements

[L1nBra]

Description
Headings should be used correctly and for the text. There shouldn't be two heading level 1 elements. Buttons should be announced as button elements without headings.

Preconditions
Stateful Connectors -> Sync rules page is opened.
Connectors are added.

Steps to reproduce

1.Navigate to button for connector title while using only keyboard by pressing Tab key.
2.Observe screen reader.
3.Press Tab key.
4.Observe Screen reader.
5.Navigate to Edit button for connector title with the keyboard.
6.Press Enter.
7.Navigate to Save or Cancel button.
8.Observe screen reader.

NVDA speech viewer + UI elements

html snippet (component which has description element belongs to h1 element)

Actual Result

• Both for title and for description for connector screen reader announces heading level 1; heading level is also announced together with Save, Cancel buttons.

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.

Meta Issue

Kibana Version: 8.16.0-SNAPSHOT

OS: Windows 11 Pro

Browser: Chrome Version 130.0.6723.70 (Official Build) (64-bit)

Screen reader: NVDA

WCAG or Vendor Guidance (optional)

• Understanding SC 4.1.2: Name, Role, Value (Level A)(https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html)
• Understanding SC 2.4.6: Headings and Labels (Level AA)(https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html)

Related to: https://github.com/elastic/search-team/issues/8256

Tasks

Preview Give feedback

1. [Search][a11y] Fixing connectors pageHeader hierarchy content #201359
   Project:Accessibility Team:Search backport:prev-minor release_note:skip v8.18.0 v9.0.0 +6
   
2. Refactor the page title edit inline to avoid buttons into H1 tag

[elasticmachine]

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

[JoseLuisGJ]

This PR #201359 solves the issue regarding wrapping the Title and the Description within the same H1. Now both are siblings and only the Title is wrapped with the H1 tag.

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. @L1nBra

[JoseLuisGJ]

This EUI doc regarding PageTitle confirms that just passing a regular text is the best option rather than an interactive edit inline component:

[JoseLuisGJ]

@L1nBra I added a task list in the ticket description due to there are things we can fix ini the short term but there are other than qill require more effort. This PR solve some parts of the issue described here and the second task item will be assess by the team to measure the feasibility and the approach.

[erikcurrin-elastic]

Restructure the HTML to remove the h2 from the button