Baseline: апрель 2026

• <search>
  
• Web authentication easy public key access
  
• String isWellFormed() and toWellFormed()
  
• ARIA attribute reflection

<form role="search">
  ...
</form>

<search>
  <form>
    ...
  </form>
</search>

<search>
  <!-- элементы поиска или фильтрации -->
</search>

<search>
  <form action="/search/">
    <label for="site-search">Поиск по сайту</label>
    <input type="search" id="site-search" name="q">
    <button type="submit">Найти</button>
  </form>
</search>

<header>
  <search aria-label="Поиск по сайту">
    ...
  </search>
</header>
<main>
  <search aria-label="Фильтр товаров">
    ...
  </search>
</main>

const publicKey = credential.response.getPublicKey();

const credential = await navigator.credentials.create({
  publicKey: publicKeyCredentialCreationOptions,
});
const response = credential.response;

response.getAuthenticatorData();
response.getPublicKey();
response.getPublicKeyAlgorithm();

const authenticatorData = response.getAuthenticatorData();

const publicKey = response.getPublicKey();
if (publicKey === null) {
  throw new Error('Публичный ключ недоступен');
}

const algorithm = response.getPublicKeyAlgorithm();

const credential = await navigator.credentials.create({
  publicKey: {
    challenge,
    rp: {
      name: 'Example App',
      id: 'example.com',
    },
    user: {
      id: userId,
      name: 'user@example.com',
      displayName: 'User Example',
    },
    pubKeyCredParams: [
      { type: 'public-key', alg: -7 },
      { type: 'public-key', alg: -257 },
    ],
    authenticatorSelection: {
      userVerification: 'preferred',
    },
    timeout: 60000,
    attestation: 'none',
  },
});
const response = credential.response;
const authenticatorData = response.getAuthenticatorData();
const publicKey = response.getPublicKey();
const publicKeyAlgorithm = response.getPublicKeyAlgorithm();

await fetch('/api/webauthn/register', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    id: credential.id,
    rawId: arrayBufferToBase64Url(credential.rawId),
    type: credential.type,
    clientDataJSON: arrayBufferToBase64Url(response.clientDataJSON),
    authenticatorData: arrayBufferToBase64Url(authenticatorData),
    publicKey: publicKey ? arrayBufferToBase64Url(publicKey) : null,
    publicKeyAlgorithm,
  }),
});

async function registerPasskey() {
  const options = await fetch('/api/webauthn/register/options')
    .then((response) => response.json());
  const credential = await navigator.credentials.create({
    publicKey: options,
  });
  const attestationResponse = credential.response;
  const publicKey = attestationResponse.getPublicKey();
  if (!publicKey) {
    throw new Error('Не удалось получить публичный ключ');
  }
  await fetch('/api/webauthn/register/verify', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      credentialId: credential.id,
      publicKey: arrayBufferToBase64Url(publicKey),
      algorithm: attestationResponse.getPublicKeyAlgorithm(),
      authenticatorData: arrayBufferToBase64Url(
        attestationResponse.getAuthenticatorData(),
      ),
      clientDataJSON: arrayBufferToBase64Url(
        attestationResponse.clientDataJSON,
      ),
    }),
  });
}

async function addSecurityKey() {
  const creationOptions = await fetch('/security-keys/options')
    .then((response) => response.json());
  const credential = await navigator.credentials.create({
    publicKey: creationOptions,
  });
  const { response } = credential;
  await fetch('/security-keys', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      credentialId: credential.id,
      publicKey: arrayBufferToBase64Url(response.getPublicKey()),
      algorithm: response.getPublicKeyAlgorithm(),
    }),
  });
}

const enablePasskeyButton = document.querySelector('.js-enable-passkey');
enablePasskeyButton.addEventListener('click', async () => {
  const options = await getPasskeyCreationOptions();
  const credential = await navigator.credentials.create({
    publicKey: options,
  });
  const response = credential.response;
  await savePasskey({
    credentialId: credential.id,
    publicKey: response.getPublicKey(),
    algorithm: response.getPublicKeyAlgorithm(),
    authenticatorData: response.getAuthenticatorData(),
    clientDataJSON: response.clientDataJSON,
  });
});

str.isWellFormed()

true

false

'Привет'.isWellFormed();
// true
'ab\uD800'.isWellFormed();
// false

str.toWellFormed()

'ab\uD800'.toWellFormed();
// 'ab�'
'Привет'.toWellFormed();
// 'Привет'

const value = 'ab\uD800';
value.isWellFormed();
// false
value.toWellFormed();
// 'ab�'

const input = document.querySelector('#search');
function buildSearchUrl() {
  const query = input.value.toWellFormed();
  return `/search?q=${encodeURIComponent(query)}`;
}

function validateComment(comment) {
  if (!comment.isWellFormed()) {
    return 'В тексте есть некорректные Unicode-символы. Попробуйте удалить последний введённый символ.';
  }
  return null;
}

async function sendMessage(text) {
  await fetch('/api/messages', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      text: text.toWellFormed(),
    }),
  });
}

button.setAttribute('aria-pressed', 'true');

button.ariaPressed = 'true';

input.ariaLabelledByElements = [label];

element.setAttribute('role', 'button');
element.setAttribute('aria-pressed', 'true');
element.setAttribute('aria-disabled', 'false');

element.role = 'button';
element.ariaPressed = 'true';
element.ariaDisabled = 'false';

button.ariaPressed = 'true';
button.ariaDisabled = 'false';

element.setAttribute('aria-atomic', 'true');
console.log(element.ariaAtomic);
// 'true'

button.ariaPressed = 'true';
console.log(button.getAttribute('aria-pressed'));
// 'true'

listbox.ariaActiveDescendantElement = option;
input.ariaDescribedByElements = [hint, error];

<div id="fruitbowl" role="listbox" aria-activedescendant="apple">
  <div id="apple">Apple</div>
</div>

console.log(fruitbowl.ariaActiveDescendantElement === apple);
// true

<span id="label">Email</span>
<span id="hint">We will not share it</span>
<input aria-labelledby="label" aria-describedby="hint">

console.log(input.ariaLabelledByElements);
// [label]
console.log(input.ariaDescribedByElements);
// [hint]

const elements = [hint, error];
input.ariaDescribedByElements = elements;
console.log(input.ariaDescribedByElements === elements);
// false
console.log(input.ariaDescribedByElements[0] === hint);
// true

const button = document.querySelector('.toggle');
button.role = 'button';
button.ariaPressed = 'false';
button.addEventListener('click', () => {
  const isPressed = button.ariaPressed === 'true';
  button.ariaPressed = isPressed ? 'false' : 'true';
});

<span id="street-label">Street name</span>
<input aria-labelledby="street-label">

const input = document.querySelector('input');
const label = document.querySelector('.street-label');
input.ariaLabelledByElements = [label];