Release/v0.2.1 (#39)

* Fix accessibility on modal (#38) * Add changes to doc * Removed overflow hidden. Fixes #37 * Updated CHANGELOG * Generated new lib .zip Co-authored-by: Quentin Albert <[email protected]>
zetareticoli · Feb 22, 2022 · 7b15f81 · 7b15f81
1 parent d22fc94
commit 7b15f81
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+# v0.2.1
+## Fixed
+- Accordion item label keyboard focus not visualized on FF and Safari (#37)
+- Fix accessibility on modal (#38)
 # v0.2.0
 ## Added
 - Keyboard support for tabs navigation (#11)

diff --git a/content/docs/components/modal.md b/content/docs/components/modal.md
@@ -27,12 +27,12 @@ Click on the button below to toggle the modal dialog.
   <div id="dialog" data-modal-dialog role="dialog" aria-modal="true" aria-labelledby="dialog-title" tabindex="-1">
     <h3 id="dialog-title">Modal title</h3>
     <p>This is the modal content.</p>
-    <a href="#" data-modal-close>
+    <a href="#" aria-label="Close modal" data-modal-close>
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
     </a>
   </div>
   <!-- Background, click to close -->
-  <a href="#" data-modal-overlay></a>
+  <a href="#" tabindex="-1" data-modal-overlay></a>
 </div>
 
 ## Usage

diff --git a/lib/accordion/accordion.css b/lib/accordion/accordion.css
@@ -13,7 +13,6 @@
 
 [data-accordion-item] {
   width: 100%;
-  overflow: hidden;
 }
 
 [data-accordion-item]:not(:last-child) {
@@ -49,9 +48,9 @@
 
 /* Accordion Item's Label Focus State */
 [data-accordion-item] > input:focus + label  {
-  outline: 2px auto #101010;
-  outline: 2px auto Highlight;
-  outline: 2px auto -webkit-focus-ring-color;
+  outline: 2px solid #101010;
+  outline: 2px solid highlight;
+  outline: 2px solid -webkit-focus-ring-color;
 }
 
 /* Hide focus ring if focus comes from a pointer device. */

diff --git a/lib/modal/modal.html b/lib/modal/modal.html
@@ -13,11 +13,11 @@
     <h3 id="dialog-title">Modal title</h3>
     <p>This is the modal content.</p>
 
-    <a href="#" data-modal-close>
+    <a href="#" aria-label="Close modal" data-modal-close>
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
     </a>
   </div>
 
   <!-- Background, click to close -->
-  <a href="#" data-modal-overlay></a>
+  <a href="#" tabindex="-1" data-modal-overlay></a>
 </div>
diff --git a/static/cssui.zip b/static/cssui.zip