From 4f9cbfe73c0a3bca421e8fb90c0082979556876e Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Sat, 28 Jul 2018 16:38:59 +0200
Subject: [PATCH] fix(accesibility): boolean aria-* properties

---
 core/src/components/alert/alert.tsx            | 18 ++++++++++++++++--
 core/src/components/datetime/datetime.tsx      |  2 +-
 core/src/components/input/input.tsx            |  2 +-
 core/src/components/range-knob/range-knob.tsx  |  2 +-
 .../segment-button/segment-button.tsx          |  2 +-
 core/src/components/select/select.tsx          |  4 ++--
 core/src/components/tab-button/tab-button.tsx  |  2 +-
 7 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 89d8adf114b..8b4131205db 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -313,7 +313,15 @@ export class Alert implements OverlayInterface {
     return (
       <div class="alert-checkbox-group" aria-labelledby={labelledby}>
         { inputs.map((i) => (
-          <button onClick={() => this.cbClick(i)} aria-checked={i.checked} id={i.id} disabled={i.disabled} tabIndex={0} role="checkbox" class="alert-tappable alert-checkbox alert-checkbox-button">
+          <button
+            onClick={() => this.cbClick(i)}
+            aria-checked={i.checked ? 'true' : null}
+            id={i.id}
+            disabled={i.disabled}
+            tabIndex={0}
+            role="checkbox"
+            class="alert-tappable alert-checkbox alert-checkbox-button">
+
             <div class="alert-button-inner">
               <div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>
               <div class="alert-checkbox-label">
@@ -335,7 +343,13 @@ export class Alert implements OverlayInterface {
     return (
       <div class="alert-radio-group" role="radiogroup" aria-labelledby={labelledby} aria-activedescendant={this.activeId}>
         { inputs.map((i) => (
-          <button onClick={() => this.rbClick(i)} aria-checked={i.checked} disabled={i.disabled} id={i.id} tabIndex={0} class="alert-radio-button alert-tappable alert-radio" role="radio">
+          <button
+            onClick={() => this.rbClick(i)}
+            aria-checked={i.checked ? 'true' : null}
+            disabled={i.disabled}
+            id={i.id} tabIndex={0}
+            class="alert-radio-button alert-tappable alert-radio"
+            role="radio">
             <div class="alert-button-inner">
               <div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>
               <div class="alert-radio-label">
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 2f04fa20588..7dd3be4a928 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -577,7 +577,7 @@ export class Datetime {
         aria-haspopup="true"
         id={this.datetimeId}
         aria-labelledby={this.labelId}
-        aria-disabled={this.disabled ? 'true' : false}
+        aria-disabled={this.disabled ? 'true' : null}
         onClick={this.open.bind(this)}
         class="datetime-cover">
         { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index d99177d1a94..15b0f991919 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -319,7 +319,7 @@ export class Input implements InputComponent {
     return [
       <input
         ref={input => this.nativeInput = input as any}
-        aria-disabled={this.disabled ? 'true' : false}
+        aria-disabled={this.disabled ? 'true' : null}
         accept={this.accept}
         autoCapitalize={this.autocapitalize}
         autoComplete={this.autocomplete}
diff --git a/core/src/components/range-knob/range-knob.tsx b/core/src/components/range-knob/range-knob.tsx
index b22f84f327a..b5de21dece5 100644
--- a/core/src/components/range-knob/range-knob.tsx
+++ b/core/src/components/range-knob/range-knob.tsx
@@ -52,7 +52,7 @@ export class RangeKnob {
       'tabindex': this.disabled ? -1 : 0,
       'aria-valuemin': min,
       'aria-valuemax': max,
-      'aria-disabled': this.disabled,
+      'aria-disabled': this.disabled ? 'true' : null,
       'aria-labelledby': this.labelId,
       'aria-valuenow': value
     };
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index 703e349c660..3b51d208af4 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -68,7 +68,7 @@ export class SegmentButton {
   render() {
     return [
       <button
-        aria-pressed={this.checked}
+        aria-pressed={this.checked ? 'true' : null}
         class="segment-button-native"
         disabled={this.disabled}
         onClick={() => this.checked = true }>
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 19b4b478751..26ec2af139a 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -487,9 +487,9 @@ export class Select {
         type="button"
         role="combobox"
         aria-haspopup="dialog"
-        aria-expanded={this.isExpanded}
         aria-labelledby={this.labelId}
-        aria-disabled={this.disabled ? 'true' : false}
+        aria-expanded={this.isExpanded ? 'true' : null}
+        aria-disabled={this.disabled ? 'true' : null}
         onClick={this.open.bind(this)}
         onKeyUp={this.onKeyUp.bind(this)}
         onFocus={this.onFocus.bind(this)}
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index a3abf2c74b9..28d5050aa5c 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -48,7 +48,7 @@ export class TabButton {
     const hasBadge = !!this.badge;
     return {
       'role': 'tab',
-      'aria-selected': selected,
+      'aria-selected': selected ? 'true' : null,
       class: {
         ...createColorClasses(this.color),
         'tab-selected': selected,