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.

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

[11532] Improve local nav accessibility #14363

Closed
wants to merge 10 commits into from
2 changes: 1 addition & 1 deletion src/core_plugins/console/public/src/directives/help.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="kuiLocalDropdownTitle">Help</div>
<h2 class="kuiLocalDropdownTitle">Help</h2>

<tabset>
<tab heading="Request format">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="kuiLocalDropdownTitle">History</div>
<h2 class="kuiLocalDropdownTitle">History</h2>

<div class="history-body">
<ul
Expand Down
114 changes: 69 additions & 45 deletions src/core_plugins/console/public/src/directives/settings.html
Original file line number Diff line number Diff line change
@@ -1,67 +1,91 @@
<div class="kuiLocalDropdownTitle">Settings</div>
<h2 class="kuiLocalDropdownTitle">Settings</h2>

<form class="form" name="settingsForm" ng-submit="settingsForm.$valid && settings.apply()">
<div class="form-group">
<fieldset
class="kuiVerticalRhythm"
role="group"
>
<div class="kuiLocalDropdownHeader">
<div class="kuiLocalDropdownHeader__label">Font Size</div>
</div>

<div>
<input
input-focus
ng-model="settings.vals.fontSize"
name="fontSize"
type="number"
required
class="form-control"
data-test-subj="setting-font-size-input"
<legend
id="consoleFontSize"
class="kuiLocalDropdownHeader__label"
>
Font Size
</legend>
</div>

<div class="checkbox">
<label>
<input type="checkbox" ng-model="settings.vals.wrapMode"/> Wrap long lines
</label>
</div>
<input
input-focus
ng-model="settings.vals.fontSize"
name="fontSize"
type="number"
required
class="kuiLocalDropdownInput kuiVerticalRhythmSmall"
aria-describedby="consoleFontSize"
data-test-subj="setting-font-size-input"
>

</div>
<label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
<input
class="kuiCheckBox"
type="checkbox"
ng-model="settings.vals.wrapMode"
aria-describedby="consoleFontSize"
>
<span class="kuiCheckBoxLabel__text">
Wrap long lines
</span>
</label>
</fieldset>

<div class="form-group">
<fieldset
class="kuiVerticalRhythm"
role="group"
>
<div class="kuiLocalDropdownHeader">
<div class="kuiLocalDropdownHeader__label">Autocomplete</div>
</div>

<div class="checkbox">
<label>
<input
name="autocompleteFields"
type="checkbox"
ng-model="settings.vals.autocomplete.fields">
Fields
</input>
</label>
<legend
id="consoleAutocomplete"
class="kuiLocalDropdownHeader__label"
>
Autocomplete
</legend>
</div>

<div class="checkbox">
<label>
<input
name="autocompleteIndices"
type="checkbox"
ng-model="settings.vals.autocomplete.indices">
Indices &amp; Aliases
</input>
</label>
</div>
<label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
<input
class="kuiCheckBox"
name="autocompleteFields"
type="checkbox"
ng-model="settings.vals.autocomplete.fields"
aria-describedby="consoleAutocomplete"
>
<span class="kuiCheckBoxLabel__text">
Fields
</span>
</label>

</div>
<label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
<input
class="kuiCheckBox"
name="autocompleteIndices"
type="checkbox"
ng-model="settings.vals.autocomplete.indices"
aria-describedby="consoleAutocomplete"
>
<span class="kuiCheckBoxLabel__text">
Indices &amp; Aliases
</span>
</label>
</fieldset>

<div class="settings-footer">
<div class="kuiVerticalRhythm">
<button
ng-click="kbnTopNav.close()"
class="kuiButton kuiButton--hollow"
>
Cancel
</button>

<button
type="submit"
ng-disabled="settingsForm.$invalid"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="kuiLocalDropdownTitle">Welcome to Console</div>
<h2 class="kuiLocalDropdownTitle">Welcome to Console</h2>

<p><strong>Quick intro to the UI</strong></p>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
ng-switch="mode"
ng-init="mode = 'visualization'"
>
<div class="kuiLocalDropdownTitle">Add Panels</div>
<h2 class="kuiLocalDropdownTitle">
Add Panels
</h2>

<div class="kuiTabs">
<button
Expand All @@ -13,6 +15,7 @@
>
Visualization
</button>

<button
ng-class="{ 'kuiTab-isSelected': mode == 'search' }"
class="kuiTab"
Expand Down
14 changes: 10 additions & 4 deletions src/core_plugins/kibana/public/dashboard/top_nav/options.html
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
<form role="form">
<div class="kuiLocalDropdownTitle">Options</div>
<h2 class="kuiLocalDropdownTitle">
Options
</h2>

<div class="input-group">
<label>
<div class="kuiLocalDropdownSection">
<label class="kuiCheckBoxLabel">
<input
class="kuiCheckBox"
type="checkbox"
ng-model="model.darkTheme"
ng-checked="model.darkTheme"
data-test-subj="dashboardDarkThemeCheckbox"
>
Use dark theme

<span class="kuiCheckBoxLabel__text">
Use dark theme
</span>
</label>
</div>
</form>
46 changes: 35 additions & 11 deletions src/core_plugins/kibana/public/dashboard/top_nav/save.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,22 @@
role="form"
ng-submit="opts.save()"
>
<div class="kuiLocalDropdownTitle">Save {{opts.displayName}}</div>
<h2 class="kuiLocalDropdownTitle">
Save {{opts.displayName}}
</h2>

<div class="kuiLocalDropdownSection">
<div class="kuiLocalDropdownHeader">
<div class="kuiLocalDropdownHeader__label">
<label
class="kuiLocalDropdownHeader__label"
for="saveDashboardTitle"
>
Title
</div>
</label>
</div>

<input
id="saveDashboardTitle"
class="kuiLocalDropdownInput"
data-test-subj="dashboardTitle"
type="text"
Expand All @@ -18,13 +26,19 @@
input-focus="select"
>
</div>

<div class="kuiLocalDropdownSection">
<div class="kuiLocalDropdownHeader">
<div class="kuiLocalDropdownHeader__label">
<label
class="kuiLocalDropdownHeader__label"
for="saveDashboardDescription"
>
Description
</div>
</label>
</div>

<input
id="saveDashboardDescription"
class="kuiLocalDropdownInput"
data-test-subj="dashboardDescription"
type="text"
Expand All @@ -33,26 +47,36 @@
>
</div>

<saved-object-save-as-check-box saved-object="opts.dashboard"></saved-object-save-as-check-box>
<saved-object-save-as-check-box
class="kuiVerticalRhythmSmall"
saved-object="opts.dashboard"
></saved-object-save-as-check-box>

<div class="form-group">
<label>
<div class="kuiVerticalRhythm">
<label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
<input
class="kuiCheckBox"
type="checkbox"
ng-model="model.timeRestore"
ng-checked="model.timeRestore"
data-test-subj="storeTimeWithDashboard"
>
Store time with {{opts.displayName}}
<kbn-info placement="bottom" info="Change the time filter to the currently selected time each time this dashboard is loaded"></kbn-info>

<span class="kuiCheckBoxLabel__text">
Store time with {{opts.displayName}}
</span>
</label>

<div class="kuiLocalDropdownFormNote kuiVerticalRhythmSmall">
This changes the time filter to the currently selected time each time this dashboard is loaded.
</div>
</div>

<button
data-test-subj="confirmSaveDashboardButton"
type="submit"
ng-disabled="!model.title"
class="kuiButton kuiButton--primary"
class="kuiButton kuiButton--primary kuiVerticalRhythm"
aria-label="Save dashboard"
>
Save
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<form role="form" ng-submit="fetch()">
<div class="kuiLocalDropdownTitle">Open Search</div>
<h2 class="kuiLocalDropdownTitle">
Open Search
</h2>

<saved-object-finder type="searches"></saved-object-finder>
</form>
13 changes: 10 additions & 3 deletions src/core_plugins/kibana/public/discover/partials/save_search.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
role="form"
ng-submit="opts.saveDataSource()"
>
<div class="kuiLocalDropdownTitle">Save Search</div>
<h2 class="kuiLocalDropdownTitle">
Save Search
</h2>

<input
class="kuiLocalDropdownInput"
id="SaveSearch"
Expand All @@ -11,12 +14,16 @@
placeholder="Name this search..."
>

<saved-object-save-as-check-box saved-object="opts.savedSearch"></saved-object-save-as-check-box>
<saved-object-save-as-check-box
class="kuiVerticalRhythmSmall"
saved-object="opts.savedSearch"
></saved-object-save-as-check-box>

<button
ng-disabled="!opts.savedSearch.title"
data-test-subj="discoverSaveSearchButton"
type="submit"
class="kuiButton kuiButton--primary"
class="kuiButton kuiButton--primary kuiVerticalRhythmSmall"
>
Save
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,15 @@
required
>

<saved-object-save-as-check-box saved-object="opts.savedVis"></saved-object-save-as-check-box>
<saved-object-save-as-check-box
class="kuiVerticalRhythmSmall"
saved-object="opts.savedVis"
></saved-object-save-as-check-box>

<button
data-test-subj="saveVisualizationButton"
type="submit"
class="kuiButton kuiButton--primary"
class="kuiButton kuiButton--primary kuiVerticalRhythmSmall"
>
{{ opts.isAddToDashMode() ? 'Save and Add to Dashboard' : 'Save'}}
</button>
Expand Down
36 changes: 26 additions & 10 deletions src/core_plugins/timelion/public/partials/save_sheet.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,33 @@ <h4 class="list-group-item-heading">Save entire Timelion sheet</h4>

<div class="list-group-item" ng-show="section == 'sheet'">
<form role="form" class="container-fluid" ng-submit="opts.saveSheet()">
<div class="form-group">
<label for="savedSheet" class="control-label">Save sheet as</label>
<input id="savedSheet" ng-model="opts.savedSheet.title" input-focus="select" class="form-control" placeholder="Name this sheet...">
</div>
<label
for="savedSheet"
class="kuiLabel kuiVerticalRhythmSmall"
>
Save sheet as
</label>

<saved-object-save-as-check-box saved-object="opts.savedSheet"></saved-object-save-as-check-box>
<div class="form-group">
<button ng-disabled="!opts.savedSheet.title" type="submit" class="kuiButton kuiButton--primary">
Save
</button>
</div>
<input
id="savedSheet"
ng-model="opts.savedSheet.title"
input-focus="select"
class="form-control kuiVerticalRhythmSmall"
placeholder="Name this sheet..."
>

<saved-object-save-as-check-box
class="kuiVerticalRhythmSmall"
saved-object="opts.savedSheet"
></saved-object-save-as-check-box>

<button
ng-disabled="!opts.savedSheet.title"
type="submit"
class="kuiButton kuiButton--primary kuiVerticalRhythmSmall"
>
Save
</button>
</form>
</div>

Expand Down
Loading