Make the buttons more accessible.

KoptevAnton · Aug 5, 2024 · 5499694 · 5499694
1 parent 7c2c209
commit 5499694
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -29,8 +29,8 @@
   line-height: 1.5;
   letter-spacing: -0.02em;
 
-  --main-color: #da333c;
-  --hover-color: #c02b33;
+  --main-color: #db2a33;
+  --hover-color: #b3222a;
   --middle-color: #69292d;
 
   color: #fafafa;

diff --git a/src/partials/faq.html b/src/partials/faq.html
@@ -5,7 +5,11 @@ <h2 class="title-faq">FAQ</h2>
       <li class="list-faq">
         <h3 class="title-list">
           What programming languages are most often used in your project?
-          <button class="toggle-btn" aria-expanded="Toggle FAQ section">
+          <button
+            class="toggle-btn"
+            aria-expanded="false"
+            aria-label="Розгорнути секцію FAQ"
+          >
             <svg class="icon icon-open" width="20" height="20">
               <use href="./img/icons.svg#expand"></use>
             </svg>
@@ -23,7 +27,11 @@ <h3 class="title-list">
       <li class="list-faq">
         <h3 class="title-list">
           What are the deadlines for the project?
-          <button class="toggle-btn" aria-expanded="Toggle FAQ section">
+          <button
+            class="toggle-btn"
+            aria-expanded="false"
+            aria-label="Розгорнути секцію FAQ"
+          >
             <svg class="icon icon-open" width="20" height="20">
               <use href="./img/icons.svg#expand"></use>
             </svg>
@@ -43,7 +51,11 @@ <h3 class="title-list">
       <li class="list-faq">
         <h3 class="title-list">
           What payment methods do you accept?
-          <button class="toggle-btn" aria-expanded="Toggle FAQ section">
+          <button
+            class="toggle-btn"
+            aria-expanded="false"
+            aria-label="Розгорнути секцію FAQ"
+          >
             <svg class="icon icon-open" width="20" height="20">
               <use href="./img/icons.svg#expand"></use>
             </svg>
@@ -61,7 +73,11 @@ <h3 class="title-list">
       <li class="list-faq">
         <h3 class="title-list">
           How can I contact you?
-          <button class="toggle-btn" aria-expanded="Toggle FAQ section">
+          <button
+            class="toggle-btn"
+            aria-expanded="false"
+            aria-label="Розгорнути секцію FAQ"
+          >
             <svg class="icon icon-open" width="20" height="20">
               <use href="./img/icons.svg#expand"></use>
             </svg>
@@ -79,7 +95,11 @@ <h3 class="title-list">
       <li class="list-faq">
         <h3 class="title-list">
           Do you provide advice or support?
-          <button class="toggle-btn" aria-expanded="Toggle FAQ section">
+          <button
+            class="toggle-btn"
+            aria-expanded="false"
+            aria-label="Розгорнути секцію FAQ"
+          >
             <svg class="icon icon-open" width="20" height="20">
               <use href="./img/icons.svg#expand"></use>
             </svg>
@@ -100,7 +120,11 @@ <h3 class="title-list">
         <h3 class="title-list">
           What does the process of developing a software product look like from
           idea to implementation?
-          <button class="toggle-btn last" aria-expanded="Toggle FAQ section">
+          <button
+            class="toggle-btn last"
+            aria-expanded="false"
+            aria-label="Розгорнути секцію FAQ"
+          >
             <svg class="icon icon-open" width="20" height="20">
               <use href="./img/icons.svg#expand"></use>
             </svg>