fix: checkbox accessibility

ForkbombEu · Dec 23, 2024 · c7b262e · c7b262e
1 parent 72ea3f2
commit c7b262e
Show file tree

Hide file tree

Showing 5 changed files with 715 additions and 36 deletions.
diff --git a/src/components/activity-card/readme.md b/src/components/activity-card/readme.md
@@ -11,6 +11,7 @@
 | ------------- | ------------- | ----------- | --------- | ----------- |
 | `date`        | `date`        |             | `string`  | `undefined` |
 | `description` | `description` |             | `string`  | `undefined` |
+| `href`        | `href`        |             | `string`  | `undefined` |
 | `logo`        | `logo`        |             | `string`  | `undefined` |
 | `message`     | `message`     |             | `string`  | `undefined` |
 | `read`        | `read`        |             | `boolean` | `false`     |

diff --git a/src/components/checkbox/d-checkbox.css b/src/components/checkbox/d-checkbox.css
@@ -1,3 +1,15 @@
 :host {
   display: block;
+
 }
+ion-checkbox {
+  --checkbox-background: var(--on-alt);
+  --size: 48px;
+  --checkbox-background-checked: var(--accent)
+}
+ion-checkbox::part(container) {
+  border-radius: 0;
+  border: 2px solid;
+  border-color: var(--highlight);
+  --checkmark-color: var(--stroke);
+}
diff --git a/src/components/checkbox/d-checkbox.tsx b/src/components/checkbox/d-checkbox.tsx
@@ -18,7 +18,7 @@ export class DCheckbox {
     return (
       <Host>
         <d-vertical-stack>
-          <d-horizontal-stack>
+          <d-horizontal-stack class="items-center">
             <ion-checkbox onIonChange={e => this.updateValue(e.detail.checked)} checked={this.checked}></ion-checkbox>
             <div>
               <slot />

diff --git a/src/components/checkbox/test/d-checkbox.spec.tsx b/src/components/checkbox/test/d-checkbox.spec.tsx
@@ -11,7 +11,7 @@ describe('d-checkbox', () => {
       <d-checkbox>
         <mock:shadow-root>
           <d-vertical-stack>
-           <d-horizontal-stack>
+           <d-horizontal-stack class="items-center">
              <ion-checkbox></ion-checkbox>
              <div>
                <slot></slot>