docs(checkbox): add group checkbox to element's demo page

Refinitiv · Oct 20, 2021 · 64684a3 · 64684a3
1 parent 9e26df5
commit 64684a3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/packages/elements/src/checkbox/__demo__/index.html b/packages/elements/src/checkbox/__demo__/index.html
@@ -11,6 +11,10 @@
       .ellipsis {
         width: 200px;
       }
+      .group {
+        display: flex;
+        flex-direction: column;
+      }
     </style>
     <script type="module">
       import '@refinitiv-ui/elements/checkbox';
@@ -24,6 +28,16 @@
       <ef-checkbox></ef-checkbox>
     </demo-block>
 
+    <demo-block header="Group Checkbox" tags="accessibility">
+      <div role="group" aria-label="sandwitch condiment" class="group">
+        <h6>Sandwich Condiments</h6>
+        <ef-checkbox>Lettuce</ef-checkbox>
+        <ef-checkbox>Tomato</ef-checkbox>
+        <ef-checkbox checked>Mustard</ef-checkbox>
+        <ef-checkbox>Sprouts</ef-checkbox>
+      </div>
+    </demo-block>
+
     <!-- TRUNCATE CHECKBOX -->
     <demo-block header="Truncate Checkbox">
       <ef-checkbox class="ellipsis">Checkbox with very long long long text</ef-checkbox>

diff --git a/packages/elements/src/checkbox/__test__/checkbox.test.js b/packages/elements/src/checkbox/__test__/checkbox.test.js
@@ -54,15 +54,11 @@ describe('checkbox/Checkbox', () => {
     });
     it('should pass a11y test when disabled', async () => {
       const el = await fixture(disabled);
-
       await expect(el).to.be.accessible();
-      await expect(el.ariaChecked).to.equal('false');
     });
     it('should pass a11y test when readonly', async () => {
       const el = await fixture(readonly);
-
       await expect(el).to.be.accessible();
-      await expect(el.ariaChecked).to.equal('false');
     });
   })