[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

[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: