[a11y] stream entry within log stream #183666
Conversation
rshen91
added
the
accessibility: cognition
|
/ci |
rshen91
added
Team:SharedUX
|
Pinging @elastic/appex-sharedux (Team:SharedUX) |
botelastic
bot
added
the
ci:project-deploy-observability
rshen91
added
the
release_note:skip
There was a problem hiding this comment.
@rshen91 I requested a new approach for this PR based on the originating issue Bhavya wrote. I found a way to get the axe-core errors to drop and make screen readers honor the layout closer to an actual table. LMK if you have any questions or would like to pair on a next iteration. Thank you!
| @@ -222,6 +222,7 @@ export class ScrollableLogTextStreamView extends React.PureComponent< | |||
| onExtendRange={(newDateExpression) => | |||
| updateDateRange({ startDateExpression: newDateExpression }) | |||
| } | |||
| aria-owns="streamEntry logTextStreamEntry" | |||
There was a problem hiding this comment.
I took a look at the originating issue again. I think what Bhavya was reporting was the Logs div[role="row"] "table rows" need a parent role="table". I quickly adjusted line 160 and added that role, then ran axe-core again. The error went away after I added the role and added aria-hidden="true" to both HR tags.
! scrollable_log_text_stream_view.tsx#160
+ <ScrollableLogTextStreamViewWrapper role="table">
- <ScrollableLogTextStreamViewWrapper>! scrollable_log_text_stream_view.tsx#225
- aria-owns="streamEntry logTextStreamEntry"| @@ -31,6 +31,7 @@ export const LogEntryRowWrapper = euiStyled.div.attrs(() => ({ | |||
| export interface LogEntryRowWrapperProps { | |||
| scale: TextScale; | |||
| isHighlighted?: boolean; | |||
| alt: string; | |||
There was a problem hiding this comment.
The alt won't be needed here to fix the originating issue. We're showing text on the page which is a great start. The trick is making screen readers understand that text is structured like a table, so they know how to parse individual rows and cells.
| alt={i18n.translate('xpack.logsShared.streamEntry.altText', { | ||
| defaultMessage: 'stream entry within log stream', | ||
| })} |
There was a problem hiding this comment.
We can remove this internationalization prop and its type too.
There was a problem hiding this comment.
💯 LGTM! I pulled your branch right before EOD and re-tested with axe-core and VoiceOver + Safari. No automated code violations, and the logs stream announced itself as a table properly. Most importantly, I was able to traverse the table using VO shortcuts. This gives me high confidence that NVDA and JAWS will also provide a good table navigation experience for users. Thanks Rachel!
rshen91
changed the title
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Async chunks
Canvas Sharable Runtime
History
To update your PR or re-run it, just comment with: cc @rshen91 |
kibanamachine
added
v8.15.0
backport:skip
…#183666) ## Summary Closes elastic/observability-dev#3349 ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
Summary
Closes https://github.com/elastic/observability-dev/issues/3349
Checklist
Delete any items that are not applicable to this PR.