[Search:Connectors:SyncRules page]Issues with Draft Rules flyout table

[L1nBra]

Description
Table should be correctly defined in the code, that for users, using assistive technology it would be clearly announced as a table. That users would know what this table consists of and what values are present for which columns.
Instructions about the table, how to perform drag and drop actions, should be enough for the user to hear them only one time when navigating to the row, not to hear with each element, otherwise user can get overwhelmed.
Focus should be visible on corresponding element on which user is at the moment and elements itself shouldn't be duplicated.

Preconditions
Stateful Connectors -> Sync Rules page is opened.
Connectors are added.
Few Sync rules are added.
Use Screen Reader (NVDA).

Steps to reproduce

1.Navigate to Draft new sync rules while using only keyboard by pressing Tab key.
2.Press Enter.
3.Navigate to the table.
4.Navigate through the table pressing Tab key.
5.Observe Screen Reader announcement.
6.Navigate to Add sync rule button.
7.Press Enter.
8.Navigate through newly appeared row by pressing Tab key.
9.Observe Screen Reader announcement.

NVDA Speech Viewer + UI elements
navigating through the table

When adding new sync rule

Html snippet

Actual Result

1. No announcement about the table, table's columns. Only the values in the row are announced. When pressing T key with NVDA turned on - it doesn't find table at all.
2. Instructions about drag and drop are announced with each element (with the row, with Edit button, with Delete button).
3. Duplicated button announcement for Edit, Delete buttons.
4. No focus visible after pressing Tab key when user is on Add sync rule button.
5. When adding new sync rule - for the new row fields are announced without names/labels (or without any explanation), only as "combo box Include collapsed", "edit blank".

Expected Result

1. Table is found when using screen reader and correctly announced with how many rows are present, what columns are present in it.
2. It would be better if instructions for drag and drop are announced one time when user navigates to the row.
3. Button is announced one time ("Edit button").
4. After Add sync rule button, focus should be on the row in the table (because if user press Spacebar he/she can drag and drop the row).
5. It should be clearly announced for the user on which field he/she is at the moment (the value and for which column).

Meta Issue

Kibana Version: 8.17.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 1.3.1: Info and Relationships (Level A)(https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)
• Understanding SC 2.4.7: Focus Visible (Level AA)(https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html)

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

[elasticmachine]

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

[erikcurrin-elastic]

This requires a rewrite of the code to produce a table or research on how to make the divs look like a table to a screen reader.