Release v0.2.0 (#26)

* Fix: Accordion focus on closed panel child element (#14) * Fix: Accordion focus on closed tab child element * Updated accordion documentation * Added generated file Co-authored-by: Omar Muscatello <7016897+OmarMuscatello@users.noreply.github.com> * Feature/#10 modal focus trap (#17) * Added role and aria-modal attributes, adde x icon to close #10 * Added aria-labelledby #10 * Added tabindex to close button #10 * Added more documentation about Focus Trap and Page Scroll #10 * Change modal template #10 * Changed blockquote style #10 * Better doc #10 * Fixed aria-labelledby attribute #10 * Changed styel * Feature/#7 components docs (#18) * Added more content to Tabs doc #7 * Changed lead color #7 * Added support for :focus event on tooltips #7 * Changed Tooltips docs #7 * Show ring on focused tab panel's label (#20) Co-authored-by: Omar Muscatello <7016897+OmarMuscatello@users.noreply.github.com> * Removed container parent maintaining accessibility (#24) Co-authored-by: Omar Muscatello <7016897+OmarMuscatello@users.noreply.github.com> * Added focus ring on focused accordion item's label (#25) Co-authored-by: Omar Muscatello <7016897+OmarMuscatello@users.noreply.github.com> * Improved tabs accessibility (#23) Co-authored-by: Omar Muscatello <7016897+OmarMuscatello@users.noreply.github.com> * Removed accordion container from HTML preview #24 * Added information to CHANGELOG * Added upcoming release info * Added accessibility info for tabs * Bumped lib version for npm package * Fixed tabs accessibility doc Co-authored-by: Omar Muscatello <7016897+omaxel@users.noreply.github.com> Co-authored-by: Omar Muscatello <7016897+OmarMuscatello@users.noreply.github.com>
zetareticoli · Nov 11, 2021 · 435d782 · 435d782
1 parent a4af39f
commit 435d782
Show file tree

Hide file tree

Showing 17 changed files with 423 additions and 283 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,4 +4,21 @@ 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/).
 
-## [Unreleased]
+# v0.2.0
+## Added
+- Keyboard support for tabs navigation (#11)
+- Accessibility improvements for modal, accordion and tabs components
+
+## Fixed
+- Accordion focus on closed panel child element (#13)
+
+# v0.1.0
+
+First release of CSSUI Library which includes:
+
+- Accordion
+- Tabs
+- Modal
+- Slideout
+- Tooltip
+- Dropdown
diff --git a/assets/scss/common/_global.scss b/assets/scss/common/_global.scss
@@ -231,3 +231,7 @@ body {
 .katex {
   font-size: $font-size-md;
 }
+
+.lead {
+  color: $gray-600;
+}
diff --git a/assets/scss/components/_comments.scss b/assets/scss/components/_comments.scss
@@ -24,7 +24,10 @@
 
 blockquote {
   margin-bottom: 1rem;
-  font-size: 1.25rem;
-  border-left: 3px solid $gray-300;
-  padding-left: 1rem;
+  border-left: 3px solid $primary;
+  border-top: 1px solid $gray-300;
+  border-bottom: 1px solid $gray-300;
+  border-right: 1px solid $gray-300;
+  border-radius: 4px;
+  padding: 1rem 1rem 0;
 }
diff --git a/content/docs/components/accordion.md b/content/docs/components/accordion.md
@@ -77,7 +77,6 @@ The Accordion component consists of a parent container with the `data-accordion`
 ```
 
 Each item is composed by a title and content part:
-:
 
 ```html
 <div data-accordion-item>
@@ -86,9 +85,7 @@ Each item is composed by a title and content part:
     Item Title
   </label>
   <div data-accordion-panel>
-
     <!-- Panel Content here -->
-
   </div>
 </div>
 ```

diff --git a/content/docs/components/modal.md b/content/docs/components/modal.md
@@ -23,10 +23,15 @@ Click on the button below to toggle the modal dialog.
 </div>
 
 <div id="modal" data-modal>
-  <div data-modal-dialog>
-    <h3>Modal title</h3>
+  <!-- Modal  -->
+  <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>
+      <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>
 </div>
 
@@ -36,26 +41,51 @@ The modal dialog is wrapped in a unique container with both `id` and `data-modal
 
 ```html
 <div id="modal" data-modal>
+
   <!-- Modal  -->
-  <div data-modal-dialog>
-    <h3>Modal title</h3>
+  <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>
+      <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>
 </div>
 ```
+### Unique ID
 
-### Set ID
-
-Set a unique `id` for each modal you want to use in a page.
-
-Example:
+Each modal should have a unique `id` as follows:
 
 ```html
-<div id="modal-1" data-modal></div>
+<div id="modal-one" data-modal>
+  ...
+</div>
 ```
 
+### Focus Trap
+
+<video width="700" autoplay loop>
+  <source src="/videos/modal-focus-demo.mp4" type="video/mp4">
+  Your browser don't support video tag
+</video>
+
+As you can see, once the modal is opened, when we keep pressing tab, **each element of the modal is focused** but as you keep pressing tab, the **focus goes out** of the modal and other website elements in the header are focused.
+
+This is the default behaviour for every modal.
+
+> If you need to fix this, you need to **add some javascript code** so the focus will remain in the modal
+>
+> <small> Try <a href="https://www.npmjs.com/package/focus-trap-js" target="_blank">focus-trap-js</a>. Vanilla JS with size < 0.5kb. No dependencies. </small>
+
+
+
+### Page Scroll
+As far CSSUI is a Pure CSS library, the modal component **doesn't provide any page scroll lock** feature. You need a dedicate Javascript script for it. 
+
+Try <a href="https://www.npmjs.com/package/body-scroll-lock" target="_blank">body-scroll-lock</a> to enable it.
 ## Variables
 
 List of variables used. Customize the component's design by changing or overriding these values:
@@ -69,5 +99,3 @@ List of variables used. Customize the component's design by changing or overridi
   --modal-size: 80%;
   --modal-spacing: 1rem;
 ```
-
-Some variables are commented. Remove the comment if you want to change the style of tabs.
diff --git a/content/docs/components/tabs.md b/content/docs/components/tabs.md
@@ -13,13 +13,41 @@ weight: 610
 toc: true
 ---
 
-Click tabs to swap between content that is broken into logical sections.
+Click tabs to swap between content that is broken into logical sections. Tabs come with a horizontal navigation and a simple, clean style.
 
 <div class="preview">
   <link rel="stylesheet" href="/cssui.css">
   <link rel="stylesheet" href="/tabs/tabs.css">
 
-  <div data-tabs>
+  <div data-tabs role="tablist" aria-label="Sample tabs">
+    <input id="tab1" type="radio" name="tab" data-tab="tab1" role="tab" aria-controls="tab-panel1" checked="checked" />
+    <input id="tab2" type="radio" name="tab" data-tab="tab2" role="tab" aria-controls="tab-panel2" />
+    <input id="tab3" type="radio" name="tab" data-tab="tab3" role="tab" aria-controls="tab-panel3" />
+    <nav>
+      <label for="tab1" data-tab-label="tab1">First Tab</label>
+      <label for="tab2" data-tab-label="tab2">Second Tab</label>
+      <label for="tab3" data-tab-label="tab3">Third Tab</label>
+    </nav>
+    <section id="tab-panel1" data-tab-panel="tab1" role="tabpanel" aria-labelledby="tab1">
+      First Tab Panel
+    </section>
+    <section id="tab-panel2" data-tab-panel="tab2" role="tabpanel" aria-labelledby="tab2">
+      Second Tab Panel
+    </section>
+    <section id="tab-panel3" data-tab-panel="tab3" role="tabpanel" aria-labelledby="tab3">
+      Third Tab Panel
+    </section>
+  </div>
+</div>
+
+## Usage
+
+Tabs only require the following structure:
+- a `data-tabs` container for both navigation and panels
+- use `<input type="radio"` for each navigation link
+
+```html
+<div data-tabs>
     <input checked="checked" id="tab1" type="radio" name="tab" data-tab="tab1" />
     <input id="tab2" type="radio" name="tab" data-tab="tab2" />
     <input id="tab3" type="radio" name="tab" data-tab="tab3" />
@@ -31,26 +59,32 @@ Click tabs to swap between content that is broken into logical sections.
     <section data-tab-panel="tab1" role="tabpanel" aria-labelledby="tab1">
       First Tab Panel
     </section>
-      <section data-tab-panel="tab2" role="tabpanel" aria-labelledby="tab1">
+      <section data-tab-panel="tab2" role="tabpanel" aria-labelledby="tab2">
       Second Tab Panel
     </section>
-    <section data-tab-panel="tab3" role="tabpanel" aria-labelledby="tab1">
+    <section data-tab-panel="tab3" role="tabpanel" aria-labelledby="tab3">
       Third Tab Panel
     </section>
   </div>
-</div>
+```
+## Accessibility
+You can navigate tabs using keyboard by default. Press TAB it will move the focus on the first tab item. By then, you can move between tabs using the keyboard arrows.
 
 ## Variables
 
 List of variables used. Customize the component's design by changing or overriding these values:
 
 ```css
-  --tab-border-color: #F3F4F6;
+  --tab-border-color: #f3f4f6;
   --tab-panel-background: #fff;
-  --tab-border-bottom-color: #9CA3AF;
+  --tab-border-bottom-color: #9ca3af;
   --tab-border-bottom-width: 2px;
   --tab-spacing: 1rem .5rem;
+  /* 
+  --tab-active-shadow: inset 1px 0 0 var(--tab-border-color), inset -1px 1px 0 var(--tab-border-color), 0 1px 0 white; 
+  --tab-panel-border-color: var(--tab-border-color);
+  --tab-radius: 2px; 
+  */
 ```
 
-Some variables are commented. Remove the comment if you want to change the style of tabs.
-
+Some variables are commented. Remove comments if you want **to customize the tab** style using them.
diff --git a/content/docs/components/tooltip.md b/content/docs/components/tooltip.md
@@ -1,7 +1,7 @@
 ---
 title: "Tooltip"
-description: "A single content area with multiple panels, each associated with a header in a list."
-lead: "A single content area with multiple panels, each associated with a header in a list."
+description: "Display informative text hovering and focusing on an element"
+lead: "Display informative text hovering and focusing on an element"
 date: 2021-07-14T13:26:54+01:00
 lastmod: 2021-07-14T13:26:54+01:00
 draft: false
@@ -13,18 +13,22 @@ weight: 610
 toc: true
 ---
 
-## Live Demo
+Hover or focus over the links below to see tooltips:
 
-
-<div class="preview">
+<div class="preview text-center">
 <link rel="stylesheet" href="/cssui.css">
 <link rel="stylesheet" href="/tooltip/tooltip.css">
 
 <a href="#" data-tooltip alt="Alt text" title="This is a link" role="tooltip" aria-label="Tooltip message">Hover me</a>
 </div>
-{{< highlight html >}}
+
+## Usage
+
+When activated, tooltips display a text label identifying an element, such as a description of its function.
+
+```html
 <a href="#" data-tooltip alt="Alt text" title="This is a link" role="tooltip" aria-label="Tooltip message">Hover me</a>
-{{< /highlight >}}
+```
 
 ## Variables
 

diff --git a/lib/accordion/accordion.css b/lib/accordion/accordion.css
@@ -43,6 +43,22 @@
   --accordion-title-background: var(--cssui-gray-lighter);
 }
 
+[data-accordion-item] > input:checked + label:hover  {
+  --accordion-title-background: var(--cssui-gray-light);
+}
+
+/* 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;
+}
+
+/* Hide focus ring if focus comes from a pointer device. */
+[data-accordion-item] > input:focus:not(:focus-visible) + label  {
+  outline: none;
+}
+
 [data-accordion-item] > label > svg {
   transition: all var(--cssui-animation-timing) ease-out;
 }
@@ -53,6 +69,7 @@
   background: var(--accordion-panel-background);
   color: var(--accordion-panel-text-color);
   transition: padding var(--cssui-animation-timing) ease;
+  visibility: hidden;
 }
 
 [data-accordion-item] > input:checked + label > svg {
@@ -62,5 +79,5 @@
 [data-accordion-item] > input:checked ~ [data-accordion-panel] {
   max-height: 100vh;
   padding: var(--accordion-panel-padding);
-}
-
+  visibility: visible;
+}
diff --git a/lib/accordion/accordion.html b/lib/accordion/accordion.html
@@ -9,7 +9,7 @@
       <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-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
     </label>
     <div data-accordion-panel>
-      Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+        Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
     </div>
   </div>
   <div data-accordion-item>
@@ -19,7 +19,7 @@
       <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-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
     </label>
     <div data-accordion-panel>
-      Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+        Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
     </div>
   </div>
   <div data-accordion-item>
@@ -29,7 +29,7 @@
       <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-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
     </label>
     <div data-accordion-panel>
-      Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+        Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
     </div>
   </div>
   <div data-accordion-item>
@@ -39,7 +39,7 @@
       <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-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
     </label>
     <div data-accordion-panel>
-      Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+        Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
     </div>
   </div>
 </section>
diff --git a/lib/modal/modal.css b/lib/modal/modal.css
@@ -54,3 +54,10 @@
   opacity: 1;
   transform: translateY(0);
 }
+
+[data-modal-close] {
+  position: absolute;
+  top: var(--modal-spacing);
+  right: var(--modal-spacing);
+  color: var(--cssui-gray-darkest);
+}
diff --git a/lib/modal/modal.html b/lib/modal/modal.html
@@ -6,12 +6,16 @@
 </a>
 
 <!-- Modal container -->
-<div id="modal">
+<div id="modal" data-modal>
 
   <!-- Modal  -->
-  <div data-modal>
-    <h3>Modal title</h3>
+  <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>
+      <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 -->

diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "css-ui-lib",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Pure CSS interactive components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"