From 215c781287de8bc426cdf7d2b808c6b06f29a2d3 Mon Sep 17 00:00:00 2001 From: Alexander Marks Date: Fri, 2 Aug 2019 14:16:38 -0700 Subject: [PATCH 1/3] Use IE's msMatchesSelector when matches is not available. (#129) --- src/inert.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/inert.js b/src/inert.js index 07e5d76..e7b08e8 100644 --- a/src/inert.js +++ b/src/inert.js @@ -7,6 +7,13 @@ /** @type {typeof Array.prototype.slice} */ const slice = Array.prototype.slice; +/** + * IE has a non-standard name for "matches". + * @type {typeof Element.prototype.matches} + */ +const matches = + Element.prototype.matches || Element.prototype.msMatchesSelector; + /** @type {string} */ const _focusableElementsString = ['a[href]', 'area[href]', @@ -177,7 +184,7 @@ class InertRoot { this._adoptInertRoot(element); } - if (element.matches(_focusableElementsString) || element.hasAttribute('tabindex')) { + if (matches.call(element, _focusableElementsString) || element.hasAttribute('tabindex')) { this._manageNode(element); } } @@ -384,7 +391,7 @@ class InertNode { return; } const element = /** @type {!Element} */ (this.node); - if (element.matches(_focusableElementsString)) { + if (matches.call(element, _focusableElementsString)) { if (/** @type {!HTMLElement} */ (element).tabIndex === -1 && this.hasSavedTabIndex) { return; @@ -597,7 +604,7 @@ class InertManager { return; } const inertElements = slice.call(node.querySelectorAll('[inert]')); - if (node.matches('[inert]')) { + if (matches.call(node, '[inert]')) { inertElements.unshift(node); } inertElements.forEach(function(inertElement) { From 42c33faf7299bd88f963df4c1457d9d6a4165b67 Mon Sep 17 00:00:00 2001 From: Robert Linder <26493779+Malvoz@users.noreply.github.com> Date: Mon, 5 Aug 2019 09:46:54 +0200 Subject: [PATCH 2/3] Fix broken links (#130) * Fix broken links * Fix broken link --- explainer.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/explainer.md b/explainer.md index bc635a0..ecbfebc 100644 --- a/explainer.md +++ b/explainer.md @@ -1,9 +1,9 @@ - [Background](#background) - [Spec](#spec) * [Spec gaps](#spec-gaps) -- [The case for `inert` as a primitive](#the-case-for--inert--as-a-primitive) +- [The case for `inert` as a primitive](#the-case-for-inert-as-a-primitive) * [Use cases](#use-cases) -- [Wouldn't this be better as...](#wouldn-t-this-be-better-as) +- [Wouldn't this be better as...](#wouldnt-this-be-better-as) # Background @@ -51,7 +51,7 @@ is extremely straightforward: however it is implied by the note that `inert` causes the entire subtree of the element with the `inert` attribute to be made [_inert_](https://html.spec.whatwg.org/multipage/interaction.html#inert). The polyfill makes the assumption that the entire subtree becomes _inert_. - Furthermore, the spec is unclear as to whether the attribute applies into [shadow trees](https://dom.spec.whatwg.org/#concept-shadow-tree). - Consistency with CSS attributes and with inheriting attributes like [`aria-hidden`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden) and [`lang`](http://w3c.github.io/html/dom.html#the-lang-and-xmllang-attributes) imply that it should. + Consistency with CSS attributes and with inheriting attributes like [`aria-hidden`](https://www.w3.org/TR/wai-aria/#aria-hidden) and [`lang`](https://html.spec.whatwg.org/multipage/dom.html#the-lang-and-xml:lang-attributes) imply that it should. The polyfill assumes that it does so. - The [existing description of _inert_](https://html.spec.whatwg.org/multipage/interaction.html#inert) is not specific about where pointer events which would have been targeted to an element in an inert subtree should go. (See also: discussion on the [WHATWG pull request](https://github.com/whatwg/html/pull/1474).) @@ -63,7 +63,7 @@ The polyfill makes the assumption that the entire subtree becomes _inert_. 3. simply not fire? Consistency with `pointer-events` would suggest (ii). The polyfill uses `pointer-events: none` and so models its behaviour. -- The spec is also not explicit about whether the attribute should be [reflected](http://w3c.github.io/html/infrastructure.html#reflection). The polyfill assumes that it is. +- The spec is also not explicit about whether the attribute should be [reflected](https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes). The polyfill assumes that it is. - The spec does not explicitly state that inert content should be [hidden from assistive technology](https://www.w3.org/WAI/PF/aria-implementation/#exclude_elements2). However, typically, the HTML spec does not provide this type of information. The polyfill makes _inert_ content hidden from assistive technology (via `aria-hidden`). - The spec does not make explicit that there is no way to "un-inert" a subtree of an inert subtree. @@ -141,7 +141,7 @@ implementers may get useful functionality into the hands of developers sooner wh + Any of the use cases for [`blockingElement[s]`](https://github.com/whatwg/html/issues/897): * a modal dialog; * a focus-trapping menu; - * a [side nav](https://material.google.com/patterns/navigation-drawer.html). + * a [side nav](https://material.io/design/components/navigation-drawer.html). + A slide show or "cover flow" style carousel may have non-active items partially visible, as a preview - From 7141197b35792d670524146dca7740ae8a83b4e8 Mon Sep 17 00:00:00 2001 From: Rob Dodson Date: Fri, 16 Aug 2019 11:05:43 -0700 Subject: [PATCH 3/3] 2.1.3 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index c7c0017..416ed98 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "wicg-inert", - "version": "2.1.2", + "version": "2.1.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index db4a4f2..50ba922 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wicg-inert", - "version": "2.1.2", + "version": "2.1.3", "description": "A polyfill for the proposed inert API", "main": "dist/inert.js", "scripts": {