Components: Use ally.js for first tabbable selection

components/popover/index.js

@@ -3,12 +3,12 @@
  */
 import classnames from 'classnames';
 import { isEqual, noop } from 'lodash';
+import queryFirstTabbable from 'ally.js/esm/query/first-tabbable';
 
 /**
  * WordPress dependencies
  */
 import { createPortal, Component } from '@wordpress/element';
-import { focus } from '@wordpress/utils';
 
 /**
  * Internal dependencies
@@ -87,9 +87,10 @@ export class Popover extends Component {
 	}
 
 	focus() {
-		const firstFocusable = focus.findFocusable( this.nodes.content );
-		if ( firstFocusable ) {
-			firstFocusable.focus();
+		const context = this.nodes.content;
+		const firstTabbable = queryFirstTabbable( { context } );
+		if ( firstTabbable ) {
+			firstTabbable.focus();
 		}
 	}
 

package.json

@@ -12,6 +12,7 @@
   ],
   "dependencies": {
     "@wordpress/url": "0.1.0-beta.1",
+    "ally.js": "^1.4.1",
     "classnames": "^2.2.5",
     "clipboard": "^1.7.1",
     "dom-react": "^2.2.0",

utils/index.js

@@ -1,8 +1,6 @@
-import * as focus from './focus';
 import * as keycodes from './keycodes';
 import * as nodetypes from './nodetypes';
 
-export { focus };
 export { keycodes };
 export { nodetypes };