feat(Popup): show on contextmenu (replacement to fix the screener issue)

CHANGELOG.md

@@ -32,6 +32,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add outline version of `menu` icon and `files-visio` icon to Teams theme @notandrew ([#1623](https://github.com/stardust-ui/react/pull/1623))
 - Add `amethyst` color to the Teams theme color palette @mnajdova ([#1650](https://github.com/stardust-ui/react/pull/1650))
 - Add `image-unavailable` icon to Teams Theme @joheredi ([#1633](https://github.com/stardust-ui/react/pull/1633))
+- Open `Popup` on `contextmenu` @jurokapsiar ([#1524](https://github.com/stardust-ui/react/pull/1524))
 
 ### Fixes
 - Fix `ChatMessage`'s focus border overlays `actionMenu` in Teams theme @mnajdova ([#1637](https://github.com/stardust-ui/react/pull/1637))

build/gulp/tasks/test-projects/rollup/rollup.config.js

@@ -46,6 +46,8 @@ export default {
           'ArrowUp',
           'ArrowLeft',
           'ArrowRight',
+          'PageDown',
+          'PageUp',
           'Backspace',
           'Delete',
           'End',

docs/src/examples/components/Popup/Usage/PopupExampleContextOnElement.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import { Alert, Button, Flex, Popup } from '@stardust-ui/react'
+
+const contentWithButtons = (
+  <Flex gap="gap.smaller">
+    <Button>First</Button>
+    <Button primary>Second</Button>
+  </Flex>
+)
+
+class PopupContextOnElement extends React.Component {
+  state = { alert: false }
+
+  showAlert = () => {
+    this.setState({ alert: true })
+    setTimeout(() => this.setState({ alert: false }), 2000)
+  }
+
+  render() {
+    return (
+      <>
+        <Popup
+          position="after"
+          align="top"
+          trigger={
+            <div style={{ padding: '4rem', border: 'red dashed' }}>
+              <Button content="Random button" onClick={this.showAlert} />
+            </div>
+          }
+          shouldTriggerBeTabbable={false}
+          content={contentWithButtons}
+          trapFocus
+          on="context"
+        />
+        {this.state.alert && <Alert warning content="Click!" />}
+      </>
+    )
+  }
+}
+
+export default PopupContextOnElement

docs/src/examples/components/Popup/Usage/PopupExampleOn.shorthand.tsx

@@ -1,24 +1,55 @@
 import * as React from 'react'
-import { Button, Flex, Popup } from '@stardust-ui/react'
+import { Alert, Button, Flex, Popup } from '@stardust-ui/react'
 
-const PopupExampleOn = () => (
-  <Flex gap="gap.smaller">
-    <Popup
-      trigger={<Button icon="expand" content="Click" aria-label="Click button" />}
-      content="Hello from popup on click!"
-      on="click"
-    />
-    <Popup
-      trigger={<Button icon="expand" content="Hover" aria-label="Hover button" />}
-      content="Hello from popup on hover!"
-      on="hover"
-    />
-    <Popup
-      trigger={<Button icon="expand" content="Focus" aria-label="Focus button" />}
-      content="Hello from popup on focus!"
-      on="focus"
-    />
-  </Flex>
-)
+class PopupExampleOn extends React.Component {
+  state = { alert: false }
+
+  showAlert = () => {
+    this.setState({ alert: true })
+    setTimeout(() => this.setState({ alert: false }), 2000)
+  }
+
+  render() {
+    return (
+      <>
+        <Flex gap="gap.smaller">
+          <Popup
+            trigger={<Button icon="expand" content="Click" aria-label="Click button" />}
+            content="Hello from popup on click!"
+            on="click"
+          />
+          <Popup
+            trigger={<Button icon="expand" content="Hover" aria-label="Hover button" />}
+            content="Hello from popup on hover!"
+            on="hover"
+          />
+          <Popup
+            trigger={<Button icon="expand" content="Focus" aria-label="Focus button" />}
+            content="Hello from popup on focus!"
+            on="focus"
+          />
+          <Popup
+            trigger={
+              <Button
+                icon="expand"
+                content="Context"
+                aria-label="Context button"
+                onClick={this.showAlert}
+              />
+            }
+            content="Hello from popup on context!"
+            on="context"
+          />
+        </Flex>
+        {this.state.alert && (
+          <Alert
+            warning
+            content="Right, you can still click the button! Right click opens the popup."
+          />
+        )}
+      </>
+    )
+  }
+}
 
 export default PopupExampleOn

docs/src/examples/components/Popup/Usage/PopupExampleOnMultiple.shorthand.tsx

@@ -1,19 +1,75 @@
 import * as React from 'react'
-import { Button, Flex, Popup } from '@stardust-ui/react'
+import { Alert, Button, Flex, Popup } from '@stardust-ui/react'
 
-const PopupExampleOnMultiple = () => (
-  <Flex gap="gap.smaller">
-    <Popup
-      trigger={<Button icon="expand" content="Click + Focus" aria-label="Click or focus button" />}
-      content="Hello from popup on click!"
-      on={['click', 'focus']}
-    />
-    <Popup
-      trigger={<Button icon="expand" content="Hover + Focus" aria-label="Hover or focus button" />}
-      content="Hello from popup on hover!"
-      on={['hover', 'focus']}
-    />
-  </Flex>
-)
+class PopupExampleOnMultiple extends React.Component {
+  state = { alert: false }
+
+  showAlert = () => {
+    this.setState({ alert: true })
+    setTimeout(() => this.setState({ alert: false }), 2000)
+  }
+
+  render() {
+    return (
+      <>
+        <Flex gap="gap.smaller" padding="padding.medium">
+          <Popup
+            trigger={
+              <Button icon="expand" content="Click + Focus" aria-label="Click or focus button" />
+            }
+            content="Hello from popup on click!"
+            on={['click', 'focus']}
+          />
+          <Popup
+            trigger={
+              <Button icon="expand" content="Hover + Focus" aria-label="Hover or focus button" />
+            }
+            content="Hello from popup on hover!"
+            on={['hover', 'focus']}
+          />
+        </Flex>
+        <Flex gap="gap.smaller" padding="padding.medium">
+          <Popup
+            trigger={
+              <Button
+                icon="expand"
+                content="Context + Focus"
+                aria-label="Right click or focus button"
+                onClick={this.showAlert}
+              />
+            }
+            content="Hello from popup on click!"
+            on={['context', 'focus']}
+          />
+          <Popup
+            trigger={
+              <Button
+                icon="expand"
+                content="Context + Hover"
+                aria-label="Right click or hover button"
+                onClick={this.showAlert}
+              />
+            }
+            content="Hello from popup on hover!"
+            on={['context', 'hover']}
+          />
+          <Popup
+            trigger={
+              <Button
+                icon="expand"
+                content="Context + Hover + Focus"
+                aria-label="Right click or hover or focus button"
+                onClick={this.showAlert}
+              />
+            }
+            content="Hello from popup on hover!"
+            on={['context', 'hover', 'focus']}
+          />
+        </Flex>
+        {this.state.alert && <Alert warning content="Click!" />}
+      </>
+    )
+  }
+}
 
 export default PopupExampleOnMultiple

docs/src/examples/components/Popup/Usage/PopupExampleOnWithFocusTrap.shorthand.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Button, Flex, Popup } from '@stardust-ui/react'
+import { Alert, Button, Flex, Popup } from '@stardust-ui/react'
 
 const contentWithButtons = (
   <Flex gap="gap.smaller">
@@ -8,27 +8,54 @@ const contentWithButtons = (
   </Flex>
 )
 
-const PopupExampleOnWithFocusTrap = () => (
-  <Flex gap="gap.smaller">
-    <Popup
-      trigger={<Button icon="expand" content="Click" aria-label="Click button" />}
-      content={contentWithButtons}
-      trapFocus
-      on="click"
-    />
-    <Popup
-      trigger={<Button icon="expand" content="Hover" aria-label="Hover button" />}
-      content={contentWithButtons}
-      trapFocus
-      on="hover"
-    />
-    <Popup
-      trigger={<Button icon="expand" content="Focus" aria-label="Focus button" />}
-      content={contentWithButtons}
-      trapFocus
-      on="focus"
-    />
-  </Flex>
-)
+class PopupExampleOnWithFocusTrap extends React.Component {
+  state = { alert: false }
+
+  showAlert = () => {
+    this.setState({ alert: true })
+    setTimeout(() => this.setState({ alert: false }), 2000)
+  }
+
+  render() {
+    return (
+      <>
+        <Flex gap="gap.smaller">
+          <Popup
+            trigger={<Button icon="expand" content="Click" aria-label="Click button" />}
+            content={contentWithButtons}
+            trapFocus
+            on="click"
+          />
+          <Popup
+            trigger={<Button icon="expand" content="Hover" aria-label="Hover button" />}
+            content={contentWithButtons}
+            trapFocus
+            on="hover"
+          />
+          <Popup
+            trigger={<Button icon="expand" content="Focus" aria-label="Focus button" />}
+            content={contentWithButtons}
+            trapFocus
+            on="focus"
+          />
+          <Popup
+            trigger={
+              <Button
+                icon="expand"
+                content="Context"
+                aria-label="Context button"
+                onClick={this.showAlert}
+              />
+            }
+            content={contentWithButtons}
+            trapFocus
+            on="context"
+          />
+        </Flex>
+        {this.state.alert && <Alert warning content="Click!" />}
+      </>
+    )
+  }
+}
 
 export default PopupExampleOnWithFocusTrap

docs/src/examples/components/Popup/Usage/index.tsx

@@ -25,6 +25,11 @@ const Usage = () => (
       description="The triggering actions can be combined."
       examplePath="components/Popup/Usage/PopupExampleOnMultiple"
     />
+    <ComponentExample
+      title="Popup context on element"
+      description="Context poup can be applied on a non-focusable element if the element contains focusable children."
+      examplePath="components/Popup/Usage/PopupExampleContextOnElement"
+    />
     <ComponentExample
       title="Nested"
       description="Popups can be nested."

docs/src/views/Accessibility.tsx

@@ -356,10 +356,8 @@ export default () => (
 
     <Header as="h3" content="Right Click Support" />
     <p>
-      For cases when right click is used to execute a secondary action (for example, a context
-      menu), a keyboar shortcut needs to be provided to allow the keyboard / screen reader users to
-      execute the secondary action. Also, screen reader has to make the user aware about the
-      presence of the secondary action.
+      Screen reader has to make the user aware about the presence of the secondary action by a short
+      meaningful label or description on the trigger element.
     </p>
 
     <Header as="h3" content="Elements that appear on hover over another element" />