fix(a11y): mirror disabled prop to aria attribute

ionic-team · Jun 30, 2021 · fec4d40 · fec4d40
1 parent f3d6abb
commit fec4d40
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 179 deletions.
diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx
@@ -122,6 +122,7 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
     const mode = getIonMode(this);
     return (
       <Host
+        aria-disabled={this.disabled ? 'true' : null}
         class={createColorClasses(this.color, {
           [mode]: true,
           'card-disabled': this.disabled,

diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
@@ -152,6 +152,7 @@ export class Checkbox implements ComponentInterface {
         onClick={this.onClick}
         aria-labelledby={label ? labelId : null}
         aria-checked={`${checked}`}
+        aria-disabled={disabled ? 'true' : null}
         aria-hidden={disabled ? 'true' : null}
         role="checkbox"
         class={createColorClasses(color, {

diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx
@@ -100,6 +100,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
     return (
       <Host
         onClick={this.onClick}
+        aria-disabled={disabled ? 'true' : null}
         class={createColorClasses(this.color, {
           [mode]: true,
           'item-option-disabled': disabled,

diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
@@ -144,6 +144,7 @@ export class Radio implements ComponentInterface {
     return (
       <Host
         aria-checked={`${checked}`}
+        aria-disabled={disabled ? 'true' : null}
         aria-hidden={disabled ? 'true' : null}
         aria-labelledby={label ? labelId : null}
         role="radio"

diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
@@ -463,6 +463,7 @@ export class Range implements ComponentInterface {
         onFocusin={this.onFocus}
         onFocusout={this.onBlur}
         id={rangeId}
+        aria-disabled={disabled ? 'true' : null}
         class={createColorClasses(this.color, {
           [mode]: true,
           'in-item': hostContext('ion-item', el),

diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
@@ -425,6 +425,7 @@ export class Segment implements ComponentInterface {
     const mode = getIonMode(this);
     return (
       <Host
+        aria-disabled={this.disabled ? 'true' : null}
         role="tablist"
         onClick={this.onClick}
         class={createColorClasses(this.color, {

diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
@@ -482,7 +482,7 @@ export class Select implements ComponentInterface {
         <div class="select-icon" role="presentation" part="icon">
           <div class="select-icon-inner"></div>
         </div>
-        <label id={labelId}>
+        <label id={labelId} htmlFor={inputId}>
           {displayLabel}
         </label>
         <button

diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
@@ -152,6 +152,7 @@ export class TabButton implements ComponentInterface, AnchorInterface {
         onKeyup={this.onKeyUp}
         role="tab"
         tabindex={tabIndex}
+        aria-disabled={disabled ? 'true' : null}
         aria-selected={selected ? 'true' : null}
         id={tab !== undefined ? `tab-button-${tab}` : null}
         class={{

diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
@@ -190,7 +190,7 @@ export class Toggle implements ComponentInterface {
         onClick={this.onClick}
         aria-labelledby={label ? labelId : null}
         aria-checked={`${checked}`}
-        aria-hidden={disabled ? 'true' : null}
+        aria-disabled={disabled ? 'true' : null}
         role="switch"
         class={createColorClasses(color, {
           [mode]: true,
@@ -213,6 +213,7 @@ export class Toggle implements ComponentInterface {
           type="checkbox"
           role="switch"
           aria-checked={`${checked}`}
+          aria-disabled={disabled ? 'true' : null}
           disabled={disabled}
           id={inputId}
           onFocus={() => this.onFocus()}