fix: dropdown item count by screen reader + docs update

Signed-off-by: Jeeyun Lim <jeeyun.lim@gmail.com>
KingMario · Jul 17, 2019 · 5fd4fd0 · 5fd4fd0
1 parent 6604ba6
commit 5fd4fd0
Show file tree

Hide file tree

Showing 18 changed files with 109 additions and 107 deletions.
diff --git a/src/dev/src/app/dropdown/dropdown-angular-close-item-false.demo.html b/src/dev/src/app/dropdown/dropdown-angular-close-item-false.demo.html
@@ -1,21 +1,21 @@
 <!--
-  ~ Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
 
 <div class="clr-example squeeze dropdown-demo">
     <clr-dropdown [clrCloseMenuOnItemClick]="false">
-        <button clrDropdownTrigger>
+        <button clrDropdownTrigger aria-label="dropdown demo button">
             <clr-icon shape="error" class="is-error" size="24"></clr-icon>
             <clr-icon shape="caret down"></clr-icon>
         </button>
         <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
-            <label class="dropdown-header">Dropdown header</label>
-            <button clrDropdownItem>Action 1</button>
-            <button clrDropdownItem>Action 2</button>
-            <button clrDropdownItem disabled>Disabled Action 1</button>
-            <div class="dropdown-divider"></div>
+            <label class="dropdown-header" aria-hidden="true">Dropdown header</label>
+            <button aria-label="Dropdown header Action 1" clrDropdownItem>Action 1</button>
+            <button aria-label="Dropdown header Action 2" clrDropdownItem>Action 2</button>
+            <button aria-label="Dropdown header Disabled Action 1" clrDropdownItem disabled>Disabled Action 1</button>
+            <div class="dropdown-divider" role="separator" aria-hidden="true"></div>
             <button clrDropdownItem>Link 1</button>
             <button clrDropdownItem>Link 2</button>
         </clr-dropdown-menu>

diff --git a/src/dev/src/app/dropdown/dropdown-angular-nested.demo.html b/src/dev/src/app/dropdown/dropdown-angular-nested.demo.html
@@ -12,9 +12,9 @@
             <clr-icon shape="caret down"></clr-icon>
         </button>
         <clr-dropdown-menu>
-            <label class="dropdown-header">Dropdown header</label>
-            <a href="javascript://" clrDropdownItem>Action 1</a>
-            <a href="javascript://" class="disabled" clrDropdownItem disabled>Disabled Action</a>
+            <label class="dropdown-header" aria-hidden="true">Dropdown header</label>
+            <a aria-label="Drowpdown header Action 1" href="javascript://" clrDropdownItem>Action 1</a>
+            <a aria-label="Drowpdown header Disabled Action" href="javascript://" class="disabled" clrDropdownItem disabled>Disabled Action</a>
             <div class="dropdown-divider"></div>
             <clr-dropdown>
                 <button clrDropdownTrigger [id]="'sub-menu-1'">Link 1</button>
@@ -40,9 +40,9 @@
             <clr-icon shape="caret down"></clr-icon>
         </button>
         <clr-dropdown-menu *clrIfOpen>
-            <label class="dropdown-header">Dropdown header</label>
-            <a href="javascript://" clrDropdownItem>Action 1</a>
-            <a href="javascript://" class="disabled" clrDropdownItem disabled>Disabled Action</a>
+            <label class="dropdown-header" aria-hidden="true">Dropdown header</label>
+            <a aria-label="Drowpdown header Action 1" href="javascript://" clrDropdownItem>Action 1</a>
+            <a aria-label="Drowpdown header Disabled Action" href="javascript://" class="disabled" clrDropdownItem disabled>Disabled Action</a>
             <div class="dropdown-divider"></div>
             <clr-dropdown>
                 <button clrDropdownTrigger [id]="'sub-menu-3'">Link 1</button>

diff --git a/src/dev/src/app/dropdown/dropdown-angular-positioning.demo.html b/src/dev/src/app/dropdown/dropdown-angular-positioning.demo.html
@@ -14,11 +14,11 @@
                 <clr-icon shape="caret down"></clr-icon>
             </button>
             <clr-dropdown-menu>
-                <label class="dropdown-header">Dropdown header</label>
-                <a href="javascript://" clrDropdownItem>Action 1</a>
-                <a href="javascript://" clrDropdownItem>Action 2</a>
-                <a href="javascript://" class="disabled" clrDropdownItem disabled>Disabled Action</a>
-                <div class="dropdown-divider" role="separator"></div>
+                <label class="dropdown-header" aria-hidden="true">Dropdown header</label>
+                <a aria-label="Dropdown header Action 1" href="javascript://" clrDropdownItem>Action 1</a>
+                <a aria-label="Dropdown header Action 2" href="javascript://" clrDropdownItem>Action 2</a>
+                <a aria-label="Dropdown header Disabled Action" href="javascript://" class="disabled" clrDropdownItem disabled>Disabled Action</a>
+                <div class="dropdown-divider" role="separator" aria-hidden="true"></div>
                 <a href="javascript://" clrDropdownItem>Link 1</a>
                 <a href="javascript://" clrDropdownItem>Link 2</a>
             </clr-dropdown-menu>
@@ -29,11 +29,11 @@
                 <clr-icon shape="caret down"></clr-icon>
             </button>
             <clr-dropdown-menu clrPosition="top-right">
-                <label class="dropdown-header">Dropdown header</label>
-                <a href="javascript://" clrDropdownItem>Action 1</a>
-                <a href="javascript://" clrDropdownItem>Action 2</a>
-                <a href="javascript://" class="disabled" clrDropdownItem disabled>Disabled Action</a>
-                <div class="dropdown-divider" role="separator"></div>
+                <label class="dropdown-header" aria-hidden="true">Dropdown header</label>
+                <a aria-label="Dropdown header Action 1" href="javascript://" clrDropdownItem>Action 1</a>
+                <a aria-label="Dropdown header Action 2" href="javascript://" clrDropdownItem>Action 2</a>
+                <a aria-label="Dropdown header Disabled Action" href="javascript://" class="disabled" clrDropdownItem disabled>Disabled Action</a>
+                <div class="dropdown-divider" role="separator" aria-hidden="true"></div>
                 <a href="javascript://" clrDropdownItem>Link 1</a>
                 <a href="javascript://" clrDropdownItem>Link 2</a>
             </clr-dropdown-menu>
@@ -47,11 +47,11 @@
                 <clr-icon shape="caret down"></clr-icon>
             </button>
             <clr-dropdown-menu *clrIfOpen>
-                <label class="dropdown-header">Dropdown header</label>
-                <a href="javascript://" clrDropdownItem>Action 1</a>
-                <a href="javascript://" clrDropdownItem>Action 2</a>
-                <a href="javascript://" class="disabled" clrDropdownItem disabled>Disabled Action</a>
-                <div class="dropdown-divider" role="separator"></div>
+                <label class="dropdown-header" aria-hidden="true">Dropdown header</label>
+                <a aria-label="Dropdown header Action 1" href="javascript://" clrDropdownItem>Action 1</a>
+                <a aria-label="Dropdown header Action 1" href="javascript://" clrDropdownItem>Action 2</a>
+                <a aria-label="Dropdown header Disabled Action" href="javascript://" class="disabled" clrDropdownItem disabled>Disabled Action</a>
+                <div class="dropdown-divider" role="separator" aria-hidden="true"></div>
                 <a href="javascript://" clrDropdownItem>Link 1</a>
                 <a href="javascript://" clrDropdownItem>Link 2</a>
             </clr-dropdown-menu>
@@ -62,11 +62,11 @@
                 <clr-icon shape="caret down"></clr-icon>
             </button>
             <clr-dropdown-menu *clrIfOpen clrPosition="top-right">
-                <label class="dropdown-header">Dropdown header</label>
-                <a href="javascript://" clrDropdownItem>Action 1</a>
-                <a href="javascript://" clrDropdownItem>Action 2</a>
-                <a href="javascript://" class="disabled" clrDropdownItem disabled>Disabled Action</a>
-                <div class="dropdown-divider" role="separator"></div>
+                <label class="dropdown-header" aria-hidden="true">Dropdown header</label>
+                <a aria-label="Dropdown header Action 1" href="javascript://" clrDropdownItem>Action 1</a>
+                <a aria-label="Dropdown header Action 1" href="javascript://" clrDropdownItem>Action 2</a>
+                <a aria-label="Dropdown header Disabled Action" href="javascript://" class="disabled" clrDropdownItem disabled>Disabled Action</a>
+                <div class="dropdown-divider" role="separator" aria-hidden="true"></div>
                 <a href="javascript://" clrDropdownItem>Link 1</a>
                 <a href="javascript://" clrDropdownItem>Link 2</a>
             </clr-dropdown-menu>

diff --git a/src/dev/src/app/dropdown/dropdown-static-buttonlink-toggle.demo.html b/src/dev/src/app/dropdown/dropdown-static-buttonlink-toggle.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -11,11 +11,11 @@
       <clr-icon shape="caret down"></clr-icon>
     </button>
     <div class="dropdown-menu">
-      <h4 class="dropdown-header">Dropdown header</h4>
-      <a href="javascript://" class="dropdown-item">Lorem.</a>
-      <a href="javascript://" class="dropdown-item">Lorem ipsum.</a>
-      <a href="javascript://" class="dropdown-item">Lorem ipsum dolor.</a>
-      <div class="dropdown-divider"></div>
+      <h4 class="dropdown-header" aria-hidden="true">Dropdown header</h4>
+      <a aria-label="Dropdown header Lorem" href="javascript://" class="dropdown-item">Lorem.</a>
+      <a aria-label="Dropdown header Lorem ipsum" href="javascript://" class="dropdown-item">Lorem ipsum.</a>
+      <a aria-label="Dropdown header Lorem ipsum dolor" href="javascript://" class="dropdown-item">Lorem ipsum dolor.</a>
+      <div class="dropdown-divider" role="separator" aria-hidden="true"></div>
       <a href="javascript://" class="dropdown-item">Link</a>
     </div>
   </div>

diff --git a/src/dev/src/app/dropdown/dropdown-static-default.demo.html b/src/dev/src/app/dropdown/dropdown-static-default.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -11,10 +11,10 @@
       <clr-icon shape="caret down"></clr-icon>
     </button>
     <div class="dropdown-menu">
-      <h4 class="dropdown-header">Dropdown header</h4>
-      <a href="javascript://" class="dropdown-item active">Action</a>
-      <a href="javascript://" class="dropdown-item disabled">Disabled Link</a>
-      <div class="dropdown-divider"></div>
+      <h4 class="dropdown-header" aria-hidden="true">Dropdown header</h4>
+      <a aria-label="Dropdown header Action" href="javascript://" class="dropdown-item active">Action</a>
+      <a aria-label="Dropdown header Disabled Link" href="javascript://" class="dropdown-item disabled">Disabled Link</a>
+      <div class="dropdown-divider" role="separator" aria-hidden="true"></div>
       <a href="javascript://" class="dropdown-item">Lorem.</a>
       <div class="dropdown open right-bottom">
         <button class="dropdown-item active expandable">Lorem ipsum.</button>

diff --git a/src/dev/src/app/dropdown/dropdown-static-icon-toggle.demo.html b/src/dev/src/app/dropdown/dropdown-static-icon-toggle.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -11,11 +11,11 @@
       <clr-icon shape="caret down"></clr-icon>
     </button>
     <div class="dropdown-menu">
-      <h4 class="dropdown-header">Dropdown header</h4>
-      <a href="javascript://" class="dropdown-item">Lorem.</a>
-      <a href="javascript://" class="dropdown-item">Lorem ipsum.</a>
-      <a href="javascript://" class="dropdown-item">Lorem ipsum dolor.</a>
-      <div class="dropdown-divider"></div>
+      <h4 class="dropdown-header" aria-hidden="true">Dropdown header</h4>
+      <a aria-label="Dropdown header Lorem" href="javascript://" class="dropdown-item">Lorem.</a>
+      <a aria-label="Dropdown header Lorem ipsum" href="javascript://" class="dropdown-item">Lorem ipsum.</a>
+      <a aria-label="Dropdown header Lorem ipsum dolor" href="javascript://" class="dropdown-item">Lorem ipsum dolor.</a>
+      <div class="dropdown-divider" role="separator" aria-hidden="true"></div>
       <a href="javascript://" class="dropdown-item">Action 1</a>
     </div>
   </div>

diff --git a/src/dev/src/app/dropdown/dropdown-static-positioning.demo.html b/src/dev/src/app/dropdown/dropdown-static-positioning.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -11,10 +11,10 @@
       <clr-icon shape="caret down"></clr-icon>
     </button>
     <div class="dropdown-menu">
-      <h4 class="dropdown-header">Dropdown header</h4>
-      <button class="dropdown-item active">First Action</button>
-      <button class="dropdown-item" disabled>Disabled Action</button>
-      <div class="dropdown-divider"></div>
+      <h4 class="dropdown-header" aria-hidden="true">Dropdown header</h4>
+      <button aria-label="Dropdown header First Action" class="dropdown-item active">First Action</button>
+      <button aria-label="Dropdown header Disabled Action" class="dropdown-item" disabled aria-disabled="true">Disabled Action</button>
+      <div class="dropdown-divider" role="separator" aria-hidden="true"></div>
       <button class="dropdown-item">Link 1</button>
       <button class="dropdown-item">Link 2</button>
     </div>

diff --git a/src/ks-app/src/app/containers/cards/cards.component.html b/src/ks-app/src/app/containers/cards/cards.component.html
@@ -70,9 +70,9 @@ <h1>Cards</h1>
             <clr-icon shape="caret down"></clr-icon>
           </button>
           <clr-dropdown-menu clrPosition="top-right" *clrIfOpen>
-            <label class="dropdown-header">Dropdown header</label>
-            <button type="button" clrDropdownItem>Action 1</button>
-            <button type="button" disabled clrDropdownItem>Disabled Action</button>
+            <label class="dropdown-header" aria-hidden="true">Dropdown header</label>
+            <button aria-label="Dropdown header Action 1" type="button" clrDropdownItem>Action 1</button>
+            <button aria-label="Dropdown header Disabled Action" type="button" disabled clrDropdownItem>Disabled Action</button>
             <div class="dropdown-divider"></div>
             <clr-dropdown>
               <button type="button" clrDropdownTrigger>Link 1</button>

diff --git a/src/ks-app/src/app/containers/popover/dropdowns.component.html b/src/ks-app/src/app/containers/popover/dropdowns.component.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -12,10 +12,10 @@ <h3>Dropdown w/ nested menu</h3>
         <clr-icon shape="caret down"></clr-icon>
     </button>
     <clr-dropdown-menu>
-        <label class="dropdown-header">Dropdown header</label>
-        <button href="javascript://" clrDropdownItem>Action 1</button>
-        <button href="javascript://" class="disabled" clrDropdownItem>Disabled Action</button>
-        <div class="dropdown-divider"></div>
+        <label class="dropdown-header" aria-hidden="true">Dropdown header</label>
+        <button aria-label="Dropdown header Action 1" href="javascript://" clrDropdownItem>Action 1</button>
+        <button aria-label="Dropdown header Disabled Action" href="javascript://" class="disabled" clrDropdownItem>Disabled Action</button>
+        <div class="dropdown-divider" role="separator" aria-hidden="true"></div>
         <clr-dropdown>
             <button clrDropdownTrigger id="sub-menu-1">Link 1</button>
             <clr-dropdown-menu>

diff --git a/src/website/src/app/documentation/demos/dropdown/dropdown-angular-close-item-false.demo.html b/src/website/src/app/documentation/demos/dropdown/dropdown-angular-close-item-false.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -11,10 +11,10 @@
             <clr-icon shape="caret down"></clr-icon>
         </button>
         <clr-dropdown-menu *clrIfOpen>
-            <label class="dropdown-header">Dropdown header</label>
-            <button type="button" clrDropdownItem>Action 1</button>
-            <button type="button" clrDropdownItem>Action 2</button>
-            <div class="dropdown-divider"></div>
+            <label class="dropdown-header" aria-hidden="true">Dropdown header</label>
+            <button aria-label="Dropdown header Action 1" type="button" clrDropdownItem>Action 1</button>
+            <button aria-label="Dropdown header Action 2" type="button" clrDropdownItem>Action 2</button>
+            <div class="dropdown-divider" role="separator" aria-hidden="true"></div>
             <button type="button" clrDropdownItem>Link 1</button>
             <button type="button" clrDropdownItem>Link 2</button>
         </clr-dropdown-menu>

diff --git a/src/website/src/app/documentation/demos/dropdown/dropdown-angular-close-item-false.ts b/src/website/src/app/documentation/demos/dropdown/dropdown-angular-close-item-false.ts
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
 
 const HTML_EXAMPLE = `
 <clr-dropdown [clrCloseMenuOnItemClick]="false">
-    <button type="button" clrDropdownTrigger>
+    <button type="button" clrDropdownTrigger aria-label="dropdown demo button">
         <clr-icon shape="error" class="is-error" size="24"></clr-icon>
         <clr-icon shape="caret down"></clr-icon>
     </button>

diff --git a/src/website/src/app/documentation/demos/dropdown/dropdown-angular-positioning.demo.html b/src/website/src/app/documentation/demos/dropdown/dropdown-angular-positioning.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -11,10 +11,10 @@
             <clr-icon shape="caret down"></clr-icon>
         </button>
         <clr-dropdown-menu clrPosition="top-left" *clrIfOpen>
-            <label class="dropdown-header">Dropdown header</label>
-            <button type="button" clrDropdownItem>Action 1</button>
-            <button type="button" disabled clrDropdownItem>Disabled Action</button>
-            <div class="dropdown-divider"></div>
+            <label class="dropdown-header" aria-hidden="true">Dropdown header</label>
+            <button aria-label="Dropdown header Action 1" type="button" clrDropdownItem>Action 1</button>
+            <button aria-label="Dropdown header Disabled Action" type="button" disabled clrDropdownItem>Disabled Action</button>
+            <div class="dropdown-divider" role="separator" aria-hidden="true"></div>
             <clr-dropdown>
                 <button type="button" clrDropdownTrigger>Link 1</button>
                 <clr-dropdown-menu>

diff --git a/src/website/src/app/documentation/demos/dropdown/dropdown-static-buttonlink-toggle.demo.html b/src/website/src/app/documentation/demos/dropdown/dropdown-static-buttonlink-toggle.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -11,11 +11,11 @@
             <clr-icon shape="caret down"></clr-icon>
         </button>
         <div class="dropdown-menu">
-            <h4 class="dropdown-header">Dropdown header</h4>
-            <button type="button" class="dropdown-item">Lorem.</button>
-            <button type="button" class="dropdown-item">Lorem ipsum.</button>
-            <button type="button" class="dropdown-item">Lorem ipsum dolor.</button>
-            <div class="dropdown-divider"></div>
+            <h4 class="dropdown-header" aria-hidden="true">Dropdown header</h4>
+            <button aria-label="Dropdown header Lorem" type="button" class="dropdown-item">Lorem.</button>
+            <button aria-label="Dropdown header Lorem ipsum" type="button" class="dropdown-item">Lorem ipsum.</button>
+            <button aria-label="Dropdown header Lorem ipsum dolor" type="button" class="dropdown-item">Lorem ipsum dolor.</button>
+            <div class="dropdown-divider" role="separator"></div>
             <button type="button" class="dropdown-item">Link</button>
         </div>
     </div>