From c8e534de0b46c33417da4fa125f667085ca3a17d Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Wed, 26 Jun 2024 16:29:31 -0400 Subject: [PATCH 1/6] Add `aria-invalid` to `` due to issue with `` (#149) * add aria-invalid to readonly input * add comments about select.ts * prettier * prettier --- src/components/select/select.ts | 5 +++++ src/internal/webawesome-element.ts | 8 +++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 8bae8cd59..4e764c36d 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -836,10 +836,15 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { placeholder=${this.placeholder} .disabled=${this.disabled} .value=${this.displayLabel} + ?required=${this.required} autocomplete="off" spellcheck="false" autocapitalize="off" readonly + aria-invalid=${ + !this.validity.valid + /** aria-invalid is required because readonly inputs are technically always valid so it never reads 'invalid data' for screen readers. */ + } aria-controls="listbox" aria-expanded=${this.open ? 'true' : 'false'} aria-haspopup="listbox" diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts index 361f39896..50ce2629b 100644 --- a/src/internal/webawesome-element.ts +++ b/src/internal/webawesome-element.ts @@ -109,8 +109,8 @@ export class WebAwesomeFormAssociatedElement validators: Validator[] = []; // Should these be private? - @property({ state: true }) valueHasChanged: boolean = false; - @property({ state: true }) hasInteracted: boolean = false; + @property({ state: true, attribute: false }) valueHasChanged: boolean = false; + @property({ state: true, attribute: false }) hasInteracted: boolean = false; // This works around a limitation in Safari. It is a hacky way for us to preserve custom errors generated by the user. @property({ attribute: 'custom-error', reflect: true }) customError: string | null = null; @@ -227,6 +227,7 @@ export class WebAwesomeFormAssociatedElement return this.internals.form; } + @property({ attribute: false, state: true, type: Object }) get validity() { return this.internals.validity; } @@ -269,7 +270,7 @@ export class WebAwesomeFormAssociatedElement } this.internals.setValidity(flags, message, anchor || undefined); - + this.requestUpdate('validity'); this.setCustomStates(); } @@ -360,6 +361,7 @@ export class WebAwesomeFormAssociatedElement !this.willValidate // ) { this.resetValidity(); + return; } From c4d5e9d2f06433c80a7eaabb56c515ea1c959c69 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 27 Jun 2024 11:59:09 -0400 Subject: [PATCH 2/6] fixing appearance='text' selectors in depth styling --- src/themes/depth_2_chunky.css | 2 +- src/themes/depth_3_punchy.css | 2 +- src/themes/depth_4_glossy.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/themes/depth_2_chunky.css b/src/themes/depth_2_chunky.css index 756f4c204..445da153a 100644 --- a/src/themes/depth_2_chunky.css +++ b/src/themes/depth_2_chunky.css @@ -45,7 +45,7 @@ wa-button { --wa-transition-normal: 0ms; --wa-transition-fast: 0ms; - &:not([variant='text']) { + &:not([appearance='text']) { --box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--box-shadow-color); margin-bottom: var(--wa-shadow-offset-y-s); diff --git a/src/themes/depth_3_punchy.css b/src/themes/depth_3_punchy.css index 92253784f..67d109d28 100644 --- a/src/themes/depth_3_punchy.css +++ b/src/themes/depth_3_punchy.css @@ -40,7 +40,7 @@ } /* #region Buttons */ -wa-button:not([variant='text']) { +wa-button:not([appearance='text']) { --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */, inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */, inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */; diff --git a/src/themes/depth_4_glossy.css b/src/themes/depth_4_glossy.css index b0e60a2e3..5c6bd1e34 100644 --- a/src/themes/depth_4_glossy.css +++ b/src/themes/depth_4_glossy.css @@ -97,7 +97,7 @@ /* #endregion */ /* #region Buttons */ -wa-button:not([variant='text']) { +wa-button:not([appearance='text']) { --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */, inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */, inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */, inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */, From 1569d10d4b4457ee47151020b0b966eac63b0e52 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 27 Jun 2024 11:59:22 -0400 Subject: [PATCH 3/6] fixing appearance='text' selector in fa.css theme --- src/themes/fa.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/themes/fa.css b/src/themes/fa.css index 130db5ff2..06827c6da 100644 --- a/src/themes/fa.css +++ b/src/themes/fa.css @@ -510,7 +510,7 @@ } } - wa-button:not([variant='text']) { + wa-button:not([appearance='text']) { --border-color: var(--label-color); --border-color-hover: var(--border-color); --border-color-active: var(--border-color); From 5969d4cbdb354821b61289615c5d0f1ffad70fb8 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Mon, 1 Jul 2024 16:05:10 -0400 Subject: [PATCH 4/6] Add copy-button to swatches, and fix min / maxlength on input (#152) * add test for min / maxlength * prettier * fix accessibility issue in tab group * add changelog entry gp * fix swatches for things that dont have background colors --- docs/docs/form-controls.md | 2 +- docs/docs/resources/changelog.md | 2 + docs/docs/theming/color.md | 97 +++++++++++++++++++++------ src/components/input/input.test.ts | 34 ++++++++++ src/components/tab-group/tab-group.ts | 3 +- src/internal/webawesome-element.ts | 4 -- 6 files changed, 116 insertions(+), 26 deletions(-) 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/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/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts index 009697368..5e3e8f509 100644 --- a/src/components/tab-group/tab-group.ts +++ b/src/components/tab-group/tab-group.ts @@ -393,7 +393,8 @@ export default class WaTabGroup extends WebAwesomeElement { ` : ''} -
+ +
this.activeTab?.focus({ preventScroll: true })}>
diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts index 50ce2629b..4d2a2f988 100644 --- a/src/internal/webawesome-element.ts +++ b/src/internal/webawesome-element.ts @@ -175,10 +175,6 @@ export class WebAwesomeFormAssociatedElement this.valueHasChanged = true; } - if (this.input) { - this.input.value = this.value; - } - const value = this.value; // Accounts for the snowflake case on `` From f6dd3d383d9ef95e03580bc1e2a1cb7601ab1956 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Wed, 3 Jul 2024 11:25:17 -0400 Subject: [PATCH 5/6] Copy button fixes (#154) * copy / tooltip fixeS * revert tooltip --- src/components/copy-button/copy-button.ts | 3 +++ 1 file changed, 3 insertions(+) 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} From 5ac40d728c73e73bb2879006d80e9295ea21473a Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Wed, 3 Jul 2024 11:25:30 -0400 Subject: [PATCH 6/6] fix radio group reaidng number of radios in chrome (#153) --- src/components/radio-group/radio-group.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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} -
+