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

[Logs UI][a11y] Announce name of column on remove column button #41695

Merged
merged 15 commits into from
Aug 2, 2019
Merged

[Logs UI][a11y] Announce name of column on remove column button #41695

Changes from 13 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
35d5da2
[Logs UI][a11y] Announce name of column on remove column button
Zacqary Jul 22, 2019
e37398a
Use title instead of aria-label
Zacqary Jul 22, 2019
237d340
ariaColumnName => columnDescription
Zacqary Jul 22, 2019
48d234c
Move template string out of i18n
Zacqary Jul 22, 2019
a927750
Revert label id change
Zacqary Jul 22, 2019
91545f5
Inject i18n to field title
Zacqary Jul 22, 2019
d115716
Merge remote-tracking branch 'upstream/master' into 40421-column-anno…
Zacqary Jul 22, 2019
3add938
Merge branch 'master' of github.com:elastic/kibana into 40421-column-…
Zacqary Jul 24, 2019
5b30df1
Merge remote-tracking branch 'upstream/master' into 40421-column-anno…
Zacqary Jul 25, 2019
17e31f1
Merge branch 'master' of github.com:elastic/kibana into 40421-column-…
Zacqary Jul 29, 2019
9103ac8
Change title to Remove {columnDescription} column
Zacqary Jul 29, 2019
cfa8b13
Merge branch '40421-column-announce' of github.com:Zacqary/kibana int…
Zacqary Jul 29, 2019
0094169
Replace injectI18N with i18n.translate
Zacqary Jul 29, 2019
c8c682c
Fix i18n
Zacqary Jul 29, 2019
5e2fda0
Merge branch 'master' of github.com:elastic/kibana into 40421-column-…
Zacqary Aug 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 43 additions & 33 deletions .../plugins/infra/public/components/source_configuration/log_columns_configuration_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ import {
EuiDroppable,
EuiIcon,
} from '@elastic/eui';
import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React, { useCallback } from 'react';
import { DragHandleProps, DropResult } from '../../../../../common/eui_draggable';

Expand Down Expand Up @@ -167,29 +168,35 @@ const FieldLogColumnConfigurationPanel: React.FunctionComponent<{
remove,
},
dragHandleProps,
}) => (
<EuiPanel data-test-subj={`logColumnPanel fieldLogColumnPanel fieldLogColumnPanel:${field}`}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<div data-test-subj="moveLogColumnHandle" {...dragHandleProps}>
<EuiIcon type="grab" />
</div>
</EuiFlexItem>
<EuiFlexItem grow={1}>
<FormattedMessage
id="xpack.infra.sourceConfiguration.fieldLogColumnTitle"
defaultMessage="Field"
/>
</EuiFlexItem>
<EuiFlexItem grow={3}>
<code>{field}</code>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<RemoveLogColumnButton onClick={remove} />
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);
}) => {
const fieldLogColumnTitle = i18n.translate(
'xpack.infra.sourceConfiguration.fieldLogColumnTitle',
{
defaultMessage: 'Field',
}
);
return (
<EuiPanel data-test-subj={`logColumnPanel fieldLogColumnPanel fieldLogColumnPanel:${field}`}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<div data-test-subj="moveLogColumnHandle" {...dragHandleProps}>
<EuiIcon type="grab" />
</div>
</EuiFlexItem>
<EuiFlexItem grow={1}>{fieldLogColumnTitle}</EuiFlexItem>
<EuiFlexItem grow={3}>
<code>{field}</code>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<RemoveLogColumnButton
onClick={remove}
columnDescription={`${fieldLogColumnTitle} - ${field}`}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);
};

const ExplainedLogColumnConfigurationPanel: React.FunctionComponent<{
fieldName: React.ReactNode;
Expand All @@ -213,31 +220,34 @@ const ExplainedLogColumnConfigurationPanel: React.FunctionComponent<{
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<RemoveLogColumnButton onClick={removeColumn} />
<RemoveLogColumnButton onClick={removeColumn} columnDescription={String(fieldName)} />
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);

const RemoveLogColumnButton = injectI18n<{
const RemoveLogColumnButton: React.FunctionComponent<{
onClick?: () => void;
}>(({ intl, onClick }) => {
const removeColumnLabel = intl.formatMessage({
id: 'xpack.infra.sourceConfiguration.removeLogColumnButtonLabel',
defaultMessage: 'Remove this column',
});
columnDescription: string;
}> = ({ onClick, columnDescription }) => {
const removeColumnLabel = i18n.translate(
'xpack.infra.sourceConfiguration.removeLogColumnButtonLabel',
{
defaultMessage: 'Remove {columnDescription} column',
values: { columnDescription },
}
);

return (
<EuiButtonIcon
aria-label={removeColumnLabel}
color="danger"
data-test-subj="removeLogColumnButton"
iconType="trash"
onClick={onClick}
title={removeColumnLabel}
/>
);
});
};

const LogColumnConfigurationEmptyPrompt: React.FunctionComponent = () => (
<EuiEmptyPrompt
Expand Down