专注于基于反应的应用程序中的第一个可聚焦元素

Question

>场景是 - 我在第 1 页上有一个超链接。单击链接，将打开第 2 页。我希望当屏幕阅读器为桌面打开时，焦点落在第一个可聚焦的元素上。当语音对移动设备开放时，功能相同。

Answer 1

这是实现这一点所需的 JavaScript 的基本骨架，您需要将其添加到函数中并在页面加载时调用它，对 react 进行调整(不是为你编写的，只是给你你需要的指导(。

var focusableItems = ['a[href]', 'area[href]', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', '[tabindex="0"]']; //a list of items that should be focusable.
var findString = focusableItems.join(", ");
var canFocus = Array.prototype.slice.call($('body').find(findString));
canFocus[0].focus(); 

解释

focusableItems是页面上可以接收焦点的每种选择器的列表。

findString是以逗号分隔的选择器字符串。

canFocus是页面上的一组项目，这些项目可以接收使用find方法找到的焦点。

请注意，我使用的自定义库不是jQuery我很确定find的工作方式相同，但您需要检查一下。

canFocus[0].focus();聚焦页面上的第一个可聚焦项目。

这种方法可以大大简化，但我认为向您展示这些步骤会提高您的理解。

缩短版本(未经测试(

Array.prototype.slice.call($('body').find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'))[0].focus();

对于那些没有jQuery的人

我使用ki的自定义实现.js如下所示，在上面的代码之前包含它

if (typeof $ == "undefined") {
!function (b, c, d, e, f) {
f = b['add' + e]
function i(a, d, i) {
for (d = (a && a.nodeType ? [a] : '' + a === a ? b.querySelectorAll(a) : c), i = d.length; i--; c.unshift.call(this, d[i]))
;
}
$ = function (a) {
return /^f/.test(typeof a) ? /in/.test(b.readyState) ? setTimeout(function () {
$(a);
}, 9) : a() : new i(a);
};
$[d] = i[d] = {
on: function (a, b) {
return this.each(function (c) {
f ? c['add' + e](a, b, false) : c.attachEvent('on' + a, b)
})
},
off: function (a, b) {
return this.each(function (c) {
f ? c['remove' + e](a, b) : c.detachEvent('on' + a, b)
})
},
each: function (a, b) {
for (var c = this, d = 0, e = c.length; d < e; ++d) {
a.call(b || c[d], c[d], d, c)
}
return c
},
splice: c.splice
}
}(document, [], 'prototype', 'EventListener');
var props = ['add', 'remove', 'toggle', 'has'],
maps = ['add', 'remove', 'toggle', 'contains'];
props.forEach(function (prop, index) {
$.prototype[prop + 'Class'] = function (a) {
return this.each(function (b) {
if (a) {
b.classList[maps[index]](a);
}
});
};
});
$.prototype.hasClass = function (a) {
return this[0].classList.contains(a);
};
}
$.prototype.find = function (selector) {
return $(selector, this);
};