fix(ld-input): disabled, aria-disabled and readonly props

Fixes #973
emdgroup-liquid · Oct 10, 2023 · 2f9d8c1 · 2f9d8c1
1 parent f137be3
commit 2f9d8c1
Show file tree

Hide file tree

Showing 14 changed files with 120 additions and 64 deletions.
diff --git a/src/liquid/components/ld-button/ld-button.css b/src/liquid/components/ld-button/ld-button.css
@@ -207,11 +207,11 @@
   -webkit-touch-callout: none;
 
   &:where(:disabled),
-  &:where([aria-disabled='true']) {
+  &:where([aria-disabled]:not([aria-disabled='false'])) {
     opacity: 0.2;
   }
 
-  &:where(:not(:disabled, [aria-disabled='true'])) {
+  &:where(:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) {
     cursor: pointer;
 
     &:where(:focus:focus-visible) {
@@ -352,7 +352,7 @@
   --ld-button-text-color-hover: var(--ld-button-ghost-text-color-hover);
   --ld-button-progress-color: var(--ld-button-ghost-progress-color);
 
-  &:where(:not(:disabled, [aria-disabled='true'])) {
+  &:where(:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) {
     &:where(:focus:focus-visible) .ld-button__progress::after {
       background-color: var(--ld-button-ghost-progress-color-focus);
     }
@@ -412,7 +412,7 @@
       background-color: var(--ld-button-brand-bg-color);
       color: var(--ld-button-brand-text-color);
 
-      &:where(&:not(:disabled, [aria-disabled='true'])) {
+      &:where(&:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) {
         &:where(:focus:focus-visible) {
           color: var(--ld-button-brand-text-color-focus);
         }
@@ -473,7 +473,7 @@
   --ld-button-text-color-hover: var(--ld-button-highlight-text-color);
   --ld-button-progress-color: var(--ld-button-highlight-progress-color);
 
-  &:where(:not(:disabled, [aria-disabled='true'])) {
+  &:where(:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) {
     &:where(:active),
     &:where(:active:focus-visible) {
       .ld-button__progress::after {
@@ -494,7 +494,7 @@
   --ld-button-text-color-focus: var(--ld-button-danger-text-color-focus);
   --ld-button-progress-color: var(--ld-button-danger-progress-color);
 
-  &:where(:not(:disabled, [aria-disabled='true'])) {
+  &:where(:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) {
     &:where(:focus:focus-visible) {
       .ld-button__progress::after {
         background-color: var(--ld-button-danger-progress-color-focus);
@@ -559,7 +559,7 @@
   --ld-button-text-color-focus: var(--ld-button-neutral-text-color-focus);
   --ld-button-progress-color: var(--ld-button-neutral-progress-color);
 
-  &:where(:not(:disabled, [aria-disabled='true'])) {
+  &:where(:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) {
     &:where(:focus:focus-visible) {
       .ld-button__progress::after {
         background-color: var(--ld-button-neutral-progress-color-focus);

diff --git a/src/liquid/components/ld-checkbox/ld-checkbox.css b/src/liquid/components/ld-checkbox/ld-checkbox.css
@@ -71,7 +71,7 @@
     }
 
     &:where(:disabled),
-    &:where([aria-disabled='true']) {
+    &:where([aria-disabled]:not([aria-disabled='false'])) {
       ~ .ld-checkbox__check {
         color: var(--ld-checkbox-disabled-col);
       }
@@ -88,7 +88,7 @@
       }
     }
 
-    &:where(:not(:disabled, [aria-disabled='true'])) {
+    &:where(:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) {
       cursor: pointer;
 
       ~ .ld-checkbox__check {
@@ -144,7 +144,9 @@
     }
   }
 
-  :where(input:not(:disabled, input[aria-disabled='true'])) {
+  :where(
+      input:not(:disabled, input[aria-disabled]:not([aria-disabled='false']))
+    ) {
     ~ .ld-checkbox__box {
       background-color: var(--ld-checkbox-bg-col);
     }
@@ -173,7 +175,11 @@
 .ld-checkbox.ld-checkbox--dark,
 :host(.ld-checkbox.ld-checkbox--dark) {
   :where(input) {
-    &:not(:disabled, input[aria-disabled='true'], :checked) {
+    &:not(
+        :disabled,
+        input[aria-disabled]:not([aria-disabled='false']),
+        :checked
+      ) {
       ~ .ld-checkbox__box {
         background-color: var(--ld-checkbox-dark-bg-col);
       }

diff --git a/src/liquid/components/ld-input/ld-input.css b/src/liquid/components/ld-input/ld-input.css
@@ -371,13 +371,13 @@
   :host(
       :not(
           .ld-input--invalid,
-          [aria-disabled='true'],
+          [aria-disabled]:not([aria-disabled='false']),
           .ld-input--disabled
         ):hover:not(:focus-within)
     ),
   .ld-input:not(
       .ld-input--invalid,
-      [aria-disabled='true'],
+      [aria-disabled]:not([aria-disabled='false']),
       .ld-input--disabled
     ):hover:not(:focus-within) {
     &::before {
@@ -404,20 +404,30 @@
 }
 
 :host(
-    .ld-input--invalid:not(.ld-input--disabled, [aria-disabled='true']):where(
-        :not(:focus)
-      )
+    .ld-input--invalid:not(
+        .ld-input--disabled,
+        [aria-disabled]:not([aria-disabled='false'])
+      ):where(:not(:focus))
   ),
-.ld-input--invalid:not(.ld-input--disabled, [aria-disabled='true']):where(
-    :not(:focus)
-  ) {
+.ld-input--invalid:not(
+    .ld-input--disabled,
+    [aria-disabled]:not([aria-disabled='false'])
+  ):where(:not(:focus)) {
   background-color: var(--ld-input-bg-col-invalid);
   color: var(--ld-input-text-col-invalid);
   -webkit-text-fill-color: var(--ld-input-text-col-invalid);
 }
 
-:host(.ld-input--invalid:not(.ld-input--disabled, [aria-disabled='true'])),
-.ld-input--invalid:not(.ld-input--disabled, [aria-disabled='true']) {
+:host(
+    .ld-input--invalid:not(
+        .ld-input--disabled,
+        [aria-disabled]:not([aria-disabled='false'])
+      )
+  ),
+.ld-input--invalid:not(
+    .ld-input--disabled,
+    [aria-disabled]:not([aria-disabled='false'])
+  ) {
   &::before {
     box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-input-text-col-invalid);
   }
@@ -448,12 +458,12 @@
 :host(
     .ld-input--invalid:not(
         .ld-input--disabled,
-        [aria-disabled='true']
+        [aria-disabled]:not([aria-disabled='false'])
       ):focus-within
   ),
 .ld-input--invalid:not(
     .ld-input--disabled,
-    [aria-disabled='true']
+    [aria-disabled]:not([aria-disabled='false'])
   ):focus-within {
   background-color: var(--ld-input-bg-col-invalid-focus);
 
@@ -465,9 +475,9 @@
 }
 
 :host(.ld-input--disabled),
-:host([aria-disabled='true']),
+:host([aria-disabled]:not([aria-disabled='false'])),
 .ld-input.ld-input--disabled,
-.ld-input[aria-disabled='true'] {
+.ld-input[aria-disabled]:not([aria-disabled='false']) {
   color: var(--ld-input-text-col-disabled);
   background-color: var(--ld-input-bg-col-disabled);
 

diff --git a/src/liquid/components/ld-input/ld-input.tsx b/src/liquid/components/ld-input/ld-input.tsx
@@ -378,6 +378,13 @@ export class LdInput implements InnerFocusable, ClonesAttributes {
         <Host class={cl} onClick={this.handleClick}>
           <textarea
             {...clonedAttributesWithoutType}
+            aria-disabled={
+              this.disabled || isAriaDisabled(this.ariaDisabled)
+                ? 'true'
+                : undefined
+            }
+            disabled={this.disabled}
+            readonly={this.readonly}
             onChange={this.handleChange}
             onInput={this.handleInput}
             part="input focusable"
@@ -399,12 +406,19 @@ export class LdInput implements InnerFocusable, ClonesAttributes {
         <slot name="start"></slot>
         <input
           {...this.clonedAttributes}
+          aria-disabled={
+            this.disabled || isAriaDisabled(this.ariaDisabled)
+              ? 'true'
+              : undefined
+          }
           autocomplete={this.autocomplete}
+          disabled={this.disabled}
           onChange={this.handleChange}
           onInput={this.handleInput}
           onKeyDown={this.handleKeyDown}
           part="input focusable"
           placeholder={this.placeholder}
+          readonly={this.readonly}
           ref={(el) => (this.input = el)}
           tabIndex={this.ldTabindex}
           type={this.type}

diff --git a/src/liquid/components/ld-link/ld-link.css b/src/liquid/components/ld-link/ld-link.css
@@ -15,7 +15,7 @@
   text-decoration: none;
   touch-action: manipulation;
 
-  &:not([aria-disabled='true']) {
+  &:not([aria-disabled]:not([aria-disabled='false'])) {
     &:hover {
       --ld-link-col: var(--ld-thm-primary-hover);
     }
@@ -29,7 +29,7 @@
     }
   }
 
-  &:where([aria-disabled='true']) {
+  &:where([aria-disabled]:not([aria-disabled='false'])) {
     --ld-link-col: var(--ld-thm-primary);
     cursor: default;
     opacity: 0.3;

diff --git a/src/liquid/components/ld-radio/ld-radio.css b/src/liquid/components/ld-radio/ld-radio.css
@@ -59,7 +59,7 @@
     }
 
     &:where(:disabled),
-    &:where([aria-disabled='true']) {
+    &:where([aria-disabled]:not([aria-disabled='false'])) {
       ~ .ld-radio__dot {
         background-color: var(--ld-radio-disabled-col);
       }
@@ -75,7 +75,7 @@
       }
     }
 
-    &:where(:not(:disabled, [aria-disabled='true'])) {
+    &:where(:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) {
       cursor: pointer;
 
       ~ .ld-radio__dot {
@@ -131,7 +131,9 @@
     }
   }
 
-  :where(input:not(:disabled, input[aria-disabled='true'])) {
+  :where(
+      input:not(:disabled, input[aria-disabled]:not([aria-disabled='false']))
+    ) {
     ~ .ld-radio__box {
       background-color: var(--ld-radio-bg-col);
     }
@@ -160,7 +162,11 @@
 .ld-radio.ld-radio--dark,
 :host(.ld-radio.ld-radio--dark) {
   :where(input) {
-    &:not(:disabled, input[aria-disabled='true'], :checked) {
+    &:not(
+        :disabled,
+        input[aria-disabled]:not([aria-disabled='false']),
+        :checked
+      ) {
       ~ .ld-radio__box {
         background-color: var(--ld-radio-dark-bg-col);
       }

diff --git a/src/liquid/components/ld-select/ld-optgroup-internal/ld-optgroup-internal.shadow.css b/src/liquid/components/ld-select/ld-optgroup-internal/ld-optgroup-internal.shadow.css
@@ -83,11 +83,11 @@
     }
   }
 
-  &:not([aria-disabled='true']) {
+  &:not([aria-disabled]:not([aria-disabled='false'])) {
     cursor: pointer;
   }
 
-  &[aria-disabled='true'] {
+  &[aria-disabled]:not([aria-disabled='false']) {
     color: var(--ld-optgroup-disabled-text-col);
   }
 
@@ -110,7 +110,12 @@
     }
   }
 
-  &:where(:not(.ld-optgroup-internal--disabled, [aria-disabled='true'])) {
+  &:where(
+      :not(
+          .ld-optgroup-internal--disabled,
+          [aria-disabled]:not([aria-disabled='false'])
+        )
+    ) {
     :where(.ld-optgroup-internal__check) {
       color: var(--ld-optgroup-thm-col);
     }

diff --git a/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.shadow.css b/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.shadow.css
@@ -82,11 +82,11 @@
     }
   }
 
-  &:not([aria-disabled='true']) {
+  &:not([aria-disabled]:not([aria-disabled='false'])) {
     cursor: pointer;
   }
 
-  &[aria-disabled='true'] {
+  &[aria-disabled]:not([aria-disabled='false']) {
     color: var(--ld-option-disabled-text-col);
   }
 
@@ -112,7 +112,7 @@
     }
   }
 
-  &:where(:not([aria-disabled='true'])) {
+  &:where(:not([aria-disabled]:not([aria-disabled='false']))) {
     :where(.ld-option-internal__check) {
       color: var(--ld-option-thm-col);
     }