Какие элементы HTML могут получить фокус?

здесь у меня есть CSS-селектор на основе bobince ' s ответ выбрать любой фокусируемый элемент HTML:

  a[href]:not([tabindex='-1']),
  area[href]:not([tabindex='-1']),
  input:not([disabled]):not([tabindex='-1']),
  select:not([disabled]):not([tabindex='-1']),
  textarea:not([disabled]):not([tabindex='-1']),
  button:not([disabled]):not([tabindex='-1']),
  iframe:not([tabindex='-1']),
  [tabindex]:not([tabindex='-1']),
  [contentEditable=true]:not([tabindex='-1'])
  {
      /* your CSS for focusable elements goes here */
  }

или немного красивее в SASS:

a[href],
area[href],
input:not([disabled]),
select:not([disabled]),
textarea:not([disabled]),
button:not([disabled]),
iframe,
[tabindex],
[contentEditable=true]
{
    &:not([tabindex='-1'])
    {
        /* your SCSS for focusable elements goes here */
    }
}

я добавил его в качестве ответа, потому что это было то, что я искал, когда Google перенаправил меня на этот вопрос Stackoverflow.

EDIT: есть еще один селектор, который фокусируемый:

[contentEditable=true]

однако, это используется очень редко.

The союзник.js библиотека специальных возможностей предоставляет неофициальный, тестовый список здесь:

https://allyjs.io/data-tables/focusable.html

(NB: на их странице не указано, как часто выполнялись тесты.)

$focusable:
  'a[href]',
  'area[href]',
  'button',
  'details',
  'input',
  'iframe',
  'select',
  'textarea',

  // these are actually case sensitive but i'm not listing out all the possible variants
  '[contentEditable=""]',
  '[contentEditable="true"]',
  '[contentEditable="TRUE"]',

  '[tabindex]:not([tabindex^="-"])',
  ':not([disabled])';

Я создаю список SCSS всех фокусируемых элементов, и я подумал, что это может помочь кому-то из-за ранга Google этого вопроса.

дополнительная информация:

• сменил :not([tabindex="-1"]) to :not([tabindex^="-"]) потому что это совершенно правдоподобно, чтобы генерировать -2 как-то. Лучше перестраховаться, чем потом жалеть, верно?
• добавлять :not([tabindex^="-"]) для всех остальных фокусируемых селекторов это совершенно бессмысленно. При использовании [tabindex]:not([tabindex^="-"]) он уже включает в себя все элементы, которые вы бы отрицание с :not!
• Я :not([disabled]) потому что отключенные элементы могут никогда быть focusable. Так что опять это бесполезно, чтобы добавить его в каждый отдельный элемент.

может быть, это может помочь:

function focus(el){
	el.focus();
	return el==document.activeElement;
}

возвращаемое значение: true = success, false = failed

Reff: https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

селектор :focus разрешен для элементов, которые принимают события клавиатуры или другие пользовательские входы.

http://www.w3schools.com/cssref/sel_focus.asp