fix(accesibility): boolean aria-* properties

ionic-team · Jul 28, 2018 · 4f9cbfe · 4f9cbfe
1 parent f19553f
commit 4f9cbfe
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,