Merge pull request #242 from US-CBP/feature/table-iteration2

Feature/table iteration2

Author: dgibson666

packages/web-components/src/components/cbp-button/cbp-button.scss

@@ -109,6 +109,8 @@
 
 cbp-button {
   display: inline-block;
+  width: var(--cbp-button-width);
+  height: var(--cbp-button-height);
 
   button, a {
     display: inline-flex;

packages/web-components/src/components/cbp-button/cbp-button.tsx

@@ -86,29 +86,32 @@ export class CbpButton {
 
 
   /** A custom event emitted when the click event occurs for either a rendered button or anchor/link. */
-  @Event() buttonClick!: EventEmitter;
+  @Event() buttonClick: EventEmitter;
 
   /** A custom event emitted when the component has completed loading and its internal lifecycles. */
-  @Event() componentLoad!: EventEmitter;
+  @Event() componentLoad: EventEmitter;
 
 
-  handleClick() {
+  handleClick(e): void {
     // If this is a control for something, manage state through stencil store
     if (this.controls) {
       // If the controlled element wasn't found, try to find it again
       if (!this.controlTarget) {
         this.controlTarget = this.controls ? document.querySelector(`#${this.controls}`) : undefined;
       }
+      // Toggle the prop it controls
       if (this.controlTarget) {
         this.controlTarget[this.targetProp] = !this.controlTarget[this.targetProp];
-      } else {
+      } 
+      else {
         console.warn('cbp-button configuration error: the control target referenced by ID by the `control` property could not be found.');
       }
     }
 
     this.buttonClick?.emit({
       host: this.host,
       nativeElement: this.button,
+      nativeEvent: e,
       controls: this.controls ? this.controls : null,
       pressed: this.pressed,
       expanded: this.expanded,
@@ -189,14 +192,14 @@ export class CbpButton {
 
     if (this.host.querySelector('[slot=cbp-button-custom]')) {
       return (
-        <Host>
+        <Host onClick={(e) => this.handleClick(e)}>
           <slot name="cbp-button-custom" />
         </Host>
       );
     } 
     else if (this.tag === 'button') {
       return (
-        <Host>
+        <Host onClick={(e) => this.handleClick(e)}>
           <button
             {...this.persistedAttrs}
             {...attrs}
@@ -205,7 +208,7 @@ export class CbpButton {
             aria-pressed={pressed ? 'true' : null}
             aria-expanded={expanded ? 'true' : null}
             aria-controls={this.controls}
-            onClick={() => this.handleClick()}
+            //onClick={() => this.handleClick()}
             ref={el => (this.button = el)}
           >
             <slot />
@@ -215,7 +218,7 @@ export class CbpButton {
     } 
     else {
       return (
-        <Host>
+        <Host onClick={(e) => this.handleClick(e)}>
           <a
             {...this.persistedAttrs}
             {...attrs}
@@ -226,7 +229,7 @@ export class CbpButton {
             aria-controls={this.controls}
             role={disabled ? 'link' : null}
             aria-disabled={disabled ? 'true' : null}
-            onClick={() => this.handleClick()}
+            //onClick={() => this.handleClick()}
             ref={el => (this.button = el)}
           >
             <slot />

packages/web-components/src/components/cbp-checkbox/cbp-checkbox.specs.mdx

@@ -22,7 +22,7 @@ The Checkbox component wraps the slotted native form control (`input type="check
 * The user interactions are that of a native checkbox (`input type="checkbox"`) element:
   * Clicking anywhere on the form control or label text will place focus on the control and toggle its state.
   * Checkboxes are keyboard accessible by tabbing onto them in either direction, placing focus onto the native form control.
-  * Pressing the spacebar will toggle the focused checkbox state, also emitting a custom event.
+  * Pressing the Spacebar will toggle the focused checkbox state, also emitting a custom event.
 
 ### Responsiveness
 
@@ -31,7 +31,9 @@ The Checkbox component wraps the slotted native form control (`input type="check
 
 ### Accessibility
 
-* The native checkbox (`input type="checkbox"`) element and label text are wrapped within a `label` tag, forming an implicit label association (no `id` needed).
+* The native checkbox (`input type="checkbox"`) element and label text are wrapped within a `label` tag.
+  * Additionally, if the slotted input has an `id` attribute, the checkbox component will use it to associate the `label` and `input` elements explicitly (implicit association does not work with voice software).
+  * If the slotted input does not have an `id` specified, the component will generate an `id` to apply to the slotted input and make the explicit association with the label.
 * Full keyboard navigation is supported, as detailed under "User Interactions" above.
 
 ### Additional Notes and Considerations

packages/web-components/src/components/cbp-radio/cbp-radio.specs.mdx

@@ -32,7 +32,9 @@ The Radio component wraps the slotted native form control (`input type="radio"`)
 
 ### Accessibility
 
-* The native radio button (`input type="radio"`) element and label text are wrapped within a `label` tag, forming an implicit label association (no `id` needed).
+* The native radio button (`input type="radio"`) element and label text are wrapped within a `label` tag.
+  * Additionally, if the slotted input has an `id` attribute, the radio component will use it to associate the `label` and `input` elements explicitly (implicit association does not work with voice software).
+  * If the slotted input does not have an `id` specified, the component will generate an `id` to apply to the slotted input and make the explicit association with the label.
 * Full keyboard navigation is supported, as detailed under "User Interactions" above.
 
 ### Additional Notes and Considerations

packages/web-components/src/components/cbp-radio/cbp-radio.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Prop, Event, EventEmitter, Watch, Host, h } from '@stencil/core';
-import { setCSSProps} from '../../utils/utils';
+import { setCSSProps, createNamespaceKey } from '../../utils/utils';
 
 
 /**
@@ -21,6 +21,9 @@ export class CbpRadio {
   /** Optionally set the `value` attribute of the radio button at the component level. Not needed if the slotted radio button has a value. */
   @Prop() value: string;
 
+  /** Optionally specify the ID of the checkbox input here, which is used to generate related pattern node IDs and associate everything for accessibility */
+  @Prop({ mutable: true }) fieldId: string = createNamespaceKey('cbp-radio');
+
   /** Marks the radio button as checked by default when specified. */
   @Prop() checked: boolean;
 
@@ -69,6 +72,8 @@ export class CbpRadio {
     this.formField = this.host.querySelector('input[type=radio]');
 
     if (this.formField) {
+      const radioId = this.formField.getAttribute('id');
+      radioId ? this.fieldId = radioId : this.formField.setAttribute('id', this.fieldId);
       this.formField.addEventListener('change', () => this.handleChange());
     }
   }
@@ -86,7 +91,7 @@ export class CbpRadio {
   render() {
     return (
       <Host>
-        <label>
+        <label htmlFor={this.fieldId}>
           <slot />
         </label>
       </Host>