Skip to content

Commit

Permalink
[Graph] Fix various a11y issues (#54097)
Browse files Browse the repository at this point in the history
  • Loading branch information
flash1293 authored Jan 13, 2020
1 parent aeebedf commit 204155b
Show file tree
Hide file tree
Showing 11 changed files with 113 additions and 40 deletions.

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

Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export class DashboardListing extends React.Component {
return (
<I18nProvider>
<TableListView
headingId="dashboardListingHeading"
createItem={this.props.hideWriteControls ? null : this.props.createItem}
findItems={this.props.findItems}
deleteItems={this.props.hideWriteControls ? null : this.props.deleteItems}
Expand Down Expand Up @@ -73,12 +74,12 @@ export class DashboardListing extends React.Component {
<EuiEmptyPrompt
iconType="visualizeApp"
title={
<h2>
<h1 id="dashboardListingHeading">
<FormattedMessage
id="kbn.dashboard.listing.noItemsMessage"
defaultMessage="Looks like you don't have any dashboards."
/>
</h2>
</h1>
}
/>
</div>
Expand All @@ -90,12 +91,12 @@ export class DashboardListing extends React.Component {
<EuiEmptyPrompt
iconType="dashboardApp"
title={
<h2>
<h1 id="dashboardListingHeading">
<FormattedMessage
id="kbn.dashboard.listing.createNewDashboard.title"
defaultMessage="Create your first dashboard"
/>
</h2>
</h1>
}
body={
<Fragment>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ class VisualizeListingTable extends Component {
const { visualizeCapabilities, uiSettings, toastNotifications } = getServices();
return (
<TableListView
headingId="visualizeListingHeading"
// we allow users to create visualizations even if they can't save them
// for data exploration purposes
createItem={this.props.createItem}
Expand Down Expand Up @@ -113,12 +114,12 @@ class VisualizeListingTable extends Component {
<EuiEmptyPrompt
iconType="visualizeApp"
title={
<h2>
<h1 id="visualizeListingHeading">
<FormattedMessage
id="kbn.visualize.listing.noItemsMessage"
defaultMessage="Looks like you don't have any visualizations."
/>
</h2>
</h1>
}
/>
</div>
Expand All @@ -130,12 +131,12 @@ class VisualizeListingTable extends Component {
<EuiEmptyPrompt
iconType="visualizeApp"
title={
<h2>
<h1 id="visualizeListingHeading">
<FormattedMessage
id="kbn.visualize.listing.createNew.title"
defaultMessage="Create your first visualization"
/>
</h2>
</h1>
}
body={
<Fragment>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,11 @@ export interface TableListViewProps {
tableListTitle: string;
toastNotifications: ToastsStart;
uiSettings: IUiSettingsClient;
/**
* Id of the heading element describing the table. This id will be used as `aria-labelledby` of the wrapper element.
* If the table is not empty, this component renders its own h1 element using the same id.
*/
headingId?: string;
}

export interface TableListViewState {
Expand Down Expand Up @@ -463,7 +468,7 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" data-test-subj="top-nav">
<EuiFlexItem grow={false}>
<EuiTitle size="l">
<h1>{this.props.tableListTitle}</h1>
<h1 id={this.props.headingId}>{this.props.tableListTitle}</h1>
</EuiTitle>
</EuiFlexItem>

Expand Down Expand Up @@ -498,7 +503,11 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
className="itemListing__page"
restrictWidth
>
<EuiPageBody>{this.renderPageContent()}</EuiPageBody>
<EuiPageBody
aria-labelledby={this.state.hasInitialFetchReturned ? this.props.headingId : undefined}
>
{this.renderPageContent()}
</EuiPageBody>
</EuiPage>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@

.help-block {
font-size: $euiFontSizeXS;
color: $euiTextColor;
}
}

Expand Down
14 changes: 12 additions & 2 deletions x-pack/legacy/plugins/graph/public/angular/templates/index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="graphBasic" ng-controller="graphuiPlugin">
<main id="graphBasic" ng-controller="graphuiPlugin" aria-labelledby="graphHeading">
<!-- Local nav. -->
<kbn-top-nav name="workspacesTopNav" config="topNavMenu">
</kbn-top-nav>
Expand Down Expand Up @@ -81,6 +81,7 @@
<button
class="kuiButton kuiButton--basic kuiButton--small"
tooltip="{{ ::'xpack.graph.sidebar.topMenu.undoButtonTooltip' | i18n: { defaultMessage: 'Undo' } }}"
aria-label="{{ ::'xpack.graph.sidebar.topMenu.undoButtonTooltip' | i18n: { defaultMessage: 'Undo' } }}"
type="button"
ng-click="workspace.undo()"
ng-disabled="workspace === null||workspace.undoLog.length <1"
Expand All @@ -91,6 +92,7 @@
<button
class="kuiButton kuiButton--basic kuiButton--small"
tooltip="{{ ::'xpack.graph.sidebar.topMenu.redoButtonTooltip' | i18n: { defaultMessage: 'Redo' } }}"
aria-label="{{ ::'xpack.graph.sidebar.topMenu.redoButtonTooltip' | i18n: { defaultMessage: 'Redo' } }}"
type="button"
ng-disabled="workspace === null ||workspace.redoLog.length === 0"
ng-click="workspace.redo()"
Expand All @@ -100,48 +102,56 @@

<button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||liveResponseFields.length === 0||workspace.nodes.length === 0"
tooltip="{{ ::'xpack.graph.sidebar.topMenu.expandSelectionButtonTooltip' | i18n: { defaultMessage: 'Expand selection' } }}"
aria-label="{{ ::'xpack.graph.sidebar.topMenu.expandSelectionButtonTooltip' | i18n: { defaultMessage: 'Expand selection' } }}"
ng-click="setDetail(null);workspace.expandSelecteds({toFields:liveResponseFields});">
<span class="kuiIcon fa-plus"></span>
</button>

<button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||workspace.nodes.length === 0"
tooltip="{{ ::'xpack.graph.sidebar.topMenu.addLinksButtonTooltip' | i18n: { defaultMessage: 'Add links between existing terms' } }}"
aria-label="{{ ::'xpack.graph.sidebar.topMenu.addLinksButtonTooltip' | i18n: { defaultMessage: 'Add links between existing terms' } }}"
ng-click="workspace.fillInGraph();">
<span class="kuiIcon fa-link"></span>
</button>

<button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||workspace.nodes.length === 0"
tooltip="{{ ::'xpack.graph.sidebar.topMenu.removeVerticesButtonTooltip' | i18n: { defaultMessage: 'Remove vertices from workspace' } }}"
aria-label="{{ ::'xpack.graph.sidebar.topMenu.removeVerticesButtonTooltip' | i18n: { defaultMessage: 'Remove vertices from workspace' } }}"
ng-click="setDetail(null);workspace.deleteSelection();" data-test-subj="graphRemoveSelection">
<span class="kuiIcon fa-trash"></span>
</button>

<button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||workspace.selectedNodes.length === 0"
tooltip="{{ ::'xpack.graph.sidebar.topMenu.blacklistButtonTooltip' | i18n: { defaultMessage: 'Blacklist selection from return to workspace' } }}"
aria-label="{{ ::'xpack.graph.sidebar.topMenu.blacklistButtonTooltip' | i18n: { defaultMessage: 'Blacklist selection from return to workspace' } }}"
ng-click="workspace.blacklistSelection();">
<span class="kuiIcon fa-ban"></span>
</button>

<button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||workspace.selectedNodes.length === 0"
tooltip="{{ ::'xpack.graph.sidebar.topMenu.customStyleButtonTooltip' | i18n: { defaultMessage: 'Custom style selected vertices' } }}"
aria-label="{{ ::'xpack.graph.sidebar.topMenu.customStyleButtonTooltip' | i18n: { defaultMessage: 'Custom style selected vertices' } }}"
ng-click="setDetail({showStyle:true})">
<span class="kuiIcon fa-paint-brush"></span>
</button>

<button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null||workspace.nodes.length === 0"
tooltip="{{ ::'xpack.graph.sidebar.topMenu.drillDownButtonTooltip' | i18n: { defaultMessage: 'Drill down' } }}"
aria-label="{{ ::'xpack.graph.sidebar.topMenu.drillDownButtonTooltip' | i18n: { defaultMessage: 'Drill down' } }}"
ng-click="setDetail({showDrillDowns:true})">
<span class="kuiIcon fa-info"></span>
</button>

<button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace.nodes.length === 0" ng-if="workspace.nodes.length === 0||workspace.force === null"
tooltip="{{ ::'xpack.graph.sidebar.topMenu.runLayoutButtonTooltip' | i18n: { defaultMessage: 'Run layout' } }}"
aria-label="{{ ::'xpack.graph.sidebar.topMenu.runLayoutButtonTooltip' | i18n: { defaultMessage: 'Run layout' } }}"
ng-click="workspace.runLayout()" data-test-subj="graphResumeLayout">
<span class="kuiIcon fa-play"></span>
</button>

<button class="kuiButton kuiButton--basic kuiButton--small" ng-if="workspace.force !== null&&workspace.nodes.length>0"
tooltip="{{ ::'xpack.graph.sidebar.topMenu.pauseLayoutButtonTooltip' | i18n: { defaultMessage: 'Pause layout' } }}"
aria-label="{{ ::'xpack.graph.sidebar.topMenu.pauseLayoutButtonTooltip' | i18n: { defaultMessage: 'Pause layout' } }}"
ng-click="workspace.stopLayout()" data-test-subj="graphPauseLayout">
<span class="kuiIcon fa-pause"></span>
</button>
Expand Down Expand Up @@ -386,4 +396,4 @@
</div>
<!--end svg container-->

</div>
</main>
2 changes: 2 additions & 0 deletions x-pack/legacy/plugins/graph/public/components/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { FieldManager } from './field_manager';
import { SearchBarProps, SearchBar } from './search_bar';
import { GraphStore } from '../state_management';
import { GuidancePanel } from './guidance_panel';
import { GraphTitle } from './graph_title';

import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';

Expand Down Expand Up @@ -52,6 +53,7 @@ export function GraphApp(props: GraphAppProps) {
>
<Provider store={reduxStore}>
<>
{props.isInitialized && <GraphTitle />}
<div className="gphGraph__bar">
<SearchBar {...searchBarProps} />
<EuiSpacer size="s" />
Expand Down
Loading

0 comments on commit 204155b

Please sign in to comment.