Улучшает кнопки для оценки материала (#1186)

* Улучшает разметку * Слегка меняет стили * Немного изменяет скрипт * Исправляет ошибку * Делает мордочку чёрной * Задаёт цвет ещё лучше * Заменяет теги * Добавляет отступы, outline-offset * Находит потерявшийся :focus-visible * Передумывает насчёт `role` * Добавляет нужные ARIA-атрибуты * Добавляет лейбл к полю * Делает поле обязательным * Слегка увеличивает высоту кнопок
doka-guide · Sep 5, 2023 · e2a8fd3 · e2a8fd3
1 parent 97cc24b
commit e2a8fd3
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 33 deletions.
diff --git a/src/includes/feedback-form.njk b/src/includes/feedback-form.njk
@@ -1,22 +1,17 @@
-<form class="feedback-form" method="post" autocomplete="off" data-state="idle">
-  <div class="feedback-form__header font-theme font-theme--code">
-    <div class="feedback-form__title" data-state="idle">Статья была полезной?</div>
-    <div class="feedback-form__title feedback-form__title--success" data-state="success">Спасибо</div>
-    <div class="feedback-form__title feedback-form__title--error" data-state="error">Спасибо</div>
-  </div>
-
+<form class="feedback-form" method="post" autocomplete="off">
   <fieldset class="feedback-form__fieldset feedback-form__fieldset--vote font-theme font-theme--code">
+    <legend class="feedback-form__title font-theme font-theme--code">Статья была полезной?</legend>
     <button class="vote vote--up" name="answer" value="Понравилось" type="submit">
       <span class="visually-hidden">Понравилось</span>
       <span aria-hidden="true">^‿^</span>
     </button>
-    <button class="vote vote--down" type="button">
+    <button class="vote vote--down" type="button" aria-expanded="false" aria-controls="reason">
       <span class="visually-hidden">Не понравилось</span>
       <span aria-hidden="true">ˇ⌒ˇ</span>
     </button>
   </fieldset>
 
-  <fieldset class="feedback-form__fieldset feedback-form__fieldset--reason" hidden>
+  <fieldset class="feedback-form__fieldset feedback-form__fieldset--reason" id="reason" hidden>
     <legend class="feedback-form__legend">Расскажите, что не понравилось?</legend>
     <ul class="feedback-control-list base-list">
       <li class="feedback-control-list__item">
@@ -40,14 +35,17 @@
         </button>
       </li>
       <li class="feedback-control-list__item">
-        <button class="feedback-form__reason-button button button--round" name="answer" value="Что-то другое" type="button">
+        <button class="feedback-form__reason-button button button--round button--another-reason" name="answer" value="Что-то другое" type="button" aria-expanded="false" aria-controls="another-reason">
           Что-то другое
         </button>
       </li>
     </ul>
-    <div class="feedback-form__text" hidden>
+    <div class="feedback-form__text" id="another-reason" hidden>
       <div class="text-control">
-        <textarea class="text-control__item text-control__input" name="answer" placeholder="Расскажите, пожалуйста, подробнее"></textarea>
+        <div class="text-control__row">
+          <textarea class="text-control__item text-control__input" name="answer" id="textarea" placeholder="Например, много ошибок"></textarea>
+          <label for="textarea">Другая причина</label>
+        </div> 
         <button class="text-control__item text-control__button button button--invert" type="submit">Отправить</button>
       </div>
     </div>
@@ -57,7 +55,9 @@
     Если вы нашли ошибку, отправьте нам <a class="link" href="{{ constants.contentRepLink }}">пулреквест</a>!
   </p>
 
-  <p class="feedback-form__error" data-state="error">
-    Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
+  <p aria-live="polite" class="feedback-form__success" id="success" data-state="success">Спасибо за оценку ❤️</p>
+
+  <p aria-live="assertive" class="feedback-form__error" id="error" data-state="error">
+    Во время отправки формы что-то пошло не так. Перезагрузите страницу и попробуйте оценить материал ещё раз.
   </p>
 </form>
diff --git a/src/scripts/modules/feedback-form.js b/src/scripts/modules/feedback-form.js
@@ -63,10 +63,6 @@ class DetailedAnswer extends BaseComponent {
       })
     })
   }
-
-  focus() {
-    this.textarea.focus()
-  }
 }
 
 function init() {
@@ -78,8 +74,10 @@ function init() {
 
   const voteDownButton = form.querySelector('.vote--down')
   const voteUpButton = form.querySelector('.vote--up')
+  const reasonButton = form.querySelector('.button--another-reason')
   const reasonFieldset = form.querySelector('.feedback-form__fieldset--reason')
   const textControl = form.querySelector('.feedback-form__text')
+  const textControlInput = form.querySelector('.text-control__input')
 
   let isSending = false
 
@@ -126,7 +124,7 @@ function init() {
 
   detailedAnswer.on(DetailedAnswer.EVENTS.ANSWER, () => {
     setTimeout(() => {
-      reasonFieldset.disabled = true
+      reasonFieldset.inert = true
       voteUpButton.disabled = true
     })
   })
@@ -142,13 +140,14 @@ function init() {
     () => {
       setTimeout(() => {
         voteDownButton.disabled = true
-        reasonFieldset.disabled = true
+        reasonFieldset.inert = true
       })
     },
     { once: true }
   )
 
   voteButtonGroup.on(ButtonGroup.EVENTS.CORRECTION, () => {
+    voteDownButton.setAttribute('aria-expanded', 'true')
     reasonFieldset.hidden = false
   })
 
@@ -162,7 +161,7 @@ function init() {
     ButtonGroup.EVENTS.ANSWER,
     () => {
       setTimeout(() => {
-        reasonFieldset.disabled = true
+        reasonFieldset.inert = true
         voteUpButton.disabled = true
         textControl.hidden = true
       })
@@ -172,7 +171,8 @@ function init() {
 
   reasonsButtonGroup.on(ButtonGroup.EVENTS.CORRECTION, () => {
     textControl.hidden = false
-    detailedAnswer.focus()
+    reasonButton.setAttribute('aria-expanded', 'true')
+    textControlInput.required = true
   })
 
   form.addEventListener('submit', (event) => {
@@ -197,9 +197,11 @@ function init() {
     })
       .then(() => {
         form.dataset.state = 'success'
+        form.setAttribute('aria-describedby', 'success')
       })
       .catch((error) => {
         form.dataset.state = 'error'
+        form.setAttribute('aria-describedby', 'error')
         console.error(error)
       })
       .finally(() => {

diff --git a/src/styles/blocks/feedback-form.css b/src/styles/blocks/feedback-form.css
@@ -4,16 +4,14 @@
   line-height: var(--font-line-height-s);
 }
 
-.feedback-form__header {
+.feedback-form__title {
   margin-bottom: 0.4em;
   font-family: var(--font-family);
-  font-size: var(--font-size-l);
-  line-height: var(--font-line-height-l);
   letter-spacing: var(--letter-spacing);
+  font-size: var(--font-size-m);
+  line-height: var(--font-line-height-m);
 }
 
-.feedback-form__title {}
-
 .feedback-form__fieldset {
   margin: 0;
   border: 0;
@@ -45,7 +43,7 @@
   border-radius: 6px;
 }
 
-.feedback-form__fieldset:disabled {
+.feedback-form__fieldset[inert] {
   opacity: 0.5;
 }
 
@@ -78,7 +76,6 @@
   color: hsl(0, 81%, 64%);
 }
 
-.feedback-form:not([data-state="idle"]) [data-state="idle"],
 .feedback-form:not([data-state="success"]) [data-state="success"],
 .feedback-form:not([data-state="error"]) [data-state="error"] {
   display: none;
@@ -99,7 +96,7 @@
 @media (min-width: 1024px) {
   .feedback-form__reason-button {
     padding: 3px 19px;
-    line-height: calc(16 / 12);
+    line-height: calc(17 / 12);
   }
 }
 

diff --git a/src/styles/blocks/text-control.css b/src/styles/blocks/text-control.css
@@ -5,6 +5,12 @@
   gap: 20px;
 }
 
+.text-control__row {
+  width: 100%;
+  flex-grow: 1;
+  text-align: left;
+}
+
 .text-control__item {
   box-sizing: border-box;
   padding-block: var(--padding-block);
@@ -17,8 +23,6 @@
   --border-color-opacity: calc(1 - var(--is-dark-theme-on) * 0.6);
   flex: 1 1 auto;
   box-sizing: border-box;
-  padding-left: 0;
-  padding-right: 0;
   width: 100%;
   min-height: var(--input-height);
   height: var(--input-height);
@@ -42,6 +46,11 @@
   flex: 0 0 auto;
 }
 
+.button--active:focus-visible,
+.text-control__button:focus-visible {
+  outline-offset: 3px;
+}
+
 @media not all and (min-width: 768px) {
   .text-control {
     --padding-block: 5px;

diff --git a/src/styles/blocks/vote.css b/src/styles/blocks/vote.css
@@ -43,5 +43,5 @@
 
 .vote--active {
   background-color: var(--vote-color);
-  color: inherit;
+  color: hsl(var(--color-black));
 }