fix: tabbing past contenteditable=false in containing focusscope (#7340)

* fix: spinbutton tabindex when disabled

* fix: spectrum test suite

* fix: review comments

* chore: remove package.json changes

* Add test

---------

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: GitHub <[email protected]>

Author: nwidynski

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

@@ -280,7 +280,7 @@ const focusableElements = [
   'embed',
   'audio[controls]',
   'video[controls]',
-  '[contenteditable]'
+  '[contenteditable]:not([contenteditable^="false"])'
 ];
 
 const FOCUSABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';

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

@@ -155,6 +155,45 @@ describe('FocusScope', function () {
       expect(document.activeElement).toBe(input1);
     });
 
+    it('should only skip content editable which are false', async function () {
+      let {getByTestId} = render(
+        <FocusScope contain>
+          <input data-testid="input1" />
+          <span contentEditable data-testid="input2" />
+          <span contentEditable="false" />
+          <span contentEditable={false} />
+          <span contentEditable="plaintext-only" data-testid="input3" />
+          <input data-testid="input4" />
+        </FocusScope>
+      );
+
+      let input1 = getByTestId('input1');
+      let input2 = getByTestId('input2');
+      let input3 = getByTestId('input3');
+      let input4 = getByTestId('input4');
+
+      act(() => {input1.focus();});
+      expect(document.activeElement).toBe(input1);
+
+      await user.tab();
+      expect(document.activeElement).toBe(input2);
+
+      await user.tab();
+      expect(document.activeElement).toBe(input3);
+
+      await user.tab();
+      expect(document.activeElement).toBe(input4);
+
+      await user.tab({shift: true});
+      expect(document.activeElement).toBe(input3);
+
+      await user.tab({shift: true});
+      expect(document.activeElement).toBe(input2);
+
+      await user.tab({shift: true});
+      expect(document.activeElement).toBe(input1);
+    });
+
     it('should do nothing if a modifier key is pressed', function () {
       let {getByTestId} = render(
         <FocusScope contain>