UI: Improve tabindex for task forms

This commit is contained in:
Frederic Guillot 2015-06-13 16:08:59 -04:00
parent 0b7435b882
commit a964350a64
6 changed files with 35 additions and 33 deletions

View File

@ -27,13 +27,13 @@
</span>
</li>
<li>
<?= $this->form->select('user_id', $users, array(), array(), array('data-placeholder="'.t('Filter by user').'"', 'data-notfound="'.t('No results match:').'"'), 'apply-filters chosen-select') ?>
<?= $this->form->select('user_id', $users, array(), array(), array('data-placeholder="'.t('Filter by user').'"', 'data-notfound="'.t('No results match:').'"', 'tabindex=="-1"'), 'apply-filters chosen-select') ?>
</li>
<li>
<?= $this->form->select('category_id', $categories, array(), array(), array('data-placeholder="'.t('Filter by category').'"', 'data-notfound="'.t('No results match:').'"'), 'apply-filters chosen-select') ?>
<?= $this->form->select('category_id', $categories, array(), array(), array('data-placeholder="'.t('Filter by category').'"', 'data-notfound="'.t('No results match:').'"', 'tabindex=="-1"'), 'apply-filters chosen-select') ?>
</li>
<li>
<select id="more-filters" multiple data-placeholder="<?= t('More filters') ?>" data-notfound="<?= t('No results match:') ?>" class="apply-filters hide-mobile">
<select id="more-filters" multiple data-placeholder="<?= t('More filters') ?>" data-notfound="<?= t('No results match:') ?>" class="apply-filters hide-mobile" tabindex="-1">
<option value=""></option>
<option value="filter-due-date"><?= t('Filter by due date') ?></option>
<option value="filter-recent"><?= t('Filter recently updated') ?></option>

View File

@ -48,7 +48,7 @@
<ul>
<?php if (isset($board_selector) && ! empty($board_selector)): ?>
<li>
<select id="board-selector" data-notfound="<?= t('No results match:') ?>" data-placeholder="<?= t('Display another project') ?>" data-board-url="<?= $this->url->href('board', 'show', array('project_id' => 'PROJECT_ID')) ?>">
<select id="board-selector" tabindex=="-1" data-notfound="<?= t('No results match:') ?>" data-placeholder="<?= t('Display another project') ?>" data-board-url="<?= $this->url->href('board', 'show', array('project_id' => 'PROJECT_ID')) ?>">
<option value=""></option>
<?php foreach($board_selector as $board_id => $board_name): ?>
<option value="<?= $board_id ?>"><?= $this->e($board_name) ?></option>

View File

@ -9,11 +9,17 @@
<div class="form-column">
<?= $this->form->label(t('Title'), 'title') ?>
<?= $this->form->text('title', $values, $errors, array('required', 'maxlength="200"')) ?><br/>
<?= $this->form->text('title', $values, $errors, array('autofocus', 'required', 'maxlength="200"', 'tabindex="1"')) ?><br/>
<?= $this->form->label(t('Description'), 'description') ?>
<div class="form-tabs">
<div class="write-area">
<?= $this->form->textarea('description', $values, $errors, array('placeholder="'.t('Leave a description').'"', 'tabindex="2"')) ?>
</div>
<div class="preview-area">
<div class="markdown"></div>
</div>
<ul class="form-tabs-nav">
<li class="form-tab form-tab-selected">
<i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
@ -22,12 +28,6 @@
<a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
</li>
</ul>
<div class="write-area">
<?= $this->form->textarea('description', $values, $errors, array('placeholder="'.t('Leave a description').'"')) ?>
</div>
<div class="preview-area">
<div class="markdown"></div>
</div>
</div>
<div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
@ -39,24 +39,24 @@
<?= $this->form->hidden('project_id', $values) ?>
<?= $this->form->label(t('Assignee'), 'owner_id') ?>
<?= $this->form->select('owner_id', $users_list, $values, $errors) ?><br/>
<?= $this->form->select('owner_id', $users_list, $values, $errors, array('tabindex="3"')) ?><br/>
<?= $this->form->label(t('Category'), 'category_id') ?>
<?= $this->form->select('category_id', $categories_list, $values, $errors) ?><br/>
<?= $this->form->select('category_id', $categories_list, $values, $errors, array('tabindex="4"')) ?><br/>
<?= $this->form->label(t('Color'), 'color_id') ?>
<?= $this->form->select('color_id', $colors_list, $values, $errors) ?><br/>
<?= $this->form->select('color_id', $colors_list, $values, $errors, array('tabindex="5"')) ?><br/>
<?= $this->form->label(t('Complexity'), 'score') ?>
<?= $this->form->number('score', $values, $errors) ?><br/>
<?= $this->form->number('score', $values, $errors, array('tabindex="6"')) ?><br/>
<?= $this->form->label(t('Due Date'), 'date_due') ?>
<?= $this->form->text('date_due', $values, $errors, array('placeholder="'.$this->text->in($date_format, $date_formats).'"'), 'form-date') ?><br/>
<?= $this->form->text('date_due', $values, $errors, array('placeholder="'.$this->text->in($date_format, $date_formats).'"', 'tabindex="7"'), 'form-date') ?><br/>
<div class="form-help"><?= t('Others formats accepted: %s and %s', date('Y-m-d'), date('Y_m_d')) ?></div>
</div>
<div class="form-actions">
<input type="submit" value="<?= t('Save') ?>" class="btn btn-blue"/>
<input type="submit" value="<?= t('Save') ?>" class="btn btn-blue" tabindex="10">
<?= t('or') ?>
<?php if ($ajax): ?>
<?= $this->url->link(t('cancel'), 'board', 'show', array('project_id' => $task['project_id']), false, 'close-popover') ?>

View File

@ -17,11 +17,17 @@
<div class="form-column">
<?= $this->form->label(t('Title'), 'title') ?>
<?= $this->form->text('title', $values, $errors, array('autofocus', 'required', 'maxlength="200"'), 'form-input-large') ?><br/>
<?= $this->form->text('title', $values, $errors, array('autofocus', 'required', 'maxlength="200"', 'tabindex="1"'), 'form-input-large') ?><br/>
<?= $this->form->label(t('Description'), 'description') ?>
<div class="form-tabs">
<div class="write-area">
<?= $this->form->textarea('description', $values, $errors, array('placeholder="'.t('Leave a description').'"', 'tabindex="2"')) ?>
</div>
<div class="preview-area">
<div class="markdown"></div>
</div>
<ul class="form-tabs-nav">
<li class="form-tab form-tab-selected">
<i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
@ -30,12 +36,6 @@
<a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
</li>
</ul>
<div class="write-area">
<?= $this->form->textarea('description', $values, $errors, array('placeholder="'.t('Leave a description').'"')) ?>
</div>
<div class="preview-area">
<div class="markdown"></div>
</div>
</div>
<div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
@ -49,35 +49,35 @@
<?= $this->form->hidden('project_id', $values) ?>
<?= $this->form->label(t('Assignee'), 'owner_id') ?>
<?= $this->form->select('owner_id', $users_list, $values, $errors) ?><br/>
<?= $this->form->select('owner_id', $users_list, $values, $errors, array('tabindex="3"')) ?><br/>
<?= $this->form->label(t('Category'), 'category_id') ?>
<?= $this->form->select('category_id', $categories_list, $values, $errors) ?><br/>
<?= $this->form->select('category_id', $categories_list, $values, $errors, array('tabindex="4"')) ?><br/>
<?php if (! (count($swimlanes_list) === 1 && key($swimlanes_list) === 0)): ?>
<?= $this->form->label(t('Swimlane'), 'swimlane_id') ?>
<?= $this->form->select('swimlane_id', $swimlanes_list, $values, $errors) ?><br/>
<?= $this->form->select('swimlane_id', $swimlanes_list, $values, $errors, array('tabindex="5"')) ?><br/>
<?php endif ?>
<?= $this->form->label(t('Column'), 'column_id') ?>
<?= $this->form->select('column_id', $columns_list, $values, $errors) ?><br/>
<?= $this->form->select('column_id', $columns_list, $values, $errors, array('tabindex="6"')) ?><br/>
<?= $this->form->label(t('Color'), 'color_id') ?>
<?= $this->form->select('color_id', $colors_list, $values, $errors) ?><br/>
<?= $this->form->select('color_id', $colors_list, $values, $errors, array('tabindex="7"')) ?><br/>
<?= $this->form->label(t('Complexity'), 'score') ?>
<?= $this->form->number('score', $values, $errors) ?><br/>
<?= $this->form->number('score', $values, $errors, array('tabindex="8"')) ?><br/>
<?= $this->form->label(t('Original estimate'), 'time_estimated') ?>
<?= $this->form->numeric('time_estimated', $values, $errors) ?> <?= t('hours') ?><br/>
<?= $this->form->numeric('time_estimated', $values, $errors, array('tabindex="9"')) ?> <?= t('hours') ?><br/>
<?= $this->form->label(t('Due Date'), 'date_due') ?>
<?= $this->form->text('date_due', $values, $errors, array('placeholder="'.$this->text->in($date_format, $date_formats).'"'), 'form-date') ?><br/>
<?= $this->form->text('date_due', $values, $errors, array('placeholder="'.$this->text->in($date_format, $date_formats).'"', 'tabindex="10"'), 'form-date') ?><br/>
<div class="form-help"><?= t('Others formats accepted: %s and %s', date('Y-m-d'), date('Y_m_d')) ?></div>
</div>
<div class="form-actions">
<input type="submit" value="<?= t('Save') ?>" class="btn btn-blue"/>
<input type="submit" value="<?= t('Save') ?>" class="btn btn-blue" tabindex="11"/>
<?= t('or') ?> <?= $this->url->link(t('cancel'), 'board', 'show', array('project_id' => $values['project_id']), false, 'close-popover') ?>
</div>
</form>

View File

@ -264,6 +264,7 @@ select {
select:focus {
outline: 0;
font-weight: bold;
}
::-webkit-input-placeholder {

View File

@ -59,6 +59,7 @@ select {
select:focus {
outline: 0;
font-weight: bold;
}
::-webkit-input-placeholder {