Fix accessibility in the global query bar (#93411)

* Fix accessibility of the filter bar tags (#82457) * Fix focus state keeping after removing a filter tag (#82503) * Fix invalid state in the query bar date picker (#82513)
elastic · Mar 8, 2021 · 8fa917c · 8fa917c
1 parent c5db0f1
commit 8fa917c
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 4 deletions.
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss
@@ -14,6 +14,10 @@
     flex-shrink: 1; /* 1 */
   }
 
+  .euiBadge__iconButton:focus {
+    background-color: transparentize($euiColorPrimary, .9);
+  }
+
   &:not(.globalFilterItem-isDisabled) {
     @include euiFormControlDefaultShadow;
     box-shadow: #{$euiFormControlBoxShadow}, inset 0 0 0 1px $kbnGlobalFilterItemBorderColor; // Make the actual border more visible

diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -9,7 +9,7 @@
 import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiPopover } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import classNames from 'classnames';
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 
 import { METRIC_TYPE } from '@kbn/analytics';
 import { FilterEditor } from './filter_editor';
@@ -39,6 +39,7 @@ interface Props {
 }
 
 function FilterBarUI(props: Props) {
+  const groupRef = useRef<HTMLDivElement>(null);
   const [isAddFilterPopoverOpen, setIsAddFilterPopoverOpen] = useState(false);
   const kibana = useKibana<IDataPluginServices>();
   const { appName, usageCollection, uiSettings } = kibana.services;
@@ -99,6 +100,7 @@ function FilterBarUI(props: Props) {
           anchorPosition="downLeft"
           panelPaddingSize="none"
           initialFocus=".filterEditor__hiddenItem"
+          ownFocus
           repositionOnScroll
         >
           <EuiFlexItem grow={false}>
@@ -130,6 +132,7 @@ function FilterBarUI(props: Props) {
     const filters = [...props.filters];
     filters.splice(i, 1);
     onFiltersUpdated(filters);
+    groupRef.current?.focus();
   }
 
   function onUpdate(i: number, filter: Filter) {
@@ -203,11 +206,13 @@ function FilterBarUI(props: Props) {
 
       <EuiFlexItem className="globalFilterGroup__filterFlexItem">
         <EuiFlexGroup
+          ref={groupRef}
           className={classes}
           wrap={true}
           responsive={false}
           gutterSize="xs"
           alignItems="center"
+          tabIndex={-1}
         >
           {renderItems()}
           {renderAddFilter()}

diff --git a/src/plugins/data/public/ui/filter_bar/filter_view/index.tsx b/src/plugins/data/public/ui/filter_bar/filter_view/index.tsx
@@ -63,7 +63,8 @@ export const FilterView: FC<Props> = ({
       }}
       iconOnClick={iconOnClick}
       iconOnClickAriaLabel={i18n.translate('data.filter.filterBar.filterItemBadgeIconAriaLabel', {
-        defaultMessage: 'Delete',
+        defaultMessage: 'Delete {filter}',
+        values: { filter: innerText },
       })}
       onClick={onClick}
       onClickAriaLabel={i18n.translate('data.filter.filterBar.filterItemBadgeAriaLabel', {

diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -55,6 +55,20 @@
   }
 }
 
+.kbnQueryBar__datePickerWrapper {
+  .euiDatePopoverButton-isInvalid {
+    background-image: euiFormControlGradient($euiColorDanger);
+
+    // @todo Remove when EUI issue is resolved.
+    // @see https://github.com/elastic/eui/issues/4612
+    &:focus {
+      color: $euiTextColor;
+      background-color: $euiFormBackgroundColor;
+      background-image: euiFormControlGradient($euiColorPrimary);
+    }
+  }
+}
+
 @include euiBreakpoint('xs', 's') {
   .kbnQueryBar--withDatePicker {
     > :first-child {

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -822,7 +822,7 @@
     "data.filter.filterBar.excludeFilterButtonLabel": "結果を除外",
     "data.filter.filterBar.fieldNotFound": "インデックスパターン {indexPattern} にフィールド {key} がありません",
     "data.filter.filterBar.filterItemBadgeAriaLabel": "フィルターアクション",
-    "data.filter.filterBar.filterItemBadgeIconAriaLabel": "削除",
+    "data.filter.filterBar.filterItemBadgeIconAriaLabel": "削除 {filter}",
     "data.filter.filterBar.includeFilterButtonLabel": "結果を含める",
     "data.filter.filterBar.indexPatternSelectPlaceholder": "インデックスパターンの選択",
     "data.filter.filterBar.labelErrorInfo": "インデックスパターン{indexPattern}が見つかりません",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -822,7 +822,7 @@
     "data.filter.filterBar.excludeFilterButtonLabel": "排除结果",
     "data.filter.filterBar.fieldNotFound": "索引模式 {indexPattern} 中未找到字段 {key}",
     "data.filter.filterBar.filterItemBadgeAriaLabel": "筛选操作",
-    "data.filter.filterBar.filterItemBadgeIconAriaLabel": "删除",
+    "data.filter.filterBar.filterItemBadgeIconAriaLabel": "删除 {filter}",
     "data.filter.filterBar.includeFilterButtonLabel": "包括结果",
     "data.filter.filterBar.indexPatternSelectPlaceholder": "选择索引模式",
     "data.filter.filterBar.labelErrorInfo": "找不到索引模式 {indexPattern}",