From ed295a75bcb5bb4947550a039a5c4281b331bb35 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 12 Dec 2019 09:35:17 -0700 Subject: [PATCH] Re-compile accessibility icon; remove default titling from EuiIcon (#2632) * Re-compile accessibility icon; remove default titling from EuiIcon * changelog * Update EuiIcon logic for when to set aria-hidden * fix changelog entry --- CHANGELOG.md | 1 + .../__snapshots__/accordion.test.tsx.snap | 11 - .../badge/__snapshots__/badge.test.tsx.snap | 3 - .../collapsed_item_actions.test.tsx.snap | 1 - .../in_memory_table.test.tsx.snap | 9 - .../button/__snapshots__/button.test.tsx.snap | 3 - .../__snapshots__/button_empty.test.tsx.snap | 3 - .../__snapshots__/button_icon.test.tsx.snap | 1 - .../__snapshots__/call_out.test.tsx.snap | 1 - .../card/__snapshots__/card.test.tsx.snap | 1 - .../__snapshots__/card_select.test.tsx.snap | 1 - .../__snapshots__/code_block.test.js.snap | 2 - .../__snapshots__/color_picker.test.tsx.snap | 15 - .../__snapshots__/combo_box.test.js.snap | 2 - .../__snapshots__/context_menu.test.tsx.snap | 17 +- .../context_menu_item.test.tsx.snap | 1 - .../context_menu_panel.test.tsx.snap | 18 +- .../__snapshots__/control_bar.test.tsx.snap | 7 - .../__snapshots__/data_grid.test.tsx.snap | 30 - .../date_picker_range.test.js.snap | 1 - .../__snapshots__/empty_prompt.test.tsx.snap | 2 - .../__snapshots__/facet_button.test.tsx.snap | 1 - .../__snapshots__/filter_button.test.js.snap | 1 - .../filter_select_item.test.js.snap | 1 - .../flyout/__snapshots__/flyout.test.tsx.snap | 7 - .../__snapshots__/file_picker.test.js.snap | 1 - .../form_control_layout.test.tsx.snap | 5 - ..._control_layout_clear_button.test.tsx.snap | 1 - ...m_control_layout_custom_icon.test.tsx.snap | 2 - ...orm_control_layout_delimited.test.tsx.snap | 1 - .../__snapshots__/super_select.test.js.snap | 27 - .../super_select_control.test.js.snap | 8 - .../switch/__snapshots__/switch.test.tsx.snap | 4 - .../__snapshots__/header_links.test.tsx.snap | 1 - .../health/__snapshots__/health.test.tsx.snap | 1 - .../icon/__snapshots__/icon.test.tsx.snap | 2213 ++++++----------- src/components/icon/assets/accessibility.js | 3 +- src/components/icon/icon.tsx | 32 +- .../image/__snapshots__/image.test.tsx.snap | 1 - .../list_group_item.test.tsx.snap | 3 - .../loading_kibana.test.tsx.snap | 4 - .../__snapshots__/confirm_modal.test.js.snap | 2 - .../modal/__snapshots__/modal.test.js.snap | 1 - .../__snapshots__/pagination.test.tsx.snap | 2 - .../selectable_list_item.test.tsx.snap | 7 - .../selectable_search.test.tsx.snap | 2 - .../__snapshots__/side_nav.test.js.snap | 10 - .../__snapshots__/suggest_input.test.js.snap | 1 - .../__snapshots__/suggest_item.test.js.snap | 3 - .../table_sort_mobile.test.tsx.snap | 1 - .../table_sort_mobile_item.test.tsx.snap | 1 - .../table_pagination.test.tsx.snap | 5 - .../global_toast_list.test.tsx.snap | 4 - .../toast/__snapshots__/toast.test.tsx.snap | 3 - .../token/__snapshots__/token.test.tsx.snap | 18 - .../__snapshots__/tree_view.test.tsx.snap | 1 - 56 files changed, 766 insertions(+), 1742 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index eb5a1e85658..944de205d06 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ **Bug fixes** - Fixed `EuiCodeEditor` custom mode file error by initializing with existing mode ([#2616](https://github.com/elastic/eui/pull/2616)) +- Removed `EuiIcon` default titles ([#2632](https://github.com/elastic/eui/pull/2632)) ## [`17.1.1`](https://github.com/elastic/eui/tree/v17.1.1) diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap index 311e985c2a7..576221f0924 100644 --- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap +++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap @@ -29,16 +29,13 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = ` > {titleDisplayed} { } else { const Svg = icon; - // If it's an empty icon it gets aria-hidden true - const hideIconEmpty = icon === empty && { 'aria-hidden': true }; + // If it's an empty icon, or if there is no aria-label, aria-labelledby, or title it gets aria-hidden true + const isAriaHidden = + icon === empty || + !( + this.props['aria-label'] || + this.props['aria-labelledby'] || + this.props.title + ); + const hideIconEmpty = isAriaHidden && { 'aria-hidden': true }; let ariaLabel: any; // If no aria-label or aria-labelledby is provided the title will be default - - if (!this.props['aria-label'] && !this.props['aria-labelledby']) { - ariaLabel = { 'aria-label': titleDisplayed }; + if ( + !this.props['aria-label'] && + !this.props['aria-labelledby'] && + title + ) { + ariaLabel = { 'aria-label': title }; } return ( @@ -628,8 +630,8 @@ export class EuiIcon extends PureComponent { style={optionalCustomStyles} tabIndex={tabIndex} focusable={focusable} - title={titleDisplayed} role="img" + title={title} {...rest} {...hideIconEmpty} {...ariaLabel} diff --git a/src/components/image/__snapshots__/image.test.tsx.snap b/src/components/image/__snapshots__/image.test.tsx.snap index ceabd9d27c8..68532048b81 100644 --- a/src/components/image/__snapshots__/image.test.tsx.snap +++ b/src/components/image/__snapshots__/image.test.tsx.snap @@ -34,7 +34,6 @@ exports[`EuiImage is rendered and allows full screen 1`] = ` />