Interactions

Utility classes that change how users interact with contents of a website.

Text selection #

Change the way in which the content is selected when the user interacts with it.

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

RESULT

Pointer events #

UX4G provides .pe-none and .pe-auto classes to prevent or add element interactions.

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

RESULT

Only interactions using a pointer (mouse, stylus, or touch) are barred by the .pe-none class and the pointer-events CSS property it sets. By default, keyboard users can still focus and use links and controls with .pe-none. Developers may need to add more attributes, such as tabindex="-1" (to prevent them from receiving keyboard focus) and aria-disabled="true" (to convey the fact that they are effectively disabled to assistive technologies), as well as use JavaScript to completely prevent them from being actionable, to ensure that they are completely neutralized even for keyboard users.

If possible, the simpler solution is:

• Add the HTML attribute disabled to form controls.
• Remove the href attribute from links to convert them to non-interactive anchors or placeholder links.

Sass #

Utilities API #

Interaction utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

"user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),