Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: clarify that pointer events classes don't affect keyboard interaction #31134

Merged
merged 5 commits into from
Jul 3, 2020
Merged

Docs: clarify that pointer events classes don't affect keyboard interaction #31134

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bc3fa62
Docs: clarify that pointer events classes don't affect keyboard inter…
patrickhlauke Jun 21, 2020
248a558
Merge branch 'main' into v5-docs-interactions-pe
patrickhlauke Jun 21, 2020
9e4b20b
Merge branch 'main' into v5-docs-interactions-pe
patrickhlauke Jun 27, 2020
5bcdc10
Neutralise example links that are `pe-none`
patrickhlauke Jun 29, 2020
3df70fc
Merge branch 'main' into v5-docs-interactions-pe
patrickhlauke Jul 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 7 additions & 3 deletions site/content/docs/5.0/utilities/interactions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,14 @@ Change the way in which the content is selected when the user interacts with it.

## Pointer events

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

{{< example >}}
<p><a href="#" class="pe-none">This link</a> can not be clicked.</p>
<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 behaviour).</p>
<p class="pe-none"><a href="#">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>
<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>
{{< /example >}}

{{< callout warning >}}
The `.pe-none` class (and the `pointer-events` CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with `.pe-none` are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as `tabindex="-1"` (to prevent them from receiving keyboard focus) and `aria-disabled="true"` (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable. For form controls, consider using the `disabled` HTML attribute instead.
{{< /callout >}}