From 86e65d4e3e81a7774c5dfa178be34635f3504d1e Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 11 May 2020 09:55:49 -0700
Subject: [PATCH] Add new interaction utilities and role attr to Reboot

- Adds .user-select-* utils from v5
- Adds button role attribute util, one of the top requested features in our issues for adding pointer cursors
- Adds new docs page to demonstrate both
- Includes Sass list for customizing user select
---
 scss/_reboot.scss                       |  7 +++++++
 scss/_variables.scss                    |  1 +
 scss/utilities/_interactions.scss       |  5 +++++
 site/_data/nav.yml                      |  1 +
 site/docs/4.4/content/reboot.md         |  9 +++++++++
 site/docs/4.4/utilities/interactions.md | 19 +++++++++++++++++++
 6 files changed, 42 insertions(+)
 create mode 100644 scss/utilities/_interactions.scss
 create mode 100644 site/docs/4.4/utilities/interactions.md

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 5a9cef886270..5a52b58fc892 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -333,6 +333,13 @@ select {
   text-transform: none; // Remove the inheritance of text transform in Firefox
 }
 
+// Set the cursor for non-`<button>` buttons
+//
+// Details at https://github.com/twbs/bootstrap/pull/30562
+[role="button"] {
+  cursor: pointer;
+}
+
 // Remove the inheritance of word-wrap in Safari.
 //
 // Details at https://github.com/twbs/bootstrap/issues/24990
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2fdf9eeb6454..22fafe10cc3a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1138,6 +1138,7 @@ $pre-scrollable-max-height:         340px !default;
 $displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
 $overflows: auto, hidden !default;
 $positions: static, relative, absolute, fixed, sticky !default;
+$user-selects: all, auto, none !default;
 
 
 // Printing
diff --git a/scss/utilities/_interactions.scss b/scss/utilities/_interactions.scss
new file mode 100644
index 000000000000..cc75fc21b7e2
--- /dev/null
+++ b/scss/utilities/_interactions.scss
@@ -0,0 +1,5 @@
+// stylelint-disable declaration-no-important
+
+@each $value in $user-selects {
+  .user-select-#{$value} { user-select: $value !important; }
+}
diff --git a/site/_data/nav.yml b/site/_data/nav.yml
index 664be04dad1e..fb53efacd63a 100644
--- a/site/_data/nav.yml
+++ b/site/_data/nav.yml
@@ -64,6 +64,7 @@
     - title: Flex
     - title: Float
     - title: Image replacement
+    - title: Interactions
     - title: Overflow
     - title: Position
     - title: Screen readers
diff --git a/site/docs/4.4/content/reboot.md b/site/docs/4.4/content/reboot.md
index 362c0a980d66..90f921b091df 100644
--- a/site/docs/4.4/content/reboot.md
+++ b/site/docs/4.4/content/reboot.md
@@ -298,6 +298,15 @@ These changes, and more, are demonstrated below.
   </fieldset>
 </form>
 
+### Pointers on buttons
+
+Reboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `<button>` elements, which gets it's own `cursor` change.
+
+{% capture example %}
+<span role="button">Non-button element button</span>
+{% endcapture %}
+{% include example.html content=example %}
+
 ## Misc elements
 
 ### Address
diff --git a/site/docs/4.4/utilities/interactions.md b/site/docs/4.4/utilities/interactions.md
new file mode 100644
index 000000000000..25b6baca2500
--- /dev/null
+++ b/site/docs/4.4/utilities/interactions.md
@@ -0,0 +1,19 @@
+---
+layout: docs
+title: Interactions
+description: Utility classes that change how users interact with contents of a website.
+group: utilities
+---
+
+## Text selection
+
+Change the way in which the content is selected when the user interacts with it.
+
+{% capture example %}
+<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 the default select behavior.</p>
+<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
+{% endcapture %}
+{% include example.html content=example %}
+
+Customize the available classes by changing the `$user-selects` Sass list in `_variables.scss`.