@vaadin/button
Advanced tools
Comparing version 23.1.0-alpha1 to 23.1.0-alpha2
{ | ||
"name": "@vaadin/button", | ||
"version": "23.1.0-alpha1", | ||
"version": "23.1.0-alpha2", | ||
"publishConfig": { | ||
@@ -35,7 +35,8 @@ "access": "public" | ||
"dependencies": { | ||
"@open-wc/dedupe-mixin": "^1.3.0", | ||
"@polymer/polymer": "^3.0.0", | ||
"@vaadin/component-base": "23.1.0-alpha1", | ||
"@vaadin/vaadin-lumo-styles": "23.1.0-alpha1", | ||
"@vaadin/vaadin-material-styles": "23.1.0-alpha1", | ||
"@vaadin/vaadin-themable-mixin": "23.1.0-alpha1" | ||
"@vaadin/component-base": "23.1.0-alpha2", | ||
"@vaadin/vaadin-lumo-styles": "23.1.0-alpha2", | ||
"@vaadin/vaadin-material-styles": "23.1.0-alpha2", | ||
"@vaadin/vaadin-themable-mixin": "23.1.0-alpha2" | ||
}, | ||
@@ -47,3 +48,3 @@ "devDependencies": { | ||
}, | ||
"gitHead": "5d0cdee069f866037c507265fafb4d0476795333" | ||
"gitHead": "6842dcb8b163d4512fae8d3d12a6559077a4aee6" | ||
} |
@@ -6,7 +6,5 @@ /** | ||
*/ | ||
import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js'; | ||
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; | ||
import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js'; | ||
import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js'; | ||
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
import { ButtonMixin } from './vaadin-button-mixin.js'; | ||
@@ -41,3 +39,3 @@ /** | ||
*/ | ||
declare class Button extends ActiveMixin(TabindexMixin(FocusMixin(ElementMixin(ThemableMixin(HTMLElement))))) {} | ||
declare class Button extends ButtonMixin(ElementMixin(ThemableMixin(HTMLElement))) {} | ||
@@ -44,0 +42,0 @@ declare global { |
@@ -7,7 +7,5 @@ /** | ||
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js'; | ||
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; | ||
import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js'; | ||
import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js'; | ||
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
import { ButtonMixin } from './vaadin-button-mixin.js'; | ||
@@ -43,9 +41,7 @@ /** | ||
* @extends HTMLElement | ||
* @mixes ActiveMixin | ||
* @mixes TabindexMixin | ||
* @mixes FocusMixin | ||
* @mixes ButtonMixin | ||
* @mixes ElementMixin | ||
* @mixes ThemableMixin | ||
*/ | ||
class Button extends ActiveMixin(TabindexMixin(FocusMixin(ElementMixin(ThemableMixin(PolymerElement))))) { | ||
class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolymerElement))) { | ||
static get is() { | ||
@@ -90,6 +86,2 @@ return 'vaadin-button'; | ||
text-shadow: inherit; | ||
background: transparent; | ||
padding: 0; | ||
border: none; | ||
box-shadow: none; | ||
} | ||
@@ -121,52 +113,2 @@ | ||
} | ||
/** | ||
* By default, `Space` is the only possible activation key for a focusable HTML element. | ||
* Nonetheless, the button is an exception as it can be also activated by pressing `Enter`. | ||
* See the "Keyboard Support" section in https://www.w3.org/TR/wai-aria-practices/examples/button/button.html. | ||
* | ||
* @protected | ||
* @override | ||
*/ | ||
get _activeKeys() { | ||
return ['Enter', ' ']; | ||
} | ||
/** @protected */ | ||
ready() { | ||
super.ready(); | ||
// By default, if the user hasn't provided a custom role, | ||
// the role attribute is set to "button". | ||
if (!this.hasAttribute('role')) { | ||
this.setAttribute('role', 'button'); | ||
} | ||
} | ||
/** | ||
* Since the button component is designed on the base of the `[role=button]` attribute, | ||
* and doesn't have a native <button> inside, in order to be fully accessible from the keyboard, | ||
* it should manually fire the `click` event once an activation key is pressed, | ||
* as it follows from the WAI-ARIA specifications: | ||
* https://www.w3.org/TR/wai-aria-practices-1.1/#button | ||
* | ||
* According to the UI Events specifications, | ||
* the `click` event should be fired exactly on `keydown`: | ||
* https://www.w3.org/TR/uievents/#event-type-keydown | ||
* | ||
* @param {KeyboardEvent} event | ||
* @protected | ||
* @override | ||
*/ | ||
_onKeyDown(event) { | ||
super._onKeyDown(event); | ||
if (this._activeKeys.includes(event.key)) { | ||
event.preventDefault(); | ||
// `DisabledMixin` overrides the standard `click()` method | ||
// so that it doesn't fire the `click` event when the element is disabled. | ||
this.click(); | ||
} | ||
} | ||
} | ||
@@ -173,0 +115,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
33233
13
612
6
+ Added@open-wc/dedupe-mixin@^1.3.0
+ Added@vaadin/component-base@23.1.0-alpha2(transitive)
+ Added@vaadin/icon@23.1.0-alpha2(transitive)
+ Added@vaadin/vaadin-lumo-styles@23.1.0-alpha2(transitive)
+ Added@vaadin/vaadin-material-styles@23.1.0-alpha2(transitive)
+ Added@vaadin/vaadin-themable-mixin@23.1.0-alpha2(transitive)
- Removed@vaadin/component-base@23.1.0-alpha1(transitive)
- Removed@vaadin/icon@23.1.0-alpha1(transitive)
- Removed@vaadin/vaadin-lumo-styles@23.1.0-alpha1(transitive)
- Removed@vaadin/vaadin-material-styles@23.1.0-alpha1(transitive)
- Removed@vaadin/vaadin-themable-mixin@23.1.0-alpha1(transitive)