¿Qué elementos HTML pueden recibir foco?

Estoy buscando una lista definitiva de elementos HTML que pueden enfocarse, es decir, ¿qué elementos se enfocarán cuando focus()se los llame?

Estoy escribiendo una extensión jQuery que funciona en elementos que pueden enfocarse. Espero que la respuesta a esta pregunta me permita ser específico sobre los elementos a los que me dirijo.

No hay una lista definitiva, depende del navegador. El único estándar que tenemos es DOM Nivel 2 HTML , según el cual los únicos elementos que tienen un focus()método son HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement y HTMLAnchorElement. Esto omite notablemente HTMLButtonElement y HTMLAreaElement.

Los navegadores de hoy definen focus()en HTMLElement, pero un elemento no se enfocará a menos que sea uno de:

• HTMLAnchorElement / HTMLAreaElement con un href
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement pero no con disabled(IE en realidad te da un error si lo intentas), y las cargas de archivos tienen un comportamiento inusual por razones de seguridad
• HTMLIFrameElement (aunque enfocarlo no hace nada útil). Otros elementos de incrustación también, tal vez, no los he probado todos.
• Cualquier elemento con un tabindex

Es probable que haya otras excepciones sutiles y adiciones a este comportamiento dependiendo del navegador.

Aquí tengo un selector CSS basado en la respuesta de bobince para seleccionar cualquier elemento HTML enfocable :

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

o un poco más bella en 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 */
    }
}

Lo agregué como respuesta, porque eso era lo que estaba buscando cuando Google me redirigió a esta pregunta de Stackoverflow.

EDITAR: hay un selector más, que es enfocable:

[contentEditable=true]

Sin embargo, esto se usa muy 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])';

Estoy creando una lista SCSS de todos los elementos enfocables y pensé que esto podría ayudar a alguien debido al rango de Google de esta pregunta.

Algunas cosas a tener en cuenta:

• Cambié :not([tabindex="-1"])a :not([tabindex^="-"])porque es perfectamente plausible generar de -2alguna manera. Más vale prevenir que curar, ¿verdad?
• Agregar :not([tabindex^="-"])a todos los otros selectores enfocables es completamente inútil. ¡Al usarlo [tabindex]:not([tabindex^="-"])ya incluye todos los elementos con los que estaría negando :not!
• Incluí :not([disabled])porque los elementos deshabilitados nunca pueden ser enfocables. De nuevo, es inútil agregarlo a cada elemento.

La biblioteca de accesibilidad ally.js proporciona una lista no oficial basada en pruebas aquí:

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

(Nota: su página no dice con qué frecuencia se realizaron las pruebas).

Quizás este pueda ayudar:

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

valor de retorno: verdadero = éxito, falso = fallido

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

El selector de foco está permitido en elementos que aceptan eventos de teclado u otras entradas del usuario.

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