diff --git a/docs/docs/form-controls.md b/docs/docs/form-controls.md index fd3aafcc9..9db42078e 100644 --- a/docs/docs/form-controls.md +++ b/docs/docs/form-controls.md @@ -176,4 +176,4 @@ These attributes map to the browser's built-in pseudo classes for validation: [` :::info In the future, data attribute selectors will be replaced with custom states such as `:state(valid)` and `:state(invalid)`. Web Awesome is using data attributes as a workaround until browsers fully support [custom states](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states). -::: +::: \ No newline at end of file diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index 737ae5214..5e4150711 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -15,6 +15,8 @@ During the alpha period, things might break! We take breaking changes very serio ## Next - Fixed a bug where `` would announce the full time instead of the relative time in screen readers [#22](https://github.com/shoelace-style/webawesome-alpha/issues/22) +- Fixed a bug in `` in Firefox where the overflow container would keep focus. [#14](https://github.com/shoelace-style/webawesome-alpha/issues/14) +- Fixed a bug in `` where `minlength` and `maxlength` were not being properly validated. [#35](https://github.com/shoelace-style/webawesome-alpha/issues/35) ## 1.0.0-alpha.1 diff --git a/docs/docs/theming/color.md b/docs/docs/theming/color.md index 196ef4beb..8faa41b44 100644 --- a/docs/docs/theming/color.md +++ b/docs/docs/theming/color.md @@ -5,6 +5,8 @@ layout: page-outline --- @@ -422,13 +424,13 @@ Text colors are used for standard text elements. We recommend a minimum 4.5:1 co | Custom Property | Preview | | ------------------------ | ---------------------------------------------------------- | -| `--wa-color-text-normal` |
AaBb
| -| `--wa-color-text-quiet` |
AaBb
| -| `--wa-color-text-link` |
AaBb
| +| `--wa-color-text-normal` |
AaBb
| +| `--wa-color-text-quiet` |
AaBb
| +| `--wa-color-text-link` |
AaBb
| ### Overlays -Overlays provide a backdrop to isolate content, often allowing background context to show through. +Overlays provide a backdrop to isolate content, often allowing background context to show through. | Custom Property | Preview | | --------------------------- | ----------------------------------------------------------------------------------- | @@ -451,7 +453,7 @@ Web Awesome uses a single focus color for predictable keyboard navigation. This | Custom Property | Preview | | ------------------ | ----------------------------------------------------------------------------------------------------------------------- | -| `--wa-color-focus` |
| +| `--wa-color-focus` |
| #### Hover and Active @@ -459,8 +461,8 @@ Web Awesome leverages `color-mix()` to achieve consistent hover and active state | Custom Property | Preview | | ----------------------- | ---------------------------------------------------------------------------------------------------------------- | -| `--wa-color-mix-hover` |
mixed
| -| `--wa-color-mix-active` |
mixed
| +| `--wa-color-mix-hover` |
mixed
| +| `--wa-color-mix-active` |
mixed
| ## Semantic Colors @@ -487,9 +489,64 @@ Finally, each color is named according to how much attention it draws. Here, we | `--wa-color-*-fill-quiet` |
|
|
|
|
| | `--wa-color-*-fill-normal` |
|
|
|
|
| | `--wa-color-*-fill-loud` |
|
|
|
|
| -| `--wa-color-*-border-quiet` |
|
|
|
|
| -| `--wa-color-*-border-normal` |
|
|
|
|
| -| `--wa-color-*-border-loud` |
|
|
|
|
| -| `--wa-color-*-on-quiet` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| -| `--wa-color-*-on-normal` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| -| `--wa-color-*-on-loud` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| \ No newline at end of file +| `--wa-color-*-border-quiet` |
|
|
|
|
| +| `--wa-color-*-border-normal` |
|
|
|
|
| +| `--wa-color-*-border-loud` |
|
|
|
|
| +| `--wa-color-*-on-quiet` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| +| `--wa-color-*-on-normal` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| +| `--wa-color-*-on-loud` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| + + + + \ No newline at end of file diff --git a/src/components/copy-button/copy-button.ts b/src/components/copy-button/copy-button.ts index 10ca2cede..b8aa862c5 100644 --- a/src/components/copy-button/copy-button.ts +++ b/src/components/copy-button/copy-button.ts @@ -1,5 +1,6 @@ import '../icon/icon.js'; import '../tooltip/tooltip.js'; +import '../visually-hidden/visually-hidden.js'; import { animateWithClass } from '../../internal/animate.js'; import { classMap } from 'lit/directives/class-map.js'; import { customElement, property, query, state } from 'lit/decorators.js'; @@ -201,6 +202,8 @@ export default class WaCopyButton extends WebAwesomeElement { ?disabled=${this.disabled} @click=${this.handleCopy} > + + ${this.currentLabel} diff --git a/src/components/input/input.test.ts b/src/components/input/input.test.ts index fbc66afea..2455118d2 100644 --- a/src/components/input/input.test.ts +++ b/src/components/input/input.test.ts @@ -498,5 +498,39 @@ describe('', async () => { expect(el.checkValidity()).to.be.true; }); + it('Should be invalid if minlength is not met', async () => { + const el = await fixture(html` `); + + el.input.focus(); + await el.updateComplete; + expect(el.checkValidity()).to.be.false; + + await sendKeys({ type: '12' }); + await el.updateComplete; + await aTimeout(10); + + expect(el.checkValidity()).to.be.false; + expect(el.validity.tooShort).to.be.true; + }); + + it('Should be invalid if maxlength is not met', async () => { + const el = await fixture(html` `); + + await el.updateComplete; + + // There's a fun problem around programmaticly setting values and default values from attributes. + // The TLDR is this input is valid, until the user starts typing. + expect(el.checkValidity()).to.be.true; + + el.input.focus(); + await sendKeys({ press: 'ArrowRight' }); + await sendKeys({ press: 'Backspace' }); + await el.updateComplete; + await aTimeout(10); + + expect(el.checkValidity()).to.be.false; + expect(el.validity.tooLong).to.be.true; + }); + await runFormControlBaseTests('wa-input'); }); diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index 81c0837a9..c262aadfa 100644 --- a/src/components/radio-group/radio-group.ts +++ b/src/components/radio-group/radio-group.ts @@ -302,7 +302,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement { ${this.label} -
+