Fix FocusScope FocusManager accept node (#3227)

* Fix FocusScope FocusManager accept node

Author: snowystinger

packages/@react-aria/focus/src/FocusScope.tsx

@@ -147,10 +147,10 @@ function createFocusManagerForScope(scopeRef: React.RefObject<HTMLElement[]>): F
   return {
     focusNext(opts: FocusManagerOptions = {}) {
       let scope = scopeRef.current;
-      let {from, tabbable, wrap} = opts;
+      let {from, tabbable, wrap, accept} = opts;
       let node = from || document.activeElement;
       let sentinel = scope[0].previousElementSibling;
-      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable}, scope);
+      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable, accept}, scope);
       walker.currentNode = isElementInScope(node, scope) ? node : sentinel;
       let nextNode = walker.nextNode() as HTMLElement;
       if (!nextNode && wrap) {
@@ -164,10 +164,10 @@ function createFocusManagerForScope(scopeRef: React.RefObject<HTMLElement[]>): F
     },
     focusPrevious(opts: FocusManagerOptions = {}) {
       let scope = scopeRef.current;
-      let {from, tabbable, wrap} = opts;
+      let {from, tabbable, wrap, accept} = opts;
       let node = from || document.activeElement;
       let sentinel = scope[scope.length - 1].nextElementSibling;
-      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable}, scope);
+      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable, accept}, scope);
       walker.currentNode = isElementInScope(node, scope) ? node : sentinel;
       let previousNode = walker.previousNode() as HTMLElement;
       if (!previousNode && wrap) {
@@ -181,8 +181,8 @@ function createFocusManagerForScope(scopeRef: React.RefObject<HTMLElement[]>): F
     },
     focusFirst(opts = {}) {
       let scope = scopeRef.current;
-      let {tabbable} = opts;
-      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable}, scope);
+      let {tabbable, accept} = opts;
+      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable, accept}, scope);
       walker.currentNode = scope[0].previousElementSibling;
       let nextNode = walker.nextNode() as HTMLElement;
       if (nextNode) {
@@ -192,8 +192,8 @@ function createFocusManagerForScope(scopeRef: React.RefObject<HTMLElement[]>): F
     },
     focusLast(opts = {}) {
       let scope = scopeRef.current;
-      let {tabbable} = opts;
-      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable}, scope);
+      let {tabbable, accept} = opts;
+      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable, accept}, scope);
       walker.currentNode = scope[scope.length - 1].nextElementSibling;
       let previousNode = walker.previousNode() as HTMLElement;
       if (previousNode) {

packages/@react-aria/focus/test/FocusScope.test.js

@@ -779,6 +779,42 @@ describe('FocusScope', function () {
       expect(document.activeElement).toBe(item2);
     });
 
+    it('should move focus forward and allow users to skip certain elements', function () {
+      function Test() {
+        return (
+          <FocusScope>
+            <Item data-testid="item1" />
+            <Item data-testid="item2" data-skip />
+            <Item data-testid="item3" />
+          </FocusScope>
+        );
+      }
+
+      function Item(props) {
+        let focusManager = useFocusManager();
+        let onClick = () => {
+          focusManager.focusNext({
+            wrap: true,
+            accept: (e) => !e.getAttribute('data-skip')
+          });
+        };
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        return <div {...props} tabIndex={-1} role="button" onClick={onClick} />;
+      }
+
+      let {getByTestId} = render(<Test />);
+      let item1 = getByTestId('item1');
+      let item3 = getByTestId('item3');
+
+      act(() => {item1.focus();});
+
+      fireEvent.click(item1);
+      expect(document.activeElement).toBe(item3);
+
+      fireEvent.click(item3);
+      expect(document.activeElement).toBe(item1);
+    });
+
     it('should move focus backward', function () {
       function Test() {
         return (
@@ -931,6 +967,42 @@ describe('FocusScope', function () {
       // and wrap is false
       expect(document.activeElement).toBe(item1);
     });
+
+    it('should move focus backward and allow users to skip certain elements', function () {
+      function Test() {
+        return (
+          <FocusScope>
+            <Item data-testid="item1" />
+            <Item data-testid="item2" data-skip />
+            <Item data-testid="item3" />
+          </FocusScope>
+        );
+      }
+
+      function Item(props) {
+        let focusManager = useFocusManager();
+        let onClick = () => {
+          focusManager.focusPrevious({
+            wrap: true,
+            accept: (e) => !e.getAttribute('data-skip')
+          });
+        };
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        return <div {...props} tabIndex={-1} role="button" onClick={onClick} />;
+      }
+
+      let {getByTestId} = render(<Test />);
+      let item1 = getByTestId('item1');
+      let item3 = getByTestId('item3');
+
+      act(() => {item1.focus();});
+
+      fireEvent.click(item1);
+      expect(document.activeElement).toBe(item3);
+
+      fireEvent.click(item3);
+      expect(document.activeElement).toBe(item1);
+    });
   });
 
   describe('nested focus scopes', function () {