brightspaceui / text-input Goto Github PK

https://github.com/BrightspaceUI/text-input/blob/master/d2l-text-input.html#L65

input:invalid,
input[aria-invlid='true'] {
	border-color: var(--d2l-color-cinnabar);
}

Button elements have a default type value of "submit", which will automatically submit a parent form when the user hits enter. This is typically not desired behaviour.

To prevent this, lets default the "type" attribute to "button".

This will be a breaking change, so will require a major version bump.

Both aria-labelledby and aria-describedby won't work with web components and shadow DOM, because the IDs of those elements are out of scope.

2 potential solutions:

1. Wrap the custom element in a label:

<d2l-label text="label for input">
    <d2l-text-input></d2l-text-input>
</d2l-label>

Not sure that'll work, but if inside <d2l-label> it renders an actual <label> element, it might.

2. Make the label part of this component

Like this: <d2l-text-input label="label for input">. We'd then need to handle various different kinds of labels eventually -- above, beside, etc. Probably needs more thought around how this can be shared across many different kinds of inputs.

@dbatiste @pbrown-d2l

https://github.com/BrightspaceUI/text-input/blob/master/d2l-text-input.html#L245

/**
 * Value of the input.
 */
value: {
	type: String
}