Добавляет демку для aria-keyshortcuts (#4758)

doka-guide · Oct 6, 2023 · 7cbe926 · 7cbe926
1 parent d5f5314
commit 7cbe926
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 6 deletions.
diff --git a/a11y/aria-keyshortcuts/demos/button-with-shortcut/index.html b/a11y/aria-keyshortcuts/demos/button-with-shortcut/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Клавиатурное сокращение для кнопки — aria-keyshortcuts — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    .button {
+      display: block;
+      min-width: 210px;
+      border: 2px solid transparent;
+      border-radius: 6px;
+      padding: 9px 15px;
+      color: #000000;
+      font-size: 1rem;
+      font-weight: 300;
+      font-family: inherit;
+      transition: background-color 0.2s linear;
+    }
+
+    .button:hover {
+      background-color: #FFFFFF;
+      cursor: pointer;
+      transition: background-color 0.2s linear;
+    }
+
+    .button:focus-visible {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .button:focus {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .button-aqua {
+      background-color: #10F3AF;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <button class="button button-aqua" aria-keyshortcuts="Shift+F">
+    Развернуть
+  </button>
+</body>
+</html>
diff --git a/a11y/aria-keyshortcuts/index.md b/a11y/aria-keyshortcuts/index.md
@@ -24,15 +24,14 @@ tags:
 ## Пример
 
 ```html
-<button
-  aria-keyshortcuts="Shift+F"
-  aria-label="Развернуть на весь экран"
->
-  <img src="expand-icon.svg" alt="">
+<button aria-keyshortcuts="Shift+F">
+  Развернуть
 </button>
 ```
 
-Скринридер прочтёт код примерно так: «Развернуть на весь экран, кнопка. Shift плюс F».
+<iframe title="Клавиатурное сокращение для кнопки" src="demos/button-with-shortcut/" height="210"></iframe>
+
+Скринридер прочтёт код примерно так: «Развернуть, кнопка. Shift плюс F».
 
 ## Как пишется