[Ingest Pipelines] Processors editor a11y focus states

[jloleysens]

Summary

• Updated structure of HTML (removed unnecessary flex group and items)
• Optimised keyboard focus states in move mode
• Updated styling to better cater for overflow in certain cases

Addresses items 2 & 3 of #71666

Test

Pipeline JSON

{
  "processors": [
    {
      "grok": {
        "field": "my-field",
        "patterns": [
          "enter"
        ],
        "description": "test 2"
      }
    },
    {
      "grok": {
        "field": "test",
        "patterns": [
          "test",
          "test-again"
        ],
        "description": "test 1",
        "on_failure": [
          {
            "bytes": {
              "field": "test"
            }
          }
        ]
      }
    }
  ]
}

1. Navigate to create pipeline processor in Ingest pipelines plugin
2. Import processors from above
3. Tab to the move button of the inner "Bytes" processor
4. Use the keyboard navigation to either cancel the move (can be cancelled with esc key too) or place the processor somewhere else. Using spacebar+tab to interact with the buttons and drop zones.

Release note

Optimised keyboard navigation of the ingest processors component

Gif

Checklist

Delete any items that are not applicable to this PR.

• This was checked for keyboard-only and screenreader accessibility

[elasticmachine]

Pinging @elastic/es-ui (Team:Elasticsearch UI)

[jloleysens]

@elasticmachine merge upstream

[alisonelizabeth]

Changes LGTM. Thanks for making these improvements @jloleysens!

[cchaos]

Adding and removing tabindex properties from semantically both interact-able (button) and non-interact-able (div) elements seems like a big accessibility issue. Has this been tested with screen-readers?

[jloleysens]

Hi @cchaos ! In this issue #71666 @myasonik and I went through this component with a screen reader and identified this as something that we can optimise for navigating with keyboard.

This PR specifically addresses points 2 & 3 of that issue. Turning tabindex off for certain otherwise tabbable components enables faster traversal with a keyboard to the "drop zones".

Does this answer your question or was there a specific concern that I hadn't considered in the proposed changes?

[cchaos]

Thanks for the history and explanation! So long as there's been discussion and thought towards a11y 👍

[myasonik]

Hey, sorry to hold this up a touch, but I want to give this a pass through. Will try to get to it before end of day.

[jloleysens]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 9c5c5f6

Metrics [docs]

async chunks size

id	before	after	diff
ingestPipelines	812.9KB	812.9KB	+4.0B

History

• 💛 Build #79085 was flaky a52b872
• 💚 Build #79084 succeeded a2edd47
• 💔 Build #78754 failed eb7d539

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[myasonik]

👍 This doesn't fix all the a11y issues on the page but it does improve the state of things for keyboard users so it's best to merge

For a little more context on the screen reader front, a lot of problems on the page stem from using react-virtualized so the situation won't really be improved there until we can swap to using react-window