change focus order for accessibility

tabbing out of the textarea jumps to the "Create" button, then the tab-toggle
This commit is contained in:
El RIDO 2024-11-24 16:17:45 +01:00
parent c7195aaf9a
commit 3d59d3da50
No known key found for this signature in database
GPG Key ID: 0F5C940A6BD81F92
3 changed files with 9 additions and 9 deletions

View File

@ -567,7 +567,7 @@ if ($isPage) :
<span class="glyphicon glyphicon-file" aria-hidden="true"></span> <?php echo I18n::_('New'), PHP_EOL; <span class="glyphicon glyphicon-file" aria-hidden="true"></span> <?php echo I18n::_('New'), PHP_EOL;
else : else :
?> ?>
<button id="sendbutton" type="button" class="hidden btn btn-<?php echo $isDark ? 'warning' : 'primary'; ?>"> <button id="sendbutton" type="button" tabindex="2" class="hidden btn btn-<?php echo $isDark ? 'warning' : 'primary'; ?>">
<span class="glyphicon glyphicon-upload" aria-hidden="true"></span> <?php echo I18n::_('Create'), PHP_EOL; <span class="glyphicon glyphicon-upload" aria-hidden="true"></span> <?php echo I18n::_('Create'), PHP_EOL;
endif; endif;
?> ?>
@ -583,10 +583,10 @@ endif;
<pre id="prettyprint" class="col-md-12 prettyprint linenums:1"></pre> <pre id="prettyprint" class="col-md-12 prettyprint linenums:1"></pre>
</div> </div>
<div id="plaintext" class="col-md-12 hidden"></div> <div id="plaintext" class="col-md-12 hidden"></div>
<p class="col-md-12"><textarea id="message" name="message" cols="80" rows="25" class="form-control hidden"></textarea></p> <p class="col-md-12"><textarea id="message" name="message" cols="80" rows="25" tabindex="1" class="form-control hidden"></textarea></p>
<p class="col-md-12 checkbox"> <p class="col-md-12 checkbox">
<label> <label>
<input id="messagetab" type="checkbox" checked="checked" /> <input id="messagetab" type="checkbox" tabindex="3" checked="checked" />
<?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'), PHP_EOL; ?> <?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'), PHP_EOL; ?>
</label> </label>
</p> </p>

View File

@ -425,7 +425,7 @@ endif;
<li role="presentation" class="nav-item me-1"><a class="nav-link active" role="tab" id="messageedit" href="#"><?php echo I18n::_('Editor'); ?></a></li> <li role="presentation" class="nav-item me-1"><a class="nav-link active" role="tab" id="messageedit" href="#"><?php echo I18n::_('Editor'); ?></a></li>
<li role="presentation" class="nav-item me-1"><a class="nav-link" role="tab" id="messagepreview" href="#"><?php echo I18n::_('Preview'); ?></a></li> <li role="presentation" class="nav-item me-1"><a class="nav-link" role="tab" id="messagepreview" href="#"><?php echo I18n::_('Preview'); ?></a></li>
<li role="presentation" class="nav-item ms-auto"> <li role="presentation" class="nav-item ms-auto">
<button id="sendbutton" type="button" class="hidden btn btn-primary"> <button id="sendbutton" type="button" tabindex="2" class="hidden btn btn-primary">
<svg width="16" height="16" fill="currentColor" aria-hidden="true"><use href="img/bootstrap-icons.svg#cloud-upload" /></svg> <?php echo I18n::_('Create'), PHP_EOL; ?> <svg width="16" height="16" fill="currentColor" aria-hidden="true"><use href="img/bootstrap-icons.svg#cloud-upload" /></svg> <?php echo I18n::_('Create'), PHP_EOL; ?>
</button> </button>
</li> </li>
@ -439,9 +439,9 @@ endif;
<pre id="prettyprint" class="card-body col-md-12 prettyprint linenums:1"></pre> <pre id="prettyprint" class="card-body col-md-12 prettyprint linenums:1"></pre>
</div> </div>
<div id="plaintext" class="col-md-12 hidden"></div> <div id="plaintext" class="col-md-12 hidden"></div>
<p class="col-md-12"><textarea id="message" name="message" cols="80" rows="25" aria-label="<?php echo I18n::_('Paste text'); ?>" class="form-control hidden"></textarea></p> <p class="col-md-12"><textarea id="message" name="message" cols="80" rows="25" aria-label="<?php echo I18n::_('Paste text'); ?>" tabindex="1" class="form-control hidden"></textarea></p>
<p class="col-md-12 form-check form-switch"> <p class="col-md-12 form-check form-switch">
<input id="messagetab" type="checkbox" class="form-check-input" checked="checked" /> <input id="messagetab" type="checkbox" tabindex="3" class="form-check-input" checked="checked" />
<label for="messagetab" class="form-check-label"> <label for="messagetab" class="form-check-label">
<?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'), PHP_EOL; ?> <?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'), PHP_EOL; ?>
</label> </label>

View File

@ -125,7 +125,7 @@ endif;
<div id="toolbar"> <div id="toolbar">
<button id="newbutton" class="reloadlink hidden"><img src="img/icon_new.png" width="11" height="15" alt="" /><?php echo I18n::_('New'); ?></button> <button id="newbutton" class="reloadlink hidden"><img src="img/icon_new.png" width="11" height="15" alt="" /><?php echo I18n::_('New'); ?></button>
<button id="retrybutton" class="reloadlink hidden"><?php echo I18n::_('Retry'), PHP_EOL; ?></button> <button id="retrybutton" class="reloadlink hidden"><?php echo I18n::_('Retry'), PHP_EOL; ?></button>
<button id="sendbutton" class="hidden"><img src="img/icon_send.png" width="18" height="15" alt="" /><?php echo I18n::_('Create'); ?></button> <button id="sendbutton" tabindex="2" class="hidden"><img src="img/icon_send.png" width="18" height="15" alt="" /><?php echo I18n::_('Create'); ?></button>
<button id="clonebutton" class="hidden"><img src="img/icon_clone.png" width="15" height="17" alt="" /><?php echo I18n::_('Clone'); ?></button> <button id="clonebutton" class="hidden"><img src="img/icon_clone.png" width="15" height="17" alt="" /><?php echo I18n::_('Clone'); ?></button>
<button id="rawtextbutton" class="hidden"><img src="img/icon_raw.png" width="15" height="15" alt="" /><?php echo I18n::_('Raw text'); ?></button> <button id="rawtextbutton" class="hidden"><img src="img/icon_raw.png" width="15" height="15" alt="" /><?php echo I18n::_('Raw text'); ?></button>
<button id="downloadtextbutton" class="hidden"><?php echo I18n::_('Save paste'), PHP_EOL; ?></button> <button id="downloadtextbutton" class="hidden"><?php echo I18n::_('Save paste'), PHP_EOL; ?></button>
@ -263,9 +263,9 @@ endif;
<pre id="prettyprint" class="prettyprint linenums:1"></pre> <pre id="prettyprint" class="prettyprint linenums:1"></pre>
</div> </div>
<div id="plaintext" class="hidden"></div> <div id="plaintext" class="hidden"></div>
<textarea id="message" name="message" cols="80" rows="25" class="hidden"></textarea> <textarea id="message" name="message" cols="80" rows="25" tabindex="1" class="hidden"></textarea>
<div class="button"> <div class="button">
<input id="messagetab" type="checkbox" checked="checked" /> <input id="messagetab" type="checkbox" tabindex="3" checked="checked" />
<label for="messagetab"><?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'); ?></label> <label for="messagetab"><?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'); ?></label>
</div> </div>
</article> </article>