maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Lens] (Accessibility) add aria-label to chart type icon (#84493)

Browse source
This commit is contained in:
Marta Bondyra 2020-11-30 15:45:26 +01:00 committed by GitHub
parent de5edaa278
commit f23d2e6ea1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_settings.tsx
View file

@ -26,10 +26,21 @@ export function LayerSettings({
return null;
}
const a11yText = i18n.translate('xpack.lens.editLayerSettings', {
defaultMessage: 'Edit layer settings',
});
const a11yText = (chartType?: string) => {
if (chartType) {
return i18n.translate('xpack.lens.editLayerSettingsChartType', {
defaultMessage: 'Edit layer settings, {chartType}',
values: {
chartType,
},
});
}
return i18n.translate('xpack.lens.editLayerSettings', {
defaultMessage: 'Edit layer settings',
});
};
const contextMenuIcon = activeVisualization.getLayerContextMenuIcon?.(layerConfigProps);
return (
<EuiPopover
id={`lnsLayerPopover_${layerId}`}
@ -43,9 +54,9 @@ export function LayerSettings({
>
<ToolbarButton
size="s"
iconType={activeVisualization.getLayerContextMenuIcon?.(layerConfigProps) || 'gear'}
aria-label={a11yText}
title={a11yText}
iconType={contextMenuIcon?.icon || 'gear'}
aria-label={a11yText(contextMenuIcon?.label || '')}
title={a11yText(contextMenuIcon?.label || '')}
onClick={() => setIsOpen(!isOpen)}
data-test-subj="lns_layer_settings"
/>

5
x-pack/plugins/lens/public/types.ts
View file

@ -540,7 +540,10 @@ export interface Visualization<T = unknown> {
* Visualizations can provide a custom icon which will open a layer-specific popover
* If no icon is provided, gear icon is default
*/
getLayerContextMenuIcon?: (opts: { state: T; layerId: string }) => IconType | undefined;
getLayerContextMenuIcon?: (opts: {
state: T;
layerId: string;
}) => { icon: IconType | 'gear'; label: string } | undefined;
/**
* The frame is telling the visualization to update or set a dimension based on user interaction

6
x-pack/plugins/lens/public/xy_visualization/visualization.tsx
View file

@ -300,7 +300,11 @@ export const getXyVisualization = ({
getLayerContextMenuIcon({ state, layerId }) {
const layer = state.layers.find((l) => l.layerId === layerId);
return visualizationTypes.find((t) => t.id === layer?.seriesType)?.icon;
const visualizationType = visualizationTypes.find((t) => t.id === layer?.seriesType);
return {
icon: visualizationType?.icon || 'gear',
label: visualizationType?.label || '',
};
},
renderLayerContextMenu(domElement, props) {