chore(target-size): report non-tabbable widgets for review#3699
chore(target-size): report non-tabbable widgets for review#3699WilcoFiers merged 8 commits intodevelopfrom
Conversation
lib/checks/mobile/target-offset.json
Outdated
| "fail": "Target has insufficient offset from its closest neighbor (${data.closestOffset}px should be at least ${data.minOffset}px)", | ||
| "incomplete": { | ||
| "default": "Potential target has insufficient offset from its closest neighbor (${data.closestOffset}px should be at least ${data.minOffset}px)", | ||
| "nonTabbableNeighbor": "Target has insufficient offset from a potential other target (${data.closestOffset}px should be at least ${data.minOffset}px)" |
There was a problem hiding this comment.
This is kind of vague and doesn't help the user understand that it's the tabindex that's causing the problem. We use closest neighbor in the other messages so wondering if we should use the same term here.
| "nonTabbableNeighbor": "Target has insufficient offset from a potential other target (${data.closestOffset}px should be at least ${data.minOffset}px)" | |
| "nonTabbableNeighbor": "Target potentially has insufficient offset from a neighbor with tabindex=-1 (${data.closestOffset}px should be at least ${data.minOffset}px)" |
There was a problem hiding this comment.
I'm sort of anticipating that inert will be a thing soon too.
There was a problem hiding this comment.
Looks like you don't have to wait long, it's now available in all browsers except Firefox, but is available in a nightly build. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert#browser_compatibility. In that case, we should say something about how the element is not focusable instead of tabindex=-1.
Target potentially has insufficient offset from a non-focusable neighbor
There was a problem hiding this comment.
On second thought, inert would make an element inapplicable in this rule because it's not focusable. I made some changes. See what you think.
lib/checks/mobile/target-size.json
Outdated
| "incomplete": { | ||
| "default": "Possible target has insufficient size (${data.width}px by ${data.height}px, should be at least ${data.minSize}px by ${data.minSize}px)", | ||
| "partiallyObscured": "Possible target has insufficient size because it is partially obscured (smallest space is ${data.width}px by ${data.height}px, should be at least ${data.minSize}px by ${data.minSize}px)", | ||
| "partiallyObscuredNonTabbable": "Target has insufficient size because it is partially obscured by a potential second target (smallest space is ${data.width}px by ${data.height}px, should be at least ${data.minSize}px by ${data.minSize}px)" |
There was a problem hiding this comment.
This should mention the tabindex=-1
There was a problem hiding this comment.
I'm sort of anticipating that inert will be a thing soon too.
lib/checks/mobile/target-size.json
Outdated
| "partiallyObscured": "Target has insufficient size because it is partially obscured (smallest space is ${data.width}px by ${data.height}px, should be at least ${data.minSize}px by ${data.minSize}px)" | ||
| }, | ||
| "incomplete": { | ||
| "default": "Possible target has insufficient size (${data.width}px by ${data.height}px, should be at least ${data.minSize}px by ${data.minSize}px)", |
There was a problem hiding this comment.
What does "possible target" mean? The target of the rule isn't a "possible target" as it matched the rule.
test/checks/mobile/target-size.js
Outdated
| ]); | ||
| }); | ||
|
|
||
| it('returns undefined if if the target is not tabbable', function () { |
There was a problem hiding this comment.
| it('returns undefined if if the target is not tabbable', function () { | |
| it('returns undefined if the target is not tabbable', function () { |
test/checks/mobile/target-size.js
Outdated
| ]); | ||
| }); | ||
|
|
||
| it('returns undefined if if the obscuring node is not tabbable', function () { |
There was a problem hiding this comment.
| it('returns undefined if if the obscuring node is not tabbable', function () { | |
| it('returns undefined if the obscuring node is not tabbable', function () { |
This PR makes it so that focusable elements that are not in the tab order (i.e. tabindex="-1") are reported for review when they are too small / too close to other widgets, and that widgets that are too close to such elements are flag for review.
Clsoes #3695