[WIP] [ML] (Accessibility) Read summary info for File contents and Summary stats #31117

[PhilippBaranovskiy]

Fix: #31117

Summary

I added aria labels to inner <span/>s as well as used titleProps parameter for EuiDescriptionList to add tab indexes to <dt/> elements in order to make them focusable.

[elasticmachine]

Pinging @elastic/ml-ui

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[maryia-lapata]

Please take a look at the comments

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[PhilippBaranovskiy]

@jgowdyelastic Thanks for your review! I've renamed the function as well as have added object destruction as you suggested.
Please, have a look and confirm the PR whether everything looks good for you.

[PhilippBaranovskiy]

@maryia-lapata, thank you for the review! I've applied suggestion you made, moreover have updated translate() parameters and defaultMesssage exactly as you suggested.
Please, have a look and confirm PR whether everything looks good for you! Otherwise, let me know what could be improved.

[jgowdyelastic]

LGTM

[maryia-lapata]

LGTM, checked with VoiceOver

[peteharverson]

@rockfield @maryia-lapata the various parts of the Summary panel are now tabbable, with aria-label properties added, but there does not seem to be any indication that the tabbable elements (h3 and dt) have focus. Do you know if there is a requirement that we should provide visible indication of which element has focus?

[PhilippBaranovskiy]

@peteharverson thanks for pointing that out! I'm not sure whether there is a requirement for that,
however visible indication is always better than lack of that 🙆‍♂️
So, I'm looking into styles and checking that.
Thank you so much!

Do you know if there is a requirement that we should provide a visible indication of which element has a focus?

@maryia-lapata

[PhilippBaranovskiy]

Hello,
I've tested this functionality with NVDA and Jaws screen readers on Windows (which is supposed to be the app that is used by real people in real life) as well as with VoiceOver on Mac -- it works correctly with initial implementation (before this PR).

It does due to the fact that the working with page content happens in a slightly different way neither switching focus from one item to another.
If I need to go to the next piece of content, I just hit the key. That's how I read it line by line (that's what this issue is about).

For instance, for VoiceOver those commands are:

• Control + ⌥ + ⌘ + H: go to the "Summary" heading
• Control + ⌥ + ⌘ + shift ⇧ + H: go back to the "File contents" heading
• Control + ⌥ + ↓: to go to the "Number of lines analyzed" and so forth

For NVDA (Win) keys are slightly different:

• H: go to the "Summary" heading
• shift ⇧ + H: go back to the "File contents" heading
• Control + ↓: to go to the "Number of lines analyzed" and further

Also, in this mode the :focus state is not applied to the element as screen readers handle that indication by itself (VoiceOver does, NVDA doesn't). So if even I code that in .css, these changes are not going to be visible.

The way we used to see this process (hitting tab to go throughout the content) is not supposed to work this way.
Tabbing is supposed to go throughout the interactive items such as links, button, selects.

Since all described above, I suggest that I should decline this PR and close initial #31117 issue.
@peteharverson, @maryia-lapata, @rayafratkina, please confirm.

On the following video you can see how the initial implementation (before this PR) works with VoiceOver on Mac:

[peteharverson]

I confirmed that using NVDA the Summary section is read out line by line before this PR (using H and arrow down navigation keys).

@rayafratkina can you confirm that it is ok to close this PR without merging, and close the original issue #31117, as it seems that using screenreaders NVDA / VoiceOver on Mac, that this is working correctly as-is?

[rayafratkina]

@peteharverson @rockfield yes, it's ok to close the original issue without making any changes.
Not sure if something changed along the way or it was just a misunderstanding, but the screen is readable and that is all we need.
Thanks for digging into this!

[PhilippBaranovskiy]

I'm closing this PR as the initial implementation is correct, — explanation is in the comment above.