heybran / cucumber-components Goto Github PK

Based on this guide: https://design-system.service.gov.uk/components/text-input/#hint-text, it makes more sense to user if helper-text is placed directly after label.

At the moment, closing dialog should set focus back to the button that opens the dialog. At the moment, only pressing ESC key do that as that is browser default behavior. Need to update other elements to do same.

button/variants

button element needs a aria-hidden=true when cc-side-nav component does not have toggle behavior.

Element Location: cc-header,cc-side-nav,button[aria-controls="children"]

<button part="label" aria-controls="children">
  <slot name="label"></slot>
  <span part="toggle-icon" aria-hidden="true">
    <cc-icon icon="chevron-down"></cc-icon>
  </span>
</button>

popover-wrapper.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at t.connectedCallback (popover-wrapper.js:2:155)
    at Header.render (header.js?t=1701399706555:13:31)
    at Header.connectedCallback (header.js?t=1701399706555:8:10)
    at CucumberRouter._onChanged (index.js:118:17)
    at CucumberRouter.start (index.js:62:10)
    at main.js?t=1701399706555:139:8

this.trigger.addEventListener("click",this.handleTriggerClick.bind(this))

Add a getSlot() helper function to reduce boilerplate codes, something like:

attributeChangedCallback(attr, oldValue, newValue) {
  if (attr === 'label') {
    this.shadowRoot.querySelector('slot[name="title"]').textContent = this.getAttribute('label');
  }
}

this.getSlot('title').doSomething();

or

this.slots('title').doSomething();

Uncaught (in promise) Error: Missing 'cc-option' inside 'cc-select'

This was a bug caused by how I implement the cc-select component, depending on when browser define these two components.

Clicking into another form control field, should not focus back onto cc-select component.

Do it as dynamic import so extra codes won't be loaded for standard component?

If visit https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date on safari (Version 16.4 (18615.1.26.110.1)), it does not render a user agent calendar icon like Chrome where you can click to open the date picker modal. As a result, the cc-button to open date picker modal is not working on Safari.

  <div part="input-container">
    <slot name="prefix"></slot>
    <input id="input" part="input" type="date" aria-describedby="helper-text">
    <slot name="suffix">
      <cc-button 
        slot="suffix" 
        theme="square borderless"
        onclick="this.getRootNode().host.showPicker();"
      >
        <cc-icon label="Show date picker" icon="calendar"></cc-icon>
      </cc-button>
    </slot>
  </div>

Even if it's working, the date picker modal on Safari is soooo tiny, now I understand why I always see JavaScript date picker on websites.

If I submit the form with an invalid date value, e.g. 2023 /yy/dd with only year populated, component shows native validation error to user which is correct. But, after entering correct date value, submitting the form still reports error.

When working on a php side project, I'm opening the same dialog but with different content, would be nice to have a afterHide() so users can add a callback.

   <td>
      <cc-button 
        theme="primary" 
        onclick="showDialog(this, 'Message');"
       >View</cc-button>
       <p hidden><?php echo $item['message']['S'] ?></p>
    </td>
    <script>
      function showDialog(button, label) {
        const p = button.nextElementSibling;
        const dialog = document.querySelector('cc-dialog');
        const message = document.createElement('p');
        message.textContent = p.textContent;
        dialog.setAttribute('label', label);
        dialog.prepend(message);
        dialog.show();
        // dialog.afterHide(() => {
        //   message.remove();
        // });
      }
    </script>
    <cc-dialog>
      <cc-button slot="footer-actions-right">Close</cc-button>
    </cc-dialog>

Alert component includes cc-button and cc-icon but alert.js file didn't import those two components.

<div part="container" role="alert" aria-hidden="true">
	<div part="icon">
		<slot name="icon"></slot>
	</div>
	<div part="message" aria-live="polite">
		<slot></slot>
	</div>
	<div part="close">
		<cc-button theme="icon" no-border onclick="this.getRootNode().host.hide();">
			<cc-icon icon="cross" size="medium"></cc-icon>
		</cc-button>
	</div>
</div>

When cc-button is used as anchor link, button get changed to a so this fails.

get button() {
	// @ts-ignore
	return this.shadowRoot.querySelector("button");
}

This bug happens when working on Nodejs-web-components-jobs-tracker project. For markup like this, there is no form fields other than the submit button, so form.__cucumberElements is undefined.

<form method="post" onsubmit="deleteJob(event);" id="delete-job-form" data-job-id="rec_cl51trli5o087h9qivtg">
    <h2>
        You are about to delete job of https://example.com/1.
    </h2>
    <cc-button theme="primary" type="submit">Confirm</cc-button>
</form>

While reading Modal Dialog Example on WAI, cc-dialog component need to set an initial focus but which element to set the initial focus will be based on the content of the dialog.

So, maybe allowing component users to add a initial-focus attribute on the elements on lightdom to set the initial focus?

Based on Verification Result dialog from Accessibility Features of Modal Dialog Example, cc-dialog component need to support aria-describedby content that comes from light dom, since cross root aria is not supported yet, trying to copy content from light dom into shadow dom and connect dialog element to the content via aria-describedby attribute?

<cc-dialog label="Address Added" id="address-added-dialog">
    <p accessibile-description>Your address has been added succefully. If you wish to remove it, you can do so from your <a href="#">profile</a>.</p>
    <cc-button slot="footer-actions-right" theme="primary" onclick="this.parentElement.close('close');">Ok</cc-button>
</cc-dialog>