Quais elementos HTML podem receber foco?

Estou procurando uma lista definitiva de elementos HTML que podem ter foco, ou seja, quais elementos serão colocados em foco quando focus()forem chamados?

Estou escrevendo uma extensão jQuery que funciona em elementos que podem ser destacados. Espero que a resposta a esta pergunta me permita ser específico sobre os elementos que viso.

Não existe uma lista definitiva, depende do navegador. O único padrão que temos é o HTML de nível 2 do DOM , segundo o qual os únicos elementos que possuem um focus()método são HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement e HTMLAnchorElement. Isso omite notavelmente HTMLButtonElement e HTMLAreaElement.

Os navegadores de hoje definem focus()HTMLElement, mas um elemento não terá foco, a menos que seja um dos seguintes:

• HTMLAnchorElement / HTMLAreaElement com um href
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement, mas não com disabled(o IE realmente mostra um erro se você tentar), e os uploads de arquivos têm um comportamento incomum por motivos de segurança
• HTMLIFrameElement (embora o foco não faça nada de útil). Outros elementos de incorporação também, talvez, eu não os testei todos.
• Qualquer elemento com um tabindex

É provável que haja outras exceções e adições sutis nesse comportamento, dependendo do navegador.

Aqui eu tenho um CSS-selector baseado em bobince 's resposta para selecionar qualquer elemento HTML focalizável:

  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 */
  }

ou um pouco mais bonito no 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 */
    }
}

Eu o adicionei como resposta, porque era isso que eu estava procurando quando o Google me redirecionou para esta pergunta do Stackoverflow.

EDIT: Há mais um seletor, que é focável:

[contentEditable=true]

No entanto, isso é usado muito raramente.

$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])';

Estou criando uma lista SCSS de todos os elementos que podem ser focalizados e achei que isso poderia ajudar alguém devido ao ranking do Google nesta pergunta.

Algumas coisas a serem observadas:

• Eu mudei :not([tabindex="-1"])para :not([tabindex^="-"])porque é perfeitamente plausível gerar-2 alguma forma. Melhor prevenir do que remediar, certo?
• A adição :not([tabindex^="-"])a todos os outros seletores de foco é completamente inútil. Ao usá- [tabindex]:not([tabindex^="-"])lo, já inclui todos os elementos que você negaria :not!
• Incluí :not([disabled])porque os elementos desativados nunca podem ser focados. Então, novamente, é inútil adicioná-lo a todos os elementos.

O ally.js biblioteca de acessibilidade do fornece uma lista não oficial baseada em teste aqui:

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

(Nota: a página deles não diz com que frequência os testes foram realizados.)

Talvez este possa ajudar:

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

valor de retorno: verdadeiro = sucesso, falso = falhou

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

O seletor: focus é permitido em elementos que aceitam eventos do teclado ou outras entradas do usuário.

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