Skip to content

Commit

Permalink
PR feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
Michail Yasonik committed Oct 1, 2019
1 parent bcf0581 commit 91f1e92
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 78 deletions.
53 changes: 23 additions & 30 deletions src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@

import { Component } from 'react';
import React from 'react';
import { i18n } from '@kbn/i18n';

import { EuiFieldText, EuiOutsideClickDetector, PopoverAnchorPosition } from '@elastic/eui';

Expand Down Expand Up @@ -464,34 +465,30 @@ export class QueryBarInputUI extends Component<Props, State> {
'savedObjectsClient',
]);

const isSuggestionsVisible = this.state.isSuggestionsVisible && {
'aria-controls': 'kbnTypeahead__items',
'aria-owns': 'kbnTypeahead__items',
};
const ariaCombobox = Object.assign({ role: 'combobox' }, isSuggestionsVisible);

return (
<EuiOutsideClickDetector onOutsideClick={this.onOutsideClick}>
<div
{...ariaCombobox}
style={{ position: 'relative' }}
{...{ role: 'combobox' }} // using awkward syntax to avoid triggering false jsx-a11y/role-has-required-aria-props linting failure
aria-label={this.props.intl.formatMessage(
{
id: 'data.query.queryBar.comboboxAriaLabel',
defaultMessage: 'Search and filter the {pageType} page',
},
{
pageType: this.props.appName,
}
)}
aria-label={i18n.translate('data.query.queryBar.comboboxAriaLabel', {
defaultMessage: 'Search and filter the {pageType} page',
values: { pageType: this.props.appName },
})}
aria-haspopup="true"
aria-expanded={this.state.isSuggestionsVisible}
{...(this.state.isSuggestionsVisible && {
'aria-controls': 'kbnTypeahead__items',
'aria-owns': 'kbnTypeahead__items',
})}
>
<div role="search">
<div className="kuiLocalSearchAssistedInput">
<EuiFieldText
placeholder={
this.props.placeholder ||
this.props.intl.formatMessage({
id: 'data.query.queryBar.searchInputPlaceholder',
i18n.translate('data.query.queryBar.searchInputPlaceholder', {
defaultMessage: 'Search',
})
}
Expand All @@ -509,23 +506,19 @@ export class QueryBarInputUI extends Component<Props, State> {
}}
autoComplete="off"
spellCheck={false}
aria-label={this.props.intl.formatMessage(
{
id: 'data.query.queryBar.searchInputAriaLabel',
defaultMessage: 'Start typing to search and filter the {pageType} page',
},
{
pageType: this.props.appName,
}
)}
aria-label={i18n.translate('data.query.queryBar.searchInputAriaLabel', {
defaultMessage: 'Start typing to search and filter the {pageType} page',
values: { pageType: this.props.appName },
})}
type="text"
data-test-subj="queryInput"
aria-autocomplete="list"
{...(this.state.isSuggestionsVisible && { 'aria-controls': 'kbnTypeahead__items' })}
{...(this.state.isSuggestionsVisible &&
typeof this.state.index === 'number' && {
'aria-activedescendant': `suggestion-${this.state.index}`,
})}
aria-controls={this.state.isSuggestionsVisible ? 'kbnTypeahead__items' : undefined}
aria-activedescendant={
this.state.isSuggestionsVisible && typeof this.state.index === 'number'
? `suggestion-${this.state.index}`
: undefined
}
role="textbox"
prepend={this.props.prepend}
append={
Expand Down
4 changes: 2 additions & 2 deletions ...es/public/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions ...types/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

93 changes: 52 additions & 41 deletions src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,13 @@
* under the License.
*/
import { i18n } from '@kbn/i18n';
import { EuiContextMenuPanelDescriptor, EuiBadge, EuiIcon, EuiToolTip } from '@elastic/eui';
import {
EuiContextMenuPanelDescriptor,
EuiBadge,
EuiIcon,
EuiToolTip,
EuiScreenReaderOnly,
} from '@elastic/eui';
import classNames from 'classnames';
import React from 'react';
import { IAction } from 'src/plugins/ui_actions/public';
Expand All @@ -32,7 +38,7 @@ export interface PanelHeaderProps {
closeContextMenu: boolean;
badges: IAction[];
embeddable: IEmbeddable;
headerId: string;
headerId?: string;
}

function renderBadges(badges: IAction[], embeddable: IEmbeddable) {
Expand All @@ -49,13 +55,29 @@ function renderBadges(badges: IAction[], embeddable: IEmbeddable) {
));
}

function renderTooltip(description: string) {
return (
description !== '' && (
<EuiToolTip content={description} delay="regular" position="right">
<EuiIcon type="iInCircle" />
</EuiToolTip>
)
);
}

const VISUALIZE_EMBEDDABLE_TYPE = 'visualization';
type VisualizeEmbeddable = any;

function isVisualizeEmbeddable(
embeddable: IEmbeddable | VisualizeEmbeddable
): embeddable is VisualizeEmbeddable {
return embeddable.type === VISUALIZE_EMBEDDABLE_TYPE;
function getViewDescription(embeddable: IEmbeddable | VisualizeEmbeddable) {
if (embeddable.type === VISUALIZE_EMBEDDABLE_TYPE) {
const description = embeddable.getVisualizationDescription();

if (description) {
return description;
}
}

return '';
}

export function PanelHeader({
Expand All @@ -68,9 +90,9 @@ export function PanelHeader({
embeddable,
headerId,
}: PanelHeaderProps) {
const showTitle = !isViewMode || (title && !hidePanelTitles);
const viewDescription = getViewDescription(embeddable);
const showTitle = !isViewMode || (title && !hidePanelTitles) || viewDescription !== '';
const showPanelBar = badges.length > 0 || showTitle;

const classes = classNames('embPanel__header', {
'embPanel__header--floater': !showPanelBar,
});
Expand All @@ -82,34 +104,12 @@ export function PanelHeader({
getActionContextMenuPanel={getActionContextMenuPanel}
isViewMode={isViewMode}
closeContextMenu={closeContextMenu}
title={title}
/>
</div>
);
}

let viewDescr = '';
if (isVisualizeEmbeddable(embeddable)) {
const vd = (embeddable as any).getVisualizationDescription();
if (vd) {
viewDescr = vd;
}
} else {
viewDescr = '';
}

const headingAriaLabel = i18n.translate('embeddableApi.panel.dashboardPanelAriaLabel', {
defaultMessage: 'Dashboard panel',
});
const enhancedHeadingAriaLabel = i18n.translate(
'embeddableApi.panel.enhancedDashboardPanelAriaLabel',
{
defaultMessage: 'Dashboard panel: {title}',
values: {
title,
},
}
);

return (
<figcaption
className={classes}
Expand All @@ -119,21 +119,32 @@ export function PanelHeader({
id={headerId}
data-test-subj="dashboardPanelTitle"
className="embPanel__title embPanel__dragger"
aria-label={title ? enhancedHeadingAriaLabel : headingAriaLabel}
>
{showTitle || viewDescr !== '' ? (
{showTitle ? (
<span className="embPanel__titleInner">
<span className="embPanel__titleText">{title}</span>

{viewDescr !== '' && (
<EuiToolTip content={viewDescr} delay="regular" position="right">
<EuiIcon type="iInCircle" />
</EuiToolTip>
)}
<span className="embPanel__titleText" aria-hidden="true">
{title}
</span>
<EuiScreenReaderOnly>
<span>
{i18n.translate('embeddableApi.panel.enhancedDashboardPanelAriaLabel', {
defaultMessage: 'Dashboard panel: {title}',
values: { title },
})}
</span>
</EuiScreenReaderOnly>
{renderTooltip(viewDescription)}
</span>
) : (
undefined
<EuiScreenReaderOnly>
<span>
{i18n.translate('embeddableApi.panel.dashboardPanelAriaLabel', {
defaultMessage: 'Dashboard panel',
})}
</span>
</EuiScreenReaderOnly>
)}
{renderBadges(badges, embeddable)}
</h2>

<PanelOptionsMenu
Expand Down
6 changes: 3 additions & 3 deletions src/plugins/embeddable/public/lib/panel/panel_header/panel_options_menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,12 @@ export class PanelOptionsMenu extends React.Component<PanelOptionsMenuProps, Sta
}

public render() {
const { isViewMode } = this.props;
const { isViewMode, title } = this.props;
const enhancedAriaLabel = i18n.translate(
'embeddableApi.panel.optionsMenu.panelOptionsButtonEnhancedAriaLabel',
{
defaultMessage: 'Panel options for {title}',
values: { title: this.props.title },
values: { title },
}
);
const ariaLabelWithoutTitle = i18n.translate(
Expand All @@ -94,7 +94,7 @@ export class PanelOptionsMenu extends React.Component<PanelOptionsMenuProps, Sta
iconType={isViewMode ? 'boxesHorizontal' : 'gear'}
color="text"
className="embPanel__optionsMenuButton"
aria-label={this.props.title ? enhancedAriaLabel : ariaLabelWithoutTitle}
aria-label={title ? enhancedAriaLabel : ariaLabelWithoutTitle}
data-test-subj="embeddablePanelToggleMenuIcon"
onClick={this.toggleContextMenu}
/>
Expand Down

0 comments on commit 91f1e92

Please sign in to comment.