[Authentication code] Small touch target size

[svinkle]

Issue summary

The modal controls feature a small touch target size. Mobile users or people with motor or dexterity issues may not easily be able to access the links. This may result in a frustrating user experience.

Current code

HTML

<button aria-label="More information" class="help__activator" type="button" …>
  <!-- … -->
</button>

<!-- … -->

CSS

.help__activator {
  height: 20px;
  width: 20px;
  padding: 0;
  /* … */
}

Steps to reproduce

1. Go to https://portal-rails.myshopify.io/ with with any supported browser
2. Login with admin/password
3. Use the web inspector to review the touch target size of the modal controls

Behavior

Expected

• Controls to have a usable touch target size.

Actual

• Controls feature too small touch target size to be comfortably usable.

Recommendation

1. Increase the touch target size for the modal controls by adding extra padding. Ensure width and height are 44px at a minimum.
2. Implement control size using em in order to increase in size when users zoom via text.

Recommended code

CSS

.help__activator {
  height: 1.25em;
  width: 1.25em;
  padding: 2em;
  /* … */
}

Specifications

• Component: Authentication code
• WCAG Principle: Operable
• WCAG SC: 2.5.5 Target Size
• Severity: Low
• Effort: Medium