├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── demo
└── index.html
├── spec
├── focusring.bs
└── focusring.html
├── src
└── keyboard-modality.js
└── w3c.json
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Web Platform Incubator Community Group
2 |
3 | This repository is being used for work in the Web Platform Incubator Community Group, governed by the [W3C Community License
4 | Agreement (CLA)](http://www.w3.org/community/about/agreements/cla/). To contribute, you must join
5 | the CG.
6 |
7 | If you are not the sole contributor to a contribution (pull request), please identify all
8 | contributors in the pull request's body or in subsequent comments.
9 |
10 | To add a contributor (other than yourself, that's automatic), mark them one per line as follows:
11 |
12 | ```
13 | +@github_username
14 | ```
15 |
16 | If you added a contributor by mistake, you can remove them in a comment with:
17 |
18 | ```
19 | -@github_username
20 | ```
21 |
22 | If you are making a pull request on behalf of someone else but you had no part in designing the
23 | feature, you can remove yourself with the above syntax.
24 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | All Reports in this Repository are licensed by Contributors under the
2 | [W3C Software and Document
3 | License](http://www.w3.org/Consortium/Legal/2015/copyright-software-and-document). Contributions to
4 | Specifications are made under the [W3C CLA](https://www.w3.org/community/about/agreements/cla/).
5 |
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | **Deprecated:** Please look at https://github.com/wicg/focus-ring/ instead.
2 |
3 | Archived content below.
4 |
5 | ---
6 |
7 | Based on a conversation between Alice Boxhall, Brian Kardell and Marcy Sutton, this prototype attaches/manages metadata in the form of a `modality` attribute to the body, as a way to allow authors to experiment with adapting style based on the user's _active_ input modality (i.e., how they are interacting with the UI _right now_).
8 |
9 | [Demo](https://alice.github.io/modality/demo)
10 |
11 | ## Rationale
12 |
13 | There are many instances in which it would be useful for authors to understand the user's current interaction modality and be able to adapt the UI with better accomodations. The motivating example is `:focus` where the status quo is quite problematic:
14 |
15 | - The default focus ring is not based on a single :focus rule as some might expect, not all things which can receive focus receive a ring in all cases. Adding such a rule is always currently problematic, but it's also exceptionally common.
16 | - Many developers disable the default focus ring in their CSS styles, others attempt to style it in concert with their design. The former often seems to be a result of finding the default focus ring both aesthetically unpleasant and confusing to users when applied after a mouse or touch event and introduces accessibility problems. The latter inevitably creates considerably more of the kind of problem that the former was trying to solve.
17 |
18 | To deal with this:
19 | - It seems evident that a visual indication of what has focus is only interesting to a user who is using the keyboard to interact with the page. A user using any kind of pointing device would only be interested in what is in focus if they were _just about_ to use the keyboard - otherwise, it is irrelevant and potentially confusing.
20 | - Thus, if we only show the focus ring when relevant, we can avoid user confusion and avoid creating incentives for developers to disable it.
21 | - A mechanism for exposing focus ring styles only when the keyboard is the user's current input modality gives us this opportunity.
22 |
23 | ## API Proposal
24 |
25 | ```css
26 | /* override UA stylesheet if necessary */
27 | :focus {
28 | outline: none;
29 | }
30 |
31 | /* establish desired focus ring appearance for appropriate input modalities */
32 | :focusring {
33 | outline: 2px solid blue;
34 | }
35 | ```
36 |
37 | :focusring matches native elements that are
38 | 1. focussed; and
39 | 2. would display a focus ring if only UA styles applied
40 |
41 | Additionally, :focusring matches non-native elements as if they were
42 | native button elements.
43 |
44 | ## Example heuristic
45 |
46 | The heuristic used to decide the current modality should not be defined
47 | normatively. An example heuristic is to update modality on each style recalc:
48 | if the most recent user interaction was via the keyboard; and less than 100ms
49 | has elapsed since the last input event; then the modality is keyboard. Otherwise,
50 | the modality is not keyboard.
51 |
52 | ## Implementation Prototype
53 |
54 | The tiny [keyboard-modality.js](http://alice.github.io/modality/src/keyboard-modality.js) provides a prototype intended to achieve the goals we are proposing with technology that exists today in order for developers to be able to try it out, understand it and provide feedback. Simply speaking, it sets a `modality=keyboard` attribute on `body` if the script determines that the keyboard is being used. Similarly, the attribute is removed if the script determines that the user is no longer using the keyboard. This allows authors to write rules which consider the input modality and style appropriately. Note that the prototype does not match the proposed API - it is intended to give developers a feel for the model rather than to provide a high-fidelity polyfill.
55 |
56 | It also simulates how the default UA styles would be adjusted by appending the following style as the first rule in the page, which disables the focus ring _unless_ `modality` is set to `keyboard`:
57 |
58 | ```html
59 | body:not([modality=keyboard]) :focus {
60 | outline: none;
61 | }
62 | ```
63 |
64 | (This is added in a `
24 |
25 |
30 |
31 |
32 |
Keyboard-only focus test
33 |
34 | This page contains various html controls and demonstrates a proposal for only drawing a focus ring when the keyboard is being used.
35 | Navigate through the interactive elements various ways (using mouse, switch to keyboard, try it on a touch device). You should see a green focus indicator (or comment out green focus ring style to see default focus ring) on elements below differently based on whether you interact with them via keyboard or mouse. If you are using the mouse and get lost, at any time you can tab/shift-tab to find your focus indicator.
36 |