Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EuiTable][a11y] select row Checkbox elements must have correct labels #7672

Merged
merged 4 commits into from
Apr 12, 2024
Merged

[EuiTable][a11y] select row Checkbox elements must have correct labels #7672

merged 4 commits into from
Apr 12, 2024

Conversation

alexwizp
Copy link
Contributor

@alexwizp alexwizp commented Apr 11, 2024 •
edited
Loading

Closes: #7542

Summary

We've received reports of a few accessibility (a11y) issues concerning the table component and the select/deselect row functionality. Could we consider adding an aria-label attribute to address these checkbox-related concerns?

image

Historically, this has been an old issue, and attempts have already been made to fix it by adding a selectableMessage. Unfortunately, we can't motivate everyone to override a default message. I suggest simply correcting the default values of aria-label/title

What was done?

  • aria-label and title attributes were updated.

@alexwizp
Copy link
Contributor Author

alexwizp commented Apr 11, 2024 •
edited
Loading

@cee-chen @1Copenut. Thank you, @1Copenut, for providing a workaround to address that issue. However, I'm uncertain about proceeding with that solution because it requires overriding the selection-checkbox / setting selectableMessage for each table. Additionally, we cannot guarantee that we'll implement it consistently across all tables, and there's a risk that in the future, someone might create a table with the same issue. Instead, I believe we should address this issue at the EUI level once and for all. The fix seems straightforward.

@1Copenut 1Copenut requested review from cee-chen and 1Copenut April 11, 2024 17:38
@alexwizp alexwizp marked this pull request as ready for review April 12, 2024 09:12
@alexwizp alexwizp requested a review from a team as a code owner April 12, 2024 09:12
@cee-chen
Copy link
Contributor

cee-chen commented Apr 12, 2024 •
edited
Loading

@alexwizp Just to clarify - I don't object to making this baseline change to EuiTables, but I just want to make sure that you know the screenshot you posted in #7542 is of EuiDataGrid, not of EuiBasicTable. So if you're opening this PR to solve a specific production issue, it will not do that.

But if you're generally opening this PR to improve our baseline table accessibility, then great! We can move ahead.

@alexwizp
Copy link
Contributor Author

@cee-chen Let's make similar changes to the DataGrid as part of this PR or a new one. I'll see on Monday how it works there

@cee-chen
Copy link
Contributor

cee-chen commented Apr 12, 2024 •
edited
Loading

Unlike EuiBasicTable, EuiDataGrid has no OOTB checkboxes/selection functionality, so there's nothing to do there. It's almost entirely agnostic of content, and any selection accessibility fixes belong to the team implementing that datagrid.

We do have one datagrid example with row selection/checkboxes, but that already has row-indexed aria labels - so ideally consumers should be following it.

cee-chen
cee-chen approved these changes Apr 12, 2024
View reviewed changes
Copy link
Contributor

@cee-chen cee-chen left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work on this and thanks for improving our default table accessibility! Ideally consumers would be using selectableMessage() to pass more specific checkbox titles per row of course, but this is a nice fallback.

I'll go ahead and commit the changelog copy tweak and then merge this in. Feel free to ping us in Slack or let us know have any follow-up questions around EuiDataGrid.

i18ntokens.json Outdated
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just as a heads up, we don't normally update i18ntokens.json as part of our PRs, our weekly release script handles it automatically for us. I'll leave this in here though as it likely doesn't harm anything / the release script will update it again if needed in any case!

changelogs/upcoming/7672.md Outdated Show resolved Hide resolved
src/components/basic_table/basic_table.tsx
@@ -950,7 +950,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
);
}

renderItemRow(item: T, rowIndex: number) {
renderItemRow(item: T, rowIndex: number, displayedRowIndex: number) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really nice job with the variable naming here - I love how it clearly distinguishes the difference between the two passed index parameters!

@cee-chen cee-chen enabled auto-merge (squash) April 12, 2024 16:54
1Copenut
1Copenut approved these changes Apr 12, 2024
View reviewed changes
Copy link
Contributor

@1Copenut 1Copenut left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Cee's comments capture this perfectly.

@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@cee-chen cee-chen merged commit 0cd039a into elastic:main Apr 12, 2024
7 checks passed
cee-chen added a commit that referenced this pull request Apr 12, 2024
@alexwizp @cee-chen
[EuiTable][a11y] select row Checkbox elements must have correct labels (
2929265 
#7672)

Co-authored-by: Cee Chen <[email protected]>
@cee-chen cee-chen mentioned this pull request Apr 12, 2024
Merged
mistic pushed a commit to elastic/kibana that referenced this pull request Apr 18, 2024
@cee-chen
Upgrade EUI to v94.1.0 (major EuiTable refactors) (#180514)
cbc68cd 
`v93.6.0` ⏩ `v94.1.0`

> [!important]
> 👋 Hello everyone - this is a special release containing `EuiTable`'s
conversion to Emotion, several long-overdue cleanups and breaking
changes, and one or two fun new features. First, let's address the big
questions:

### Q: I'm listed as a codeowner, how much should I manually QA/review?

Answer: It depends on what exactly in your code changed, but _in
general_ I would strongly suggest at least pulling this branch down and
doing a quick visual smoke test of all tables (_note: **not**
datagrids_) in your apps/plugins. You should not expect to see any major
visual regressions.

If your table contained any kind of custom styling or behavior (e.g.
custom CSS, etc.) I **strongly** recommend taking more time to QA
thoroughly to ensure your table still looks and behaves as expected.
Teams with very manual or specific updates will be flagged below in
comment threads.

### Q: When do I need to review by?

This PR will be merged **after** 8.14FF. Because this upgrade touches so
many files and teams, we're aiming for asking for an admin merge by EOD
4/18 regardless of full approval status.

As always, you're welcome to ping us after merge if you find any issues
later ([see our
FAQ](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)),
as you will have until 8.15FF to catch any bugs.

### Q: What breaking changes were made, and why?

Here's a quick shortlist of all the changes made that affected the
majority of the commits in this PR:

#### <u>Removed several top-level table props</u>
- The `responsive` prop has been removed in favor of the new
`responsiveBreakpoint` prop (same `false` behavior as before)
- The following props were removed from basic and in-memory tables:
  - `hasActions`, `isSelectable`, and `isExpandable`
- These props were not used for functionality and were only used for
styling tables in mobile/responsive views, which is not a best practice
pattern we wanted for our APIs. Mobile tables are now styled correctly
without needing consumers to pass these extra props.
  - `textOnly`
- This prop was unused and had no meaningful impact on tables or table
content.

#### Removed hidden mobile vs. desktop DOM

Previously, EUI would set classes that applied `display: none` CSS for
content that was hidden for mobile vs. desktop. This is no longer the
case, and content that only displays for mobile or only displays for
desktop will no longer render to the DOM at all if the table is not in
that responsive state.

This is both more performant when rendering large quantities of
cells/content, and simpler to write test assertions for when comparing
what the user actually sees vs. what the DOM ‘sees’.
(c3eeb08441e4b6efe6505e7cddaa87b540ddb259,
78cefcd954a7b46eaccd05e431b5e24dc86071a3)

#### Removed direct usages of table `className`s

EuiTable `classNames` no longer have any styles attached to them, so
some instances where Kibana usages were applying the `className` for
styles have been replaced with direct component usage or removed
entirely (86ce80b).

#### Custom table cell styles

Any custom CSS for table cells was previously being applied to the inner
`div.euiTableCellContent` wrapper. As of this latest release, the
`className` and `css` props will now be applied directly to the outer
`td.euiTableRowCell` element. If you were targeting custom styles table
cells, please re-QA your styles to ensure everything still looks as
expected.

---

<details open><summary>Full changelog (click to collapse)</summary>

##
[`v94.1.0-backport.0`](https://github.com/elastic/eui/releases/v94.1.0-backport.0)

**This is a backport release only intended for use by Kibana.**

**Bug fixes**

- Fixed a visual text alignment regression in `EuiTableRowCell`s with
the `row` header scope
([#7681](elastic/eui#7681))

**Accessibility**

- Improved `EuiBasicTable` and `EuiInMemoryTable`'s selection checkboxes
to have unique aria-labels per row
([#7672](elastic/eui#7672))

## [`v94.1.0`](https://github.com/elastic/eui/releases/v94.1.0)

- Updated `EuiTableHeaderCell` to show a subdued `sortable` icon for
columns that are not currently sorted but can be
([#7656](elastic/eui#7656))
- Updated `EuiBasicTable` and `EuiInMemoryTable`'s
`columns[].actions[]`'s to pass back click events to `onClick` callbacks
as the second callback
([#7667](elastic/eui#7667))

## [`v94.0.0`](https://github.com/elastic/eui/releases/v94.0.0)

- Updated `EuiTable`, `EuiBasicTable`, and `EuiInMemoryTable` with a new
`responsiveBreakpoint` prop, which allows customizing the point at which
the table collapses into a mobile-friendly view with cards
([#7625](elastic/eui#7625))
- Updated `EuiProvider`'s `componentDefaults` prop to allow configuring
`EuiTable.responsiveBreakpoint`
([#7625](elastic/eui#7625))

**Bug fixes**

- `EuiBasicTable` & `EuiInMemoryTable` `isPrimary` actions are now
correctly shown on mobile views
([#7640](elastic/eui#7640))
- Table `mobileOptions`:
([#7642](elastic/eui#7642))
- `mobileOptions.align` is now respected instead of all cells being
forced to left alignment
- `textTruncate` and `textOnly` are now respected even if a `render`
function is not passed

**Breaking changes**

- Removed unused `EuiTableHeaderButton` component
([#7621](elastic/eui#7621))
- Removed the `responsive` prop from `EuiTable`, `EuiBasicTable`, and
`EuiInMemoryTable`. Use the new `responsiveBreakpoint` prop instead
([#7625](elastic/eui#7625))
- The following props are no longer needed by `EuiBasicTable` or
`EuiInMemoryTable` for responsive table behavior to work correctly, and
can be removed: ([#7632](elastic/eui#7632))
  - `isSelectable`
  - `isExpandable`
  - `hasActions`
- Removed the `showOnHover` prop from `EuiTableRowCell` /
`EuiBasicTable`/`EuiInMemoryTable`'s `columns` API. Use the new actions
`columns[].actions[].showOnHover` API instead.
([#7640](elastic/eui#7640))
- Removed top-level `textOnly` prop from `EuiBasicTable` and
`EuiInMemoryTable`. Use `columns[].textOnly` instead.
([#7642](elastic/eui#7642))

**DOM changes**

- `EuiTable` mobile headers no longer render in the DOM when not visible
(previously rendered with `display: none`). This may affect DOM testing
assertions. ([#7625](elastic/eui#7625))
- `EuiTableRowCell` now applies passed `className`s to the parent `<td>`
element, instead of to the inner cell content `<div>`.
([#7631](elastic/eui#7631))
- `EuiTableRow`s rendered by basic and memory tables now only render a
`.euiTableRow-isSelectable` className if the selection checkbox is not
disabled ([#7632](elastic/eui#7632))
- `EuiTableRowCell`s with `textOnly` set to `false` will no longer
attempt to apply the `.euiTableCellContent__text` className to child
elements. ([#7641](elastic/eui#7641))
- `EuiTableRowCell` no longer renders mobile headers to the DOM unless
the current table is displaying its responsive view.
([#7642](elastic/eui#7642))
- `EuiTableHeaderCell` and `EuiTableRowCell` will no longer render in
the DOM at all on mobile if their columns' `mobileOptions.show` is set
to `false`. ([#7642](elastic/eui#7642))
- `EuiTableHeaderCell` and `EuiTableRowCell` will no longer render in
the DOM at all on desktop if their columns' `mobileOptions.only` is set
to `true`. ([#7642](elastic/eui#7642))

**CSS-in-JS conversions**

- Converted `EuiTable`, `EuiTableRow`, `EuiTableRowCell`, and all other
table subcomponents to Emotion
([#7654](elastic/eui#7654))
- Removed the following `EuiTable` Sass variables:
([#7654](elastic/eui#7654))
  - `$euiTableCellContentPadding`
  - `$euiTableCellContentPaddingCompressed`
  - `$euiTableCellCheckboxWidth`
  - `$euiTableHoverColor`
  - `$euiTableSelectedColor`
  - `$euiTableHoverSelectedColor`
  - `$euiTableActionsBorderColor`
  - `$euiTableHoverClickableColor`
  - `$euiTableFocusClickableColor`
- Removed the following `EuiTable` Sass mixins:
([#7654](elastic/eui#7654))
  - `euiTableActionsBackgroundMobile`
  - `euiTableCellCheckbox`
  - `euiTableCell`
</details>
@cee-chen cee-chen mentioned this pull request Apr 29, 2024
Merged
cee-chen added a commit to elastic/kibana that referenced this pull request May 3, 2024
@cee-chen @tkajtoch
Upgrade EUI to v94.2.1 (#182023)
31e8c54 
`v94.1.0-backport.0` ⏩ `v94.2.1-backport.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

##
[`v94.2.1-backport.0`](https://github.com/elastic/eui/releases/v94.2.1-backport.0)

**This is a backport release only intended for use by Kibana.**

- Reverted the `EuiFlexGroup`/`EuiFlexItem` `component` prop feature due
to Kibana typing issues

## [`v94.2.1`](https://github.com/elastic/eui/releases/v94.2.1)

**Bug fixes**

- Fixed an `EuiTabbedContent` edge case bug that occurred when updated
with a completely different set of `tabs`
([#7713](elastic/eui#7713))
- Fixed the `@storybook/test` dependency to be listed in
`devDependencies` and not `dependencies`
([#7719](elastic/eui#7719))

## [`v94.2.0`](https://github.com/elastic/eui/releases/v94.2.0)

- Updated `getDefaultEuiMarkdownPlugins()` to allow excluding the
following plugins in addition to `tooltip`:
([#7676](elastic/eui#7676))
  - `checkbox`
  - `linkValidator`
  - `lineBreaks`
  - `emoji`
- Updated `EuiSelectable`'s `isPreFiltered` prop to allow passing a
configuration object, which allows disabling search highlighting in
addition to search filtering
([#7683](elastic/eui#7683))
- Updated `EuiFlexGroup` and `EuiFlexItem` prop types to support passing
any valid React component type to the `component` prop and ensure proper
type checking of the extra props forwarded to the `component`.
([#7688](elastic/eui#7688))
- Updated `EuiSearchBar` to allow the `@` special character in query
string searches ([#7702](elastic/eui#7702))
- Added a new, optional `optionMatcher` prop to `EuiSelectable` and
`EuiComboBox` allowing passing a custom option matcher function to these
components and controlling option filtering for given search string
([#7709](elastic/eui#7709))

**Bug fixes**

- Fixed an `EuiPageTemplate` bug where prop updates would not cascade
down to child sections
([#7648](elastic/eui#7648))
- To cascade props down to the sidebar, `EuiPageTemplate` now explicitly
requires using the `EuiPageTemplate.Sidebar` rather than
`EuiPageSidebar`
- Fixed `EuiFieldNumber`'s typing to accept an icon configuration shape
([#7666](elastic/eui#7666))
- Fixed `EuiFieldText` and `EuiFieldNumber` to render the correct
paddings for icon shapes set to `side: 'right'`
([#7666](elastic/eui#7666))
- Fixed `EuiFieldText` and `EuiFieldNumber` to fully ignore
`icon`/`prepend`/`append` when `controlOnly` is set to true
([#7666](elastic/eui#7666))
- Fixed `EuiColorPicker`'s input not setting the correct right padding
for the number of icons displayed
([#7666](elastic/eui#7666))
- Visual fixes for `EuiRange`s with `showInput`:
([#7678](elastic/eui#7678))
  - Longer `append`/`prepend` labels no longer cause a background bug
  - Inputs can no longer overwhelm the actual range in width
- Fixed a visual text alignment regression in `EuiTableRowCell`s with
the `row` header scope
([#7681](elastic/eui#7681))
- Fixed `toolTipProps` type on `EuiSuperUpdateButton` to use
`Partial<EuiToolTipProps>`
([#7692](elastic/eui#7692))
- Fixes missing prop type for `popperProps` on `EuiDatePicker`
([#7694](elastic/eui#7694))
- Fixed a focus bug with `EuiDataGrid`s with `leadingControlColumns`
when moving columns to the left/right
([#7701](elastic/eui#7701))
([#7698](elastic/eui#7698))
- Fixed `EuiSuperDatePicker` to validate date string with respect of
locale on `EuiAbsoluteTab`.
([#7705](elastic/eui#7705))
- Fixed a visual bug with `EuiSuperDatePicker`'s absolute tab on small
mobile screens ([#7708](elastic/eui#7708))
- Fixed i18n of empty and loading state messages for the
`FieldValueSelectionFilter` component
([#7718](elastic/eui#7718))

**Dependency updates**

- Updated `@hello-pangea/dnd` to v16.6.0
([#7599](elastic/eui#7599))
- Updated `remark-rehype` to v8.1.0
([#7601](elastic/eui#7601))

**Accessibility**

- Improved `EuiBasicTable` and `EuiInMemoryTable`'s selection checkboxes
to have unique aria-labels per row
([#7672](elastic/eui#7672))
- Added `aria-valuetext` attributes to `EuiRange`s with tick labels for
improved screen reader UX
([#7675](elastic/eui#7675))
- Updated `EuiAccordion` to keep focus on accordion trigger instead of
moving to content on click/keypress
([#7696](elastic/eui#7696))
- Added `aria-disabled` attribute to `EuiHorizontalSteps` when status is
"disabled" ([#7699](elastic/eui#7699))

---------

Co-authored-by: Tomasz Kajtoch <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@1Copenut 1Copenut 1Copenut approved these changes

@cee-chen cee-chen cee-chen approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[EuiTable][a11y] select row Checkbox elements must have correct labels
5 participants
@alexwizp @cee-chen @kibanamachine @elasticmachine @1Copenut