Skip to content

Commit

Permalink
[8.x] Add tooltips to Discover button icons (#192963) (#194344)
Browse files Browse the repository at this point in the history 
# Backport

This will backport the following commits from `main` to `8.x`:
- [Add tooltips to Discover button icons
(#192963)](#192963)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nathan L
Smith","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-09-17T21:32:33Z","message":"Add
tooltips to Discover button icons (#192963)\n\n## Summary\r\n\r\nWhen
navigating through elements in Discover with a keyboard,
icon-only\r\nbuttons don't show their browser-native title attribute
when focused,\r\nonly when hovered.\r\n\r\nThis makes it unclear when
you \"tab in to\" an icon-only button what the\r\nbutton
does.\r\n\r\nThese changes add a tooltip on the filter in/out buttons on
the field\r\nlist values.\r\n\r\n| Before | After |\r\n| :----------: |
:----------: |\r\n| ![CleanShot 2024-09-15 at 21
20\r\n36@2x](https://github.com/user-attachments/assets/ed915d78-fc66-4eb4-a4d7-d7c3395edfc6)\r\n|![CleanShot
2024-09-15 at 21
17\r\n23@2x](https://github.com/user-attachments/assets/0d7b9862-b8ab-4a2c-bc4b-8b790c393001)\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] Any UI
touched in this PR is usable by keyboard only (learn more\r\nabout
[keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n-
[x] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))","sha":"c12c361f5636791999345bc119b60139976bdd13","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Discover","release_note:fix","v9.0.0","Team:DataDiscovery","backport:prev-minor"],"title":"Add
tooltips to Discover button
icons","number":192963,"url":"https://github.com/elastic/kibana/pull/192963","mergeCommit":{"message":"Add
tooltips to Discover button icons (#192963)\n\n## Summary\r\n\r\nWhen
navigating through elements in Discover with a keyboard,
icon-only\r\nbuttons don't show their browser-native title attribute
when focused,\r\nonly when hovered.\r\n\r\nThis makes it unclear when
you \"tab in to\" an icon-only button what the\r\nbutton
does.\r\n\r\nThese changes add a tooltip on the filter in/out buttons on
the field\r\nlist values.\r\n\r\n| Before | After |\r\n| :----------: |
:----------: |\r\n| ![CleanShot 2024-09-15 at 21
20\r\n36@2x](https://github.com/user-attachments/assets/ed915d78-fc66-4eb4-a4d7-d7c3395edfc6)\r\n|![CleanShot
2024-09-15 at 21
17\r\n23@2x](https://github.com/user-attachments/assets/0d7b9862-b8ab-4a2c-bc4b-8b790c393001)\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] Any UI
touched in this PR is usable by keyboard only (learn more\r\nabout
[keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n-
[x] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))","sha":"c12c361f5636791999345bc119b60139976bdd13"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/192963","number":192963,"mergeCommit":{"message":"Add
tooltips to Discover button icons (#192963)\n\n## Summary\r\n\r\nWhen
navigating through elements in Discover with a keyboard,
icon-only\r\nbuttons don't show their browser-native title attribute
when focused,\r\nonly when hovered.\r\n\r\nThis makes it unclear when
you \"tab in to\" an icon-only button what the\r\nbutton
does.\r\n\r\nThese changes add a tooltip on the filter in/out buttons on
the field\r\nlist values.\r\n\r\n| Before | After |\r\n| :----------: |
:----------: |\r\n| ![CleanShot 2024-09-15 at 21
20\r\n36@2x](https://github.com/user-attachments/assets/ed915d78-fc66-4eb4-a4d7-d7c3395edfc6)\r\n|![CleanShot
2024-09-15 at 21
17\r\n23@2x](https://github.com/user-attachments/assets/0d7b9862-b8ab-4a2c-bc4b-8b790c393001)\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] Any UI
touched in this PR is usable by keyboard only (learn more\r\nabout
[keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n-
[x] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))","sha":"c12c361f5636791999345bc119b60139976bdd13"}}]}]
BACKPORT-->

Co-authored-by: Nathan L Smith <[email protected]>
  • Loading branch information
@kibanamachine @smith
kibanamachine and smith committed Sep 27, 2024
1 parent 2bc6563 commit 39810fd
Showing 1 changed file with 46 additions and 42 deletions.
88 changes: 46 additions & 42 deletions packages/kbn-unified-field-list/src/components/field_stats/field_top_values_bucket.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,18 @@ const FieldTopValuesBucket: React.FC<FieldTopValuesBucketProps> = ({
} = { ...fieldTopValuesBucketOverridableProps, ...overrides };
const fieldLabel = (field?.subType as IFieldSubTypeMulti)?.multi?.parent ?? field.name;

const filterForLabel = i18n.translate('unifiedFieldList.fieldStats.filterValueButtonAriaLabel', {
defaultMessage: 'Filter for {field}: "{value}"',
values: { value: formattedFieldValue, field: fieldLabel },
});
const filterOutLabel = i18n.translate(
'unifiedFieldList.fieldStats.filterOutValueButtonAriaLabel',
{
defaultMessage: 'Filter out {field}: "{value}"',
values: { value: formattedFieldValue, field: fieldLabel },
}
);

return (
<EuiFlexGroup
alignItems="stretch"
Expand Down Expand Up @@ -153,48 +165,40 @@ const FieldTopValuesBucket: React.FC<FieldTopValuesBucketProps> = ({
/>
) : (
<div>
<EuiButtonIcon
iconSize="s"
iconType="plusInCircle"
onClick={() => onAddFilter(field, fieldValue, '+')}
aria-label={i18n.translate(
'unifiedFieldList.fieldStats.filterValueButtonAriaLabel',
{
defaultMessage: 'Filter for {field}: "{value}"',
values: { value: formattedFieldValue, field: fieldLabel },
}
)}
data-test-subj={`plus-${fieldLabel}-${fieldValue}`}
style={{
minHeight: 'auto',
minWidth: 'auto',
paddingRight: 2,
paddingLeft: 2,
paddingTop: 0,
paddingBottom: 0,
}}
/>
<EuiButtonIcon
iconSize="s"
iconType="minusInCircle"
onClick={() => onAddFilter(field, fieldValue, '-')}
aria-label={i18n.translate(
'unifiedFieldList.fieldStats.filterOutValueButtonAriaLabel',
{
defaultMessage: 'Filter out {field}: "{value}"',
values: { value: formattedFieldValue, field: fieldLabel },
}
)}
data-test-subj={`minus-${fieldLabel}-${fieldValue}`}
style={{
minHeight: 'auto',
minWidth: 'auto',
paddingTop: 0,
paddingBottom: 0,
paddingRight: 2,
paddingLeft: 2,
}}
/>
<EuiToolTip content={filterForLabel}>
<EuiButtonIcon
iconSize="s"
iconType="plusInCircle"
onClick={() => onAddFilter(field, fieldValue, '+')}
aria-label={filterForLabel}
data-test-subj={`plus-${fieldLabel}-${fieldValue}`}
style={{
minHeight: 'auto',
minWidth: 'auto',
paddingRight: 2,
paddingLeft: 2,
paddingTop: 0,
paddingBottom: 0,
}}
/>
</EuiToolTip>
<EuiToolTip content={filterOutLabel}>
<EuiButtonIcon
iconSize="s"
iconType="minusInCircle"
onClick={() => onAddFilter(field, fieldValue, '-')}
aria-label={filterOutLabel}
data-test-subj={`minus-${fieldLabel}-${fieldValue}`}
style={{
minHeight: 'auto',
minWidth: 'auto',
paddingTop: 0,
paddingBottom: 0,
paddingRight: 2,
paddingLeft: 2,
}}
/>
</EuiToolTip>
</div>
)}
</EuiFlexItem>
Expand Down

0 comments on commit 39810fd

Please sign in to comment.