v5: Add role=button cursor in Reboot (#31040)

* v5: Add role=button cursor in Reboot

Ports the changes from #30562 made in v4.5 and adds them to v5. This replaces #30563 which sought to add this to the utility API, but the v4 PR shifted to implement an accessible solution vs a lone utility.

* Update reboot.md

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 85306b9429b90759aeee8be2ab89bb9a6fcd7fe6..b3763d05a741927efff6bb23508ecd0685037238 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -441,6 +441,13 @@ select {
   text-transform: none;
 }
 
+// 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.
 // See https://github.com/twbs/bootstrap/issues/24990
 

diff --git a/site/content/docs/5.0/content/reboot.md b/site/content/docs/5.0/content/reboot.md
index 2af004574097098157e574f6a49a7dd1a8df9970..9f459e7bb276bd2148ad4fe29b9846864be4e8dc 100644 (file)
--- a/site/content/docs/5.0/content/reboot.md
+++ b/site/content/docs/5.0/content/reboot.md
@@ -370,6 +370,15 @@ These changes, and more, are demonstrated below.
 {{< partial "callout-warning-input-support.md" >}}
 {{< /callout >}}
 
+### 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 its own `cursor` change.
+
+{% capture example %}
+<span role="button">Non-button element button</span>
+{% endcapture %}
+{% include example.html content=example %}
+
 ## Misc elements
 
 ### Address