Skip to content

Commit

Permalink
[4.0] Repeatable grouped buttons [a11y] (#32873)
Browse files Browse the repository at this point in the history 
The three buttons for add/delete/move that are displayed as a group for repeatable fields are too small. This is an accessibility and usability problem as it makes it difficult to select the correct button.

The apple ios guidelines for touch targets suggest 44px and the equivalent for android is 48.

By simply removing the btn-sm class from these buttons we satisfy those guidelines and its much much easieer to select the correct button
  • Loading branch information
@brianteeman
brianteeman authored Mar 26, 2021
1 parent 3125224 commit c97dddd
Show file tree
Hide file tree
Showing 6 changed files with 14 additions and 14 deletions.
2 changes: 1 addition & 1 deletion layouts/joomla/form/field/subform/repeatable-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
<td style="width:8%;">
<?php if (!empty($buttons['add'])) : ?>
<div class="btn-group">
<button type="button" class="group-add btn btn-sm btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
<button type="button" class="group-add btn btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
<span class="icon-plus" aria-hidden="true"></span>
</button>
</div>
Expand Down
6 changes: 3 additions & 3 deletions layouts/joomla/form/field/subform/repeatable-table/section-byfieldsets.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,17 @@
<td>
<div class="btn-group">
<?php if (!empty($buttons['add'])) : ?>
<button type="button" class="group-add btn btn-sm btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
<button type="button" class="group-add btn btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
<span class="icon-plus" aria-hidden="true"></span>
</button>
<?php endif; ?>
<?php if (!empty($buttons['remove'])) : ?>
<button type="button" class="group-remove btn btn-sm btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>">
<button type="button" class="group-remove btn btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>">
<span class="icon-minus" aria-hidden="true"></span>
</button>
<?php endif; ?>
<?php if (!empty($buttons['move'])) : ?>
<button type="button" class="group-move btn btn-sm btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>">
<button type="button" class="group-move btn btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>">
<span class="icon-arrows-alt" aria-hidden="true"></span>
</button>
<?php endif; ?>
Expand Down
6 changes: 3 additions & 3 deletions layouts/joomla/form/field/subform/repeatable-table/section.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,17 @@
<td>
<div class="btn-group">
<?php if (!empty($buttons['add'])) : ?>
<button type="button" class="group-add btn btn-sm btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
<button type="button" class="group-add btn btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
<span class="icon-plus" aria-hidden="true"></span>
</button>
<?php endif; ?>
<?php if (!empty($buttons['remove'])) : ?>
<button type="button" class="group-remove btn btn-sm btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>">
<button type="button" class="group-remove btn btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>">
<span class="icon-minus" aria-hidden="true"></span>
</button>
<?php endif; ?>
<?php if (!empty($buttons['move'])) : ?>
<button type="button" class="group-move btn btn-sm btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>">
<button type="button" class="group-move btn btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>">
<span class="icon-arrows-alt" aria-hidden="true"></span>
</button>
<?php endif; ?>
Expand Down
2 changes: 1 addition & 1 deletion layouts/joomla/form/field/subform/repeatable.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
<?php if (!empty($buttons['add'])) : ?>
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="group-add btn btn-sm button btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
<button type="button" class="group-add btn button btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
<span class="icon-plus icon-white" aria-hidden="true"></span>
</button>
</div>
Expand Down
6 changes: 3 additions & 3 deletions layouts/joomla/form/field/subform/repeatable/section-byfieldsets.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@
<?php if (!empty($buttons)) : ?>
<div class="btn-toolbar text-end">
<div class="btn-group">
<?php if (!empty($buttons['add'])) : ?><button type="button" class="group-add btn btn-sm button btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
<?php if (!empty($buttons['remove'])) : ?><button type="button" class="group-remove btn btn-sm button btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>"><span class="icon-minus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
<?php if (!empty($buttons['move'])) : ?><button type="button" class="group-move btn btn-sm button btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>"><span class="icon-arrows-alt icon-white" aria-hidden="true"></span> </button><?php endif; ?>
<?php if (!empty($buttons['add'])) : ?><button type="button" class="group-add btn button btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
<?php if (!empty($buttons['remove'])) : ?><button type="button" class="group-remove btn button btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>"><span class="icon-minus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
<?php if (!empty($buttons['move'])) : ?><button type="button" class="group-move btn button btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>"><span class="icon-arrows-alt icon-white" aria-hidden="true"></span> </button><?php endif; ?>
</div>
</div>
<?php endif; ?>
Expand Down
6 changes: 3 additions & 3 deletions layouts/joomla/form/field/subform/repeatable/section.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@
<?php if (!empty($buttons)) : ?>
<div class="btn-toolbar text-end">
<div class="btn-group">
<?php if (!empty($buttons['add'])) : ?><button type="button" class="group-add btn btn-sm button btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
<?php if (!empty($buttons['remove'])) : ?><button type="button" class="group-remove btn btn-sm button btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>"><span class="icon-minus icon-white" aria-hidden="true"></button> </a><?php endif; ?>
<?php if (!empty($buttons['move'])) : ?><button type="button" class="group-move btn btn-sm button btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>"><span class="icon-arrows-alt icon-white" aria-hidden="true"></span> </button><?php endif; ?>
<?php if (!empty($buttons['add'])) : ?><button type="button" class="group-add btn button btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
<?php if (!empty($buttons['remove'])) : ?><button type="button" class="group-remove btn button btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>"><span class="icon-minus icon-white" aria-hidden="true"></button> </a><?php endif; ?>
<?php if (!empty($buttons['move'])) : ?><button type="button" class="group-move btn button btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>"><span class="icon-arrows-alt icon-white" aria-hidden="true"></span> </button><?php endif; ?>
</div>
</div>
<?php endif; ?>
Expand Down

0 comments on commit c97dddd

Please sign in to comment.