Add new interaction utilities and role attr to Reboot (#30562)

- 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

site/_data/nav.yml

@@ -64,6 +64,7 @@
     - title: Flex
     - title: Float
     - title: Image replacement
+    - title: Interactions
     - title: Overflow
     - title: Position
     - title: Screen readers

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

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`.