github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

show panel index in aria label (#124112)

Browse source 
* show panel index in aria label

* update translation key
This commit is contained in:
Vadim Kibana 2022-02-01 09:34:39 +01:00 • committed by GitHub
parent 913eac01ab
commit 9f239dc0a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 36 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx
View file

@ -242,10 +242,11 @@ class DashboardGridUi extends React.Component<DashboardGridProps, State> {
}
});
const dashboardPanels = _.map(panelsInOrder, ({ explicitInput, type }) => (
const dashboardPanels = _.map(panelsInOrder, ({ explicitInput, type }, index) => (
<DashboardGridItem
id={explicitInput.id}
key={explicitInput.id}
id={explicitInput.id}
index={index + 1}
type={type}
container={container}
PanelComponent={kibana.services.embeddable.EmbeddablePanel}

3
src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid_item.tsx
View file

@ -20,6 +20,7 @@ type DivProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'
interface Props extends PanelProps, DivProps {
id: DashboardPanelState['explicitInput']['id'];
index?: number;
type: DashboardPanelState['type'];
container: DashboardContainer;
focusedPanelId?: string;
@ -35,6 +36,7 @@ const Item = React.forwardRef<HTMLDivElement, Props>(
expandedPanelId,
focusedPanelId,
id,
index,
PanelComponent,
type,
isRenderable = true,
@ -72,6 +74,7 @@ const Item = React.forwardRef<HTMLDivElement, Props>(
// This key is used to force rerendering on embeddable type change while the id remains the same
key={type}
embeddableId={id}
index={index}
{...{ container, PanelComponent }}
/>
{children}

5
src/plugins/embeddable/public/lib/containers/embeddable_child_panel.tsx
View file

@ -17,6 +17,7 @@ import { EmbeddableStart } from '../../plugin';
export interface EmbeddableChildPanelProps {
embeddableId: string;
index?: number;
className?: string;
container: IContainer;
PanelComponent: EmbeddableStart['EmbeddablePanel'];
@ -64,7 +65,7 @@ export class EmbeddableChildPanel extends React.Component<EmbeddableChildPanelPr
}
public render() {
const { PanelComponent } = this.props;
const { PanelComponent, index } = this.props;
const classes = classNames('embPanel', {
'embPanel-isLoading': this.state.loading,
});
@ -74,7 +75,7 @@ export class EmbeddableChildPanel extends React.Component<EmbeddableChildPanelPr
{this.state.loading || !this.embeddable ? (
<EuiLoadingChart size="l" mono />
) : (
<PanelComponent embeddable={this.embeddable} />
<PanelComponent embeddable={this.embeddable} index={index} />
)}
</div>
);

8
src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx
View file

@ -67,6 +67,13 @@ export interface EmbeddableContainerContext {
interface Props {
embeddable: IEmbeddable<EmbeddableInput, EmbeddableOutput>;
/**
* Ordinal number of the embeddable in the container, used as a
* "title" when the panel has no title, i.e. "Panel {index}".
*/
index?: number;
getActions: UiActionsService['getTriggerCompatibleActions'];
getEmbeddableFactory?: EmbeddableStart['getEmbeddableFactory'];
getAllEmbeddableFactories?: EmbeddableStart['getEmbeddableFactories'];
@ -286,6 +293,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
}
closeContextMenu={this.state.closeContextMenu}
title={title}
index={this.props.index}
badges={this.state.badges}
notifications={this.state.notifications}
embeddable={this.props.embeddable}

4
src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
View file

@ -27,6 +27,7 @@ import { CustomizePanelTitleAction } from '.';
export interface PanelHeaderProps {
title?: string;
index?: number;
isViewMode: boolean;
hidePanelTitle: boolean;
getActionContextMenuPanel: () => Promise<EuiContextMenuPanelDescriptor[]>;
@ -114,6 +115,7 @@ function getViewDescription(embeddable: IEmbeddable | EmbeddableWithDescription)
export function PanelHeader({
title,
index,
isViewMode,
hidePanelTitle,
getActionContextMenuPanel,
@ -159,6 +161,7 @@ export function PanelHeader({
isViewMode={isViewMode}
closeContextMenu={closeContextMenu}
title={title}
index={index}
/>
<EuiScreenReaderOnly>{getAriaLabel()}</EuiScreenReaderOnly>
</div>
@ -228,6 +231,7 @@ export function PanelHeader({
getActionContextMenuPanel={getActionContextMenuPanel}
closeContextMenu={closeContextMenu}
title={title}
index={index}
/>
</figcaption>
</span>

18
src/plugins/embeddable/public/lib/panel/panel_header/panel_options_menu.tsx
View file

@ -21,6 +21,7 @@ export interface PanelOptionsMenuProps {
isViewMode: boolean;
closeContextMenu: boolean;
title?: string;
index?: number;
}
interface State {
@ -63,7 +64,7 @@ export class PanelOptionsMenu extends React.Component<PanelOptionsMenuProps, Sta
}
public render() {
const { isViewMode, title } = this.props;
const { isViewMode, title, index } = this.props;
const enhancedAriaLabel = i18n.translate(
'embeddableApi.panel.optionsMenu.panelOptionsButtonEnhancedAriaLabel',
{
@ -71,12 +72,15 @@ export class PanelOptionsMenu extends React.Component<PanelOptionsMenuProps, Sta
values: { title },
}
);
const ariaLabelWithoutTitle = i18n.translate(
'embeddableApi.panel.optionsMenu.panelOptionsButtonAriaLabel',
{
defaultMessage: 'Panel options',
}
);
const ariaLabelWithoutTitle =
index === undefined
? i18n.translate('embeddableApi.panel.optionsMenu.panelOptionsButtonAriaLabel', {
defaultMessage: 'Panel options',
})
: i18n.translate('embeddableApi.panel.optionsMenu.panelOptionsButtonAriaLabelWithIndex', {
defaultMessage: 'Options for panel {index}',
values: { index },
});
const button = (
<EuiButtonIcon

4
src/plugins/embeddable/public/plugin.tsx
View file

@ -104,6 +104,7 @@ export type EmbeddablePanelHOC = React.FC<{
embeddable: IEmbeddable;
hideHeader?: boolean;
containerContext?: EmbeddableContainerContext;
index?: number;
}>;
export class EmbeddablePublicPlugin implements Plugin<EmbeddableSetup, EmbeddableStart> {
@ -167,15 +168,18 @@ export class EmbeddablePublicPlugin implements Plugin<EmbeddableSetup, Embeddabl
embeddable,
hideHeader,
containerContext,
index,
}: {
embeddable: IEmbeddable;
hideHeader?: boolean;
containerContext?: EmbeddableContainerContext;
index?: number;
}) =>
(
<EmbeddablePanel
hideHeader={hideHeader}
embeddable={embeddable}
index={index}
stateTransfer={this.stateTransferService}
getActions={uiActions.getTriggerCompatibleActions}
getEmbeddableFactory={this.getEmbeddableFactory}