docs(overflow-menu): add aria-disabled attribute to disabled items (#…

…1787)
carbon-design-system · Feb 14, 2019 · 1fae59e · 1fae59e
1 parent 6f0618d
commit 1fae59e
Showing 1 changed file with 37 additions and 32 deletions.
diff --git a/src/components/overflow-menu/overflow-menu.hbs b/src/components/overflow-menu/overflow-menu.hbs
@@ -1,54 +1,59 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
   LICENSE file in the root directory of this source tree.
 -->
 
-<div data-overflow-menu tabindex="0" aria-label="Overflow" class="{{@root.prefix}}--overflow-menu" role="button" aria-haspopup="true"
-  aria-expanded="false">
+<div data-overflow-menu tabindex="0" aria-label="Overflow" class="{{@root.prefix}}--overflow-menu" role="button"
+  aria-haspopup="true" aria-expanded="false">
   {{#if @root.featureFlags.componentsX}}
-    {{ carbon-icon 'OverflowMenuVertical16' class=(add @root.prefix '--overflow-menu__icon') }}
+  {{ carbon-icon 'OverflowMenuVertical16' class=(add @root.prefix '--overflow-menu__icon') }}
   {{else}}
-    <svg aria-hidden="true" class="{{@root.prefix}}--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
-      <g fill-rule="evenodd">
-        <circle cx="1.5" cy="1.5" r="1.5" />
-        <circle cx="1.5" cy="7.5" r="1.5" />
-        <circle cx="1.5" cy="13.5" r="1.5" />
-      </g>
-    </svg>
+  <svg aria-hidden="true" class="{{@root.prefix}}--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+    <g fill-rule="evenodd">
+      <circle cx="1.5" cy="1.5" r="1.5" />
+      <circle cx="1.5" cy="7.5" r="1.5" />
+      <circle cx="1.5" cy="13.5" r="1.5" />
+    </g>
+  </svg>
   {{/if}}
-  <ul class="{{@root.prefix}}--overflow-menu-options" tabindex="-1" role="menu" aria-label="Overflow" data-floating-menu-direction="{{direction}}">
+  <ul class="{{@root.prefix}}--overflow-menu-options" tabindex="-1" role="menu" aria-label="Overflow"
+    data-floating-menu-direction="{{direction}}">
     {{#each items}}
-    <li class="{{@root.prefix}}--overflow-menu-options__option{{#if disabled}} {{@root.prefix}}--overflow-menu-options__option--disabled{{/if}}{{#if danger}} {{@root.prefix}}--overflow-menu-options__option--danger{{/if}}"
-      role="presentation">
-      <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" {{#if title}} title="{{title}}" {{/if}}
-        {{#if primaryFocus}} data-floating-menu-primary-focus{{/if}}{{#if disabled}} tabindex="-1" {{/if}}>{{label}}</button>
+    <li
+      class="{{@root.prefix}}--overflow-menu-options__option {{#if disabled}} {{@root.prefix}}--overflow-menu-options__option--disabled {{/if}} {{#if danger}} {{@root.prefix}}--overflow-menu-options__option--danger {{/if}}"
+      role="presentation" {{#if disabled}} aria-disabled="true" {{/if}}>
+      <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" {{#if title}} title="{{title}}"
+        {{/if}} {{#if primaryFocus}} data-floating-menu-primary-focus {{/if}} {{#if disabled}} tabindex="-1"
+        {{/if}}>{{label}}</button>
     </li>
     {{/each}}
   </ul>
 </div>
 
-<div data-overflow-menu tabindex="0" aria-label="Overflow" class="{{@root.prefix}}--overflow-menu" role="button" aria-haspopup="true"
-  aria-expanded="false">
+<div data-overflow-menu tabindex="0" aria-label="Overflow" class="{{@root.prefix}}--overflow-menu" role="button"
+  aria-haspopup="true" aria-expanded="false">
   {{#if @root.featureFlags.componentsX}}
-    {{ carbon-icon 'OverflowMenuVertical16' class=(add @root.prefix '--overflow-menu__icon') }}
+  {{ carbon-icon 'OverflowMenuVertical16' class=(add @root.prefix '--overflow-menu__icon') }}
   {{else}}
-    <svg aria-hidden="true" class="{{@root.prefix}}--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
-      <g fill-rule="evenodd">
-        <circle cx="1.5" cy="1.5" r="1.5" />
-        <circle cx="1.5" cy="7.5" r="1.5" />
-        <circle cx="1.5" cy="13.5" r="1.5" />
-      </g>
-    </svg>
+  <svg aria-hidden="true" class="{{@root.prefix}}--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+    <g fill-rule="evenodd">
+      <circle cx="1.5" cy="1.5" r="1.5" />
+      <circle cx="1.5" cy="7.5" r="1.5" />
+      <circle cx="1.5" cy="13.5" r="1.5" />
+    </g>
+  </svg>
   {{/if}}
-  <ul class="{{@root.prefix}}--overflow-menu-options {{@root.prefix}}--overflow-menu--flip" tabindex="-1" data-floating-menu-direction="{{direction}}"
-    role="menu" aria-label="Overflow">
+  <ul class="{{@root.prefix}}--overflow-menu-options {{@root.prefix}}--overflow-menu--flip" tabindex="-1"
+    data-floating-menu-direction="{{direction}}" role="menu" aria-label="Overflow">
     {{#each items}}
-    <li class="{{@root.prefix}}--overflow-menu-options__option{{#if disabled}} {{@root.prefix}}--overflow-menu-options__option--disabled{{/if}}{{#if danger}} {{@root.prefix}}--overflow-menu-options__option--danger{{/if}}"
-      role="presentation">
-      <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" {{#if title}} title="{{title}}" {{/if}}
-        {{#if primaryFocus}} data-floating-menu-primary-focus{{/if}}{{#if disabled}} tabindex="-1" {{/if}}>{{label}}</button>
+    <li
+      class="{{@root.prefix}}--overflow-menu-options__option {{#if disabled}} {{@root.prefix}}--overflow-menu-options__option--disabled {{/if}} {{#if danger}} {{@root.prefix}}--overflow-menu-options__option--danger {{/if}}"
+      role="presentation" {{#if disabled}} aria-disabled="true" {{/if}}>
+      <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" {{#if title}} title="{{title}}"
+        {{/if}} {{#if primaryFocus}} data-floating-menu-primary-focus {{/if}} {{#if disabled}} tabindex="-1"
+        {{/if}}>{{label}}</button>
     </li>
     {{/each}}
   </ul>