Skip to content

[EuiBasicTable] Issues with empty state announcement in VoiceOver #9333

@seialkali

Description

@seialkali

Reported by

@seialkali

Describe the bug

In the EuiBasicTable (and EuiInMemoryTable which uses it):

  1. When noItemsMessage prop is not set
    • In Chrome and Safari, VoiceOver will announce [object, Object] in place of where the no item message should be.
    • In Firefox, the neither the table caption, nor an empty message is announced
  2. When noItemsMessage prop is set with ReactNode instead of string
    • In Chrome and Safari, VoiceOver will announce [object, Object] in place of where the no item message should be.
    • In Firefox, the neither the table caption, nor an empty message is announced

NOTE: If the table has an error, this is also not announced by VoiceOver. Not sure if this is already a known issue, or if it's not considered an issue, or if there's a recommended workaround already.

Impact and severity
Low(?)

Environment and versions

  • EUI version: v112.0.0
  • React version: 18
  • Browser: Chrome, Safari, Firefox
  • Operating System: Mac

Minimum reproducible sandbox

https://codesandbox.io/p/sandbox/stoic-fast-rhqqtt?file=%2Findex.tsx

To Reproduce

On Chrome or Safari:

  • In the sandbox you should see a table with a ReactNode set as the noItemsMessage prop, and one without any noItemsMessage prop set.
  • With VoiceOver on, tab onto both tables when there are no results and you will hear/see VoiceOver announce [object, Object] where the empty table message should be

On Firefox:

  • With VoiceOver on, tab onto both tables when there are no results and you observe VoiceOver does not announce the table caption nor any empty message

Expected behavior

When there are no items in a table:

  1. In Chrome or Safari, when noItemsMessage is not set or when it is set with a ReactNode, VoiceOver should not announce [object, Object]
  2. In Firefox, VoiceOver should announce the table caption and an empty state

Screenshot
Image

Metadata

Metadata

Assignees

Labels

Type

No fields configured for Bug.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions