diff options
| author | Mark Otto <[email protected]> | 2020-06-16 11:30:40 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-06-16 11:30:40 -0700 |
| commit | 970f3b3a8fb2ebdb559cd380cc2820d932ffb33d (patch) | |
| tree | b7260f9944bde2b521a3d477c121d36ad11e1189 | |
| parent | 11e63c1b36975b804db86be6ac0ffcf9727c4dde (diff) | |
| download | bootstrap-970f3b3a8fb2ebdb559cd380cc2820d932ffb33d.tar.xz bootstrap-970f3b3a8fb2ebdb559cd380cc2820d932ffb33d.zip | |
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 <[email protected]>
| -rw-r--r-- | scss/_reboot.scss | 7 | ||||
| -rw-r--r-- | site/content/docs/5.0/content/reboot.md | 9 |
2 files changed, 16 insertions, 0 deletions
diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 85306b942..b3763d05a 100644 --- 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 2af004574..9f459e7bb 100644 --- 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 |