fix: check for element visibility should take react aria attribute into consideration (adobe#8642)

* fix: check for element visibility should take react aria attribute into consideration

* remove log

* deleted too much

Author: snowystinger

packages/@react-aria/utils/src/isElementVisible.ts

@@ -63,9 +63,9 @@ function isAttributeVisible(element: Element, childElement?: Element) {
  */
 export function isElementVisible(element: Element, childElement?: Element): boolean {
   if (supportsCheckVisibility) {
-    return element.checkVisibility();
+    return element.checkVisibility() && !element.closest('[data-react-aria-prevent-focus]');
   }
-  
+
   return (
     element.nodeName !== '#comment' &&
     isStyleVisible(element) &&

packages/react-aria-components/stories/Toolbar.stories.tsx

@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {Checkbox, Link, ToggleButton, Toolbar, ToolbarProps} from 'react-aria-components';
+import {Button, Checkbox, Group, Label, Link, ListBox, Popover, Select, SelectValue, Separator, ToggleButton, Toolbar, ToolbarProps} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
 import {Meta, StoryObj} from '@storybook/react';
+import {MyListBoxItem} from './utils';
 import {Orientation} from 'react-stately';
 import React from 'react';
 import styles from '../example/index.css';
@@ -56,3 +57,51 @@ export const ToolbarExample: ToolbarStory = {
     );
   }
 };
+
+export const SelectSupport: ToolbarStory = {
+  args: {
+    orientation: 'horizontal' as Orientation
+  },
+  render: (props: ToolbarProps) => {
+    return (
+      <Toolbar {...props} aria-label="Text formatting">
+        <Group aria-label="Style">
+          <ToggleButton aria-label="Bold">
+            <b>B</b>
+          </ToggleButton>
+          <ToggleButton aria-label="Italic">
+            <i>I</i>
+          </ToggleButton>
+          <ToggleButton aria-label="Underline">
+            <u>U</u>
+          </ToggleButton>
+        </Group>
+        <Separator orientation="vertical" />
+        <Select>
+          <Label>Favorite Animal</Label>
+          <Button>
+            <SelectValue />
+            <span aria-hidden="true">▼</span>
+          </Button>
+          <Popover>
+            <ListBox>
+              <MyListBoxItem>Aardvark</MyListBoxItem>
+              <MyListBoxItem>Cat</MyListBoxItem>
+              <MyListBoxItem>Dog</MyListBoxItem>
+              <MyListBoxItem>Kangaroo</MyListBoxItem>
+              <MyListBoxItem>Panda</MyListBoxItem>
+              <MyListBoxItem>Snake</MyListBoxItem>
+            </ListBox>
+          </Popover>
+        </Select>
+        <Separator orientation="vertical" />
+
+        <Group aria-label="Clipboard">
+          <Button>Copy</Button>
+          <Button>Paste</Button>
+          <Button>Cut</Button>
+        </Group>
+      </Toolbar>
+    );
+  }
+};