fix: aria states for bools (#934)

Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>
carbon-design-system · Jun 24, 2020 · 191cb6e · 191cb6e
1 parent 2fc40e4
commit 191cb6e
Show file tree

Hide file tree

Showing 15 changed files with 22 additions and 30 deletions.
diff --git a/packages/core/__tests__/__snapshots__/cv-button.test.js.snap b/packages/core/__tests__/__snapshots__/cv-button.test.js.snap
@@ -2,18 +2,13 @@
 
 exports[`CvButton Renders as expected default 1`] = `
 <button role="button" class="cv-button bx--btn bx--btn--primary">default slot content
-  <!---->
   <!----></button>
 `;
 
-exports[`CvButton Renders as expected field secondary with icon disabled 1`] = `
-<button role="button" class="cv-button bx--btn bx--btn--secondary bx--btn--field" tab-index="2" disabled="disabled">default slot content <addfilled16-stub class="bx--temp-fix bx--btn__icon"></addfilled16-stub>
-  <!----></button>
-`;
+exports[`CvButton Renders as expected field secondary with icon disabled 1`] = `<button role="button" class="cv-button bx--btn bx--btn--secondary bx--btn--field" tab-index="2" disabled="disabled">default slot content <cvsvg-stub svg="[object Object]" class="bx--btn__icon"></cvsvg-stub></button>`;
 
 exports[`CvButton Renders as expected small primary 1`] = `
 <button role="button" class="cv-button bx--btn bx--btn--primary bx--btn--sm">default slot content
-  <!---->
   <!----></button>
 `;
 
@@ -25,19 +20,16 @@ exports[`CvButtonSkeleton Renders as expected small primary 1`] = `<button disab
 
 exports[`CvIconButton Renders as expected default 1`] = `
 <button type="button" class="cv-button bx--btn bx--btn--icon-only bx--btn--primary"><span class="bx--assistive-text"></span>
-  <!---->
   <!----></button>
 `;
 
 exports[`CvIconButton Renders as expected field secondary with icon disabled 1`] = `
 <button type="button" class="cv-button bx--btn bx--btn--icon-only bx--btn--secondary bx--btn--field" tab-index="2" disabled="disabled"><span class="bx--assistive-text"></span>
-  <addfilled16-stub class="bx--temp-fix bx--btn__icon"></addfilled16-stub>
-  <!---->
+  <cvsvg-stub svg="[object Object]" class="bx--btn__icon"></cvsvg-stub>
 </button>
 `;
 
 exports[`CvIconButton Renders as expected small primary 1`] = `
 <button type="button" class="cv-button bx--btn bx--btn--icon-only bx--btn--primary bx--btn--sm"><span class="bx--assistive-text"></span>
-  <!---->
   <!----></button>
 `;
diff --git a/packages/core/__tests__/__snapshots__/cv-tabs.test.js.snap b/packages/core/__tests__/__snapshots__/cv-tabs.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CvTab matches with disabled and selected 1`] = `<div id="an-id" role="tabpanel" aria-labelledby="an-id-link" class="cv-tab"></div>`;
+exports[`CvTab matches with disabled and selected 1`] = `<div id="an-id" role="tabpanel" aria-labelledby="an-id-link" aria-hidden="false" class="cv-tab"></div>`;
 
 exports[`CvTab matches with slotted content 1`] = `
 <div id="an-id" role="tabpanel" aria-labelledby="an-id-link" aria-hidden="true" hidden="hidden" class="cv-tab">

diff --git a/packages/core/src/components/cv-accordion/cv-accordion-item.vue b/packages/core/src/components/cv-accordion/cv-accordion-item.vue
@@ -10,7 +10,7 @@
     <button
       type="button"
       :class="`${carbonPrefix}--accordion__heading`"
-      :aria-expanded="`${dataOpen}`"
+      :aria-expanded="dataOpen ? 'true' : 'false'"
       :aria-controls="uid"
       @click="toggle"
     >

diff --git a/packages/core/src/components/cv-combo-box/cv-combo-box.vue b/packages/core/src/components/cv-combo-box/cv-combo-box.vue
@@ -28,7 +28,7 @@
       <div
         role="button"
         aria-haspopup="true"
-        :aria-expanded="open"
+        :aria-expanded="open ? 'true' : 'false'"
         :aria-owns="uid"
         :aria-controls="uid"
         class="bx--list-box__field"
@@ -45,7 +45,7 @@
           aria-autocomplete="list"
           role="combobox"
           :aria-disabled="disabled"
-          :aria-expanded="open"
+          :aria-expanded="open ? 'true' : 'false'"
           autocomplete="off"
           :disabled="disabled"
           :placeholder="label"

diff --git a/packages/core/src/components/cv-content-switcher/cv-content-switcher-button.vue b/packages/core/src/components/cv-content-switcher/cv-content-switcher-button.vue
@@ -22,7 +22,7 @@
       },
     ]"
     :data-target="contentSelector"
-    :aria-selected="`${dataSelected}`"
+    :aria-selected="dataSelected ? 'true' : 'false'"
     @click="open"
   >
     <CvSvg v-if="icon" :svg="icon" class="bx--content-switcher__icon" height="16" width="16" />

diff --git a/packages/core/src/components/cv-dropdown/cv-dropdown.vue b/packages/core/src/components/cv-dropdown/cv-dropdown.vue
@@ -22,9 +22,9 @@
       :class="{ 'bx--dropdown__wrapper--inline': inline, 'cv-dropdown': !formItem }"
       :style="wrapperStyleOverride"
     >
-      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': disabled }">
-        {{ label }}
-      </span>
+      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': disabled }">{{
+        label
+      }}</span>
 
       <div
         v-if="!inline && isHelper"
@@ -60,7 +60,7 @@
           class="bx--dropdown-text"
           :aria-disabled="disabled"
           aria-haspopup="true"
-          :aria-expanded="open"
+          :aria-expanded="open ? 'true' : 'false'"
           :aria-controls="`${uid}-menu`"
           :aria-labelledby="ariaLabeledBy"
           :disabled="disabled"
@@ -84,7 +84,7 @@
           class="bx--dropdown-list"
           :id="`${uid}-menu`"
           role="menu"
-          :aria-hidden="!open"
+          :aria-hidden="!open ? 'true' : 'false'"
           wh-menu-anchor="left"
           :aria-labelledby="`${uid}-label`"
           ref="droplist"

diff --git a/packages/core/src/components/cv-multi-select/cv-multi-select.vue b/packages/core/src/components/cv-multi-select/cv-multi-select.vue
@@ -43,7 +43,7 @@
       <div
         role="button"
         aria-haspopup="true"
-        :aria-expanded="open"
+        :aria-expanded="open ? 'true' : 'false'"
         :aria-owns="uid"
         :aria-controls="uid"
         class="bx--list-box__field"
@@ -71,7 +71,7 @@
             :aria-controls="uid"
             aria-autocomplete="list"
             role="combobox"
-            :aria-expanded="open"
+            :aria-expanded="open ? 'true' : 'false'"
             autocomplete="off"
             :placeholder="label"
             v-model="filter"

diff --git a/packages/core/src/components/cv-overflow-menu/cv-overflow-menu.vue b/packages/core/src/components/cv-overflow-menu/cv-overflow-menu.vue
@@ -5,7 +5,7 @@
       :class="[tipClasses, { 'bx--overflow-menu--open': open }]"
       aria-haspopup
       type="button"
-      :aria-expanded="open"
+      :aria-expanded="open ? 'true' : 'false'"
       :aria-controls="`${uid}-menu`"
       :id="`${uid}-trigger`"
       ref="trigger"

diff --git a/packages/core/src/components/cv-tabs/cv-tab.vue b/packages/core/src/components/cv-tabs/cv-tab.vue
@@ -4,7 +4,7 @@
     :id="uid"
     role="tabpanel"
     :aria-labelledby="`${uid}-link`"
-    :aria-hidden="!dataSelected"
+    :aria-hidden="!dataSelected ? 'true' : 'false'"
     :hidden="!dataSelected"
   >
     <slot>

diff --git a/packages/core/src/components/cv-tabs/cv-tabs.vue b/packages/core/src/components/cv-tabs/cv-tabs.vue
@@ -34,7 +34,7 @@
             'bx--tabs__nav-item--disabled': disabledTabs.indexOf(tab.uid) !== -1,
           }"
           role="tab"
-          :aria-selected="selectedId == tab.uid"
+          :aria-selected="selectedId == tab.uid ? 'true' : 'false'"
           :aria-disabled="disabledTabs.indexOf(tab.uid) !== -1"
         >
           <a

diff --git a/packages/core/src/components/cv-tooltip/cv-interactive-tooltip.vue b/packages/core/src/components/cv-tooltip/cv-interactive-tooltip.vue
@@ -4,7 +4,7 @@
       <slot name="label"></slot>
 
       <button
-        :aria-expanded="dataVisible"
+        :aria-expanded="dataVisible ? 'true' : 'false'"
         :aria-labelledby="`${uid}-label`"
         class="bx--tooltip__trigger"
         :aria-controls="`${uid}`"

diff --git a/packages/core/src/components/cv-ui-shell/cv-header-global-action.vue b/packages/core/src/components/cv-ui-shell/cv-header-global-action.vue
@@ -6,7 +6,7 @@
     type="button"
     aria-haspopup="true"
     :aria-controls="ariaControls"
-    :aria-expanded="active"
+    :aria-expanded="active ? 'true' : 'false'"
     @click="gaToggle"
     @focusout="gaFocusout"
   >

diff --git a/packages/core/src/components/cv-ui-shell/cv-header-menu-button.vue b/packages/core/src/components/cv-ui-shell/cv-header-menu-button.vue
@@ -6,7 +6,7 @@
     type="button"
     aria-haspopup="true"
     :aria-controls="ariaControls"
-    :aria-expanded="active"
+    :aria-expanded="active ? 'true' : 'false'"
     @click="gaToggle"
     @focusout="gaFocusout"
   >

diff --git a/packages/core/src/components/cv-ui-shell/cv-header-panel.vue b/packages/core/src/components/cv-ui-shell/cv-header-panel.vue
@@ -2,7 +2,7 @@
   <div
     class="cv-header-panel bx--header-panel"
     :class="{ 'bx--header-panel--expanded': panelExpanded }"
-    :aria-hidden="!panelExpanded"
+    :aria-hidden="!panelExpanded ? 'true' : 'false'"
     :id="id"
     @focusout="onFocusout"
     @mousedown="onMouseDown"

diff --git a/packages/core/src/components/cv-ui-shell/cv-side-nav.vue b/packages/core/src/components/cv-ui-shell/cv-side-nav.vue
@@ -7,7 +7,7 @@
       'bx--side-nav--collapsed': !panelExpanded && fixed,
       'bx--side-nav--ux': isChildOfHeader,
     }"
-    :aria-hidden="!panelExpanded && !fixed"
+    :aria-hidden="!panelExpanded && !fixed ? 'true' : 'false'"
     :id="id"
     @focusout="onFocusout"
     @mousedown="onMouseDown"