@instructure/ui-instructure 11.7.6-snapshot-20 → 11.7.6-snapshot-22

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.6-snapshot-20](https://github.com/instructure/instructure-ui/compare/v11.7.5...v11.7.6-snapshot-20) (2026-09-04)
+## [11.7.6-snapshot-22](https://github.com/instructure/instructure-ui/compare/v11.7.5...v11.7.6-snapshot-22) (2026-09-08)
 
-**Note:** Version bump only for package @instructure/ui-instructure
+
+### Bug Fixes
+
+* **ui-instructure:** add an info icon to AI Information dialog triggers for WCAG 1.4.1 compliance ([968906f](https://github.com/instructure/instructure-ui/commit/968906ffefd41f5b6fc0494a90fda4dc43e32179))
 
 
 

package/es/DataPermissionLevels/v2/index.js

@@ -26,6 +26,7 @@ import { Modal } from '@instructure/ui-modal/latest';
 import { Button, CloseButton, CondensedButton } from '@instructure/ui-buttons/latest';
 import { Heading } from '@instructure/ui-heading/latest';
 import { Text } from '@instructure/ui-text/latest';
+import { InfoInstUIIcon } from '@instructure/ui-icons';
 import { useStyleNew } from '@instructure/emotion';
 import generateStyle from './styles.js';
 
@@ -58,7 +59,12 @@ const DataPermissionLevels = ({
     children: [_jsx(CondensedButton, {
       onClick: () => setOpen(true),
       "aria-haspopup": "dialog",
-      children: triggerText
+      children: _jsxs("span", {
+        css: styles?.trigger,
+        children: [triggerText, _jsx(InfoInstUIIcon, {
+          size: "sm"
+        })]
+      })
     }), _jsxs(Modal, {
       size: fullscreen ? 'fullscreen' : 'medium',
       open: open,

package/es/DataPermissionLevels/v2/styles.js

@@ -28,13 +28,21 @@
  * ---
  * Generates the style object from the theme and provided additional information
  * @param componentTheme The theme variable object.
+ * @param _props the props of the component, the style is applied to
+ * @param sharedTokens Shared token object that stores common values for the theme.
  * @return The final style object, which will be used in the component
  */
-const generateStyle = componentTheme => {
+const generateStyle = (componentTheme, _props, sharedTokens) => {
   return {
     dataPermissionLevels: {
       label: 'data-permission-levels'
     },
+    trigger: {
+      label: 'data-permission-levels__trigger',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: sharedTokens?.spacing.general.spaceXs
+    },
     body: {
       label: 'data-permission-levels__body',
       display: 'flex',

package/es/NutritionFacts/v2/index.js

@@ -26,6 +26,7 @@ import { Modal } from '@instructure/ui-modal/latest';
 import { Button, CloseButton, CondensedButton } from '@instructure/ui-buttons/latest';
 import { Heading } from '@instructure/ui-heading/latest';
 import { Text } from '@instructure/ui-text/latest';
+import { InfoInstUIIcon } from '@instructure/ui-icons';
 import { useStyleNew } from '@instructure/emotion';
 import generateStyle from './styles.js';
 
@@ -57,7 +58,12 @@ const NutritionFacts = ({
     children: [_jsx(CondensedButton, {
       onClick: () => setOpen(true),
       "aria-haspopup": "dialog",
-      children: triggerText
+      children: _jsxs("span", {
+        css: styles?.trigger,
+        children: [triggerText, _jsx(InfoInstUIIcon, {
+          size: "sm"
+        })]
+      })
     }), _jsxs(Modal, {
       open: open,
       onDismiss: () => {

package/es/NutritionFacts/v2/styles.js

@@ -28,10 +28,18 @@
  * ---
  * Generates the style object from the theme and provided additional information
  * @param componentTheme The theme variable object.
+ * @param _props the props of the component, the style is applied to
+ * @param sharedTokens Shared token object that stores common values for the theme.
  * @return The final style object, which will be used in the component
  */
-const generateStyle = componentTheme => {
+const generateStyle = (componentTheme, _props, sharedTokens) => {
   return {
+    trigger: {
+      label: 'nutrition-facts__trigger',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: sharedTokens?.spacing.general.spaceXs
+    },
     segmentCard: {
       label: 'nutrition-facts__segment-card',
       borderStyle: 'solid',

package/lib/DataPermissionLevels/v2/index.js

@@ -10,6 +10,7 @@ var _latest = require("@instructure/ui-modal/latest");
 var _latest2 = require("@instructure/ui-buttons/latest");
 var _latest3 = require("@instructure/ui-heading/latest");
 var _latest4 = require("@instructure/ui-text/latest");
+var _uiIcons = require("@instructure/ui-icons");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
@@ -64,7 +65,12 @@ category: components/AI Components
     children: [(0, _jsxRuntime.jsx)(_latest2.CondensedButton, {
       onClick: () => setOpen(true),
       "aria-haspopup": "dialog",
-      children: triggerText
+      children: (0, _jsxRuntime.jsxs)("span", {
+        css: styles?.trigger,
+        children: [triggerText, (0, _jsxRuntime.jsx)(_uiIcons.InfoInstUIIcon, {
+          size: "sm"
+        })]
+      })
     }), (0, _jsxRuntime.jsxs)(_latest.Modal, {
       size: fullscreen ? 'fullscreen' : 'medium',
       open: open,

package/lib/DataPermissionLevels/v2/styles.js

@@ -34,13 +34,21 @@ exports.default = void 0;
  * ---
  * Generates the style object from the theme and provided additional information
  * @param componentTheme The theme variable object.
+ * @param _props the props of the component, the style is applied to
+ * @param sharedTokens Shared token object that stores common values for the theme.
  * @return The final style object, which will be used in the component
  */
-const generateStyle = componentTheme => {
+const generateStyle = (componentTheme, _props, sharedTokens) => {
   return {
     dataPermissionLevels: {
       label: 'data-permission-levels'
     },
+    trigger: {
+      label: 'data-permission-levels__trigger',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: sharedTokens?.spacing.general.spaceXs
+    },
     body: {
       label: 'data-permission-levels__body',
       display: 'flex',

package/lib/NutritionFacts/v2/index.js

@@ -10,6 +10,7 @@ var _latest = require("@instructure/ui-modal/latest");
 var _latest2 = require("@instructure/ui-buttons/latest");
 var _latest3 = require("@instructure/ui-heading/latest");
 var _latest4 = require("@instructure/ui-text/latest");
+var _uiIcons = require("@instructure/ui-icons");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
@@ -63,7 +64,12 @@ category: components/AI Components
     children: [(0, _jsxRuntime.jsx)(_latest2.CondensedButton, {
       onClick: () => setOpen(true),
       "aria-haspopup": "dialog",
-      children: triggerText
+      children: (0, _jsxRuntime.jsxs)("span", {
+        css: styles?.trigger,
+        children: [triggerText, (0, _jsxRuntime.jsx)(_uiIcons.InfoInstUIIcon, {
+          size: "sm"
+        })]
+      })
     }), (0, _jsxRuntime.jsxs)(_latest.Modal, {
       open: open,
       onDismiss: () => {

package/lib/NutritionFacts/v2/styles.js

@@ -34,10 +34,18 @@ exports.default = void 0;
  * ---
  * Generates the style object from the theme and provided additional information
  * @param componentTheme The theme variable object.
+ * @param _props the props of the component, the style is applied to
+ * @param sharedTokens Shared token object that stores common values for the theme.
  * @return The final style object, which will be used in the component
  */
-const generateStyle = componentTheme => {
+const generateStyle = (componentTheme, _props, sharedTokens) => {
   return {
+    trigger: {
+      label: 'nutrition-facts__trigger',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: sharedTokens?.spacing.general.spaceXs
+    },
     segmentCard: {
       label: 'nutrition-facts__segment-card',
       borderStyle: 'solid',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-instructure",
-  "version": "11.7.6-snapshot-20",
+  "version": "11.7.6-snapshot-22",
   "description": "Collection of specific components for Instructure products",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,26 +15,26 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/emotion": "11.7.6-snapshot-20",
-    "@instructure/ui-buttons": "11.7.6-snapshot-20",
-    "@instructure/shared-types": "11.7.6-snapshot-20",
-    "@instructure/ui-icons": "11.7.6-snapshot-20",
-    "@instructure/ui-link": "11.7.6-snapshot-20",
-    "@instructure/ui-modal": "11.7.6-snapshot-20",
-    "@instructure/ui-heading": "11.7.6-snapshot-20",
-    "@instructure/ui-popover": "11.7.6-snapshot-20",
-    "@instructure/ui-react-utils": "11.7.6-snapshot-20",
-    "@instructure/ui-text": "11.7.6-snapshot-20",
-    "@instructure/ui-themes": "11.7.6-snapshot-20",
-    "@instructure/ui-view": "11.7.6-snapshot-20"
+    "@instructure/shared-types": "11.7.6-snapshot-22",
+    "@instructure/ui-heading": "11.7.6-snapshot-22",
+    "@instructure/emotion": "11.7.6-snapshot-22",
+    "@instructure/ui-icons": "11.7.6-snapshot-22",
+    "@instructure/ui-buttons": "11.7.6-snapshot-22",
+    "@instructure/ui-modal": "11.7.6-snapshot-22",
+    "@instructure/ui-link": "11.7.6-snapshot-22",
+    "@instructure/ui-text": "11.7.6-snapshot-22",
+    "@instructure/ui-themes": "11.7.6-snapshot-22",
+    "@instructure/ui-view": "11.7.6-snapshot-22",
+    "@instructure/ui-react-utils": "11.7.6-snapshot-22",
+    "@instructure/ui-popover": "11.7.6-snapshot-22"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "vitest": "^4.1.9",
-    "@instructure/ui-axe-check": "11.7.6-snapshot-20",
-    "@instructure/ui-color-utils": "11.7.6-snapshot-20",
-    "@instructure/ui-babel-preset": "11.7.6-snapshot-20"
+    "@instructure/ui-axe-check": "11.7.6-snapshot-22",
+    "@instructure/ui-babel-preset": "11.7.6-snapshot-22",
+    "@instructure/ui-color-utils": "11.7.6-snapshot-22"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/DataPermissionLevels/v2/index.tsx

@@ -30,6 +30,7 @@ import {
 } from '@instructure/ui-buttons/latest'
 import { Heading } from '@instructure/ui-heading/latest'
 import { Text } from '@instructure/ui-text/latest'
+import { InfoInstUIIcon } from '@instructure/ui-icons'
 import { useStyleNew } from '@instructure/emotion'
 
 import { DataPermissionLevelsProps } from './props.js'
@@ -64,7 +65,10 @@ const DataPermissionLevels = ({
   return (
     <div>
       <CondensedButton onClick={() => setOpen(true)} aria-haspopup="dialog">
-        {triggerText}
+        <span css={styles?.trigger}>
+          {triggerText}
+          <InfoInstUIIcon size="sm" />
+        </span>
       </CondensedButton>
       <Modal
         size={fullscreen ? 'fullscreen' : 'medium'}

package/src/DataPermissionLevels/v2/props.ts

@@ -87,6 +87,7 @@ type DataPermissionLevelsStyle = ComponentStyle<
   | 'currentFeature'
   | 'contentContainer'
   | 'permissionTitle'
+  | 'trigger'
 > & {
   maxWidth?: string
 }

package/src/DataPermissionLevels/v2/styles.ts

@@ -22,8 +22,11 @@
  * SOFTWARE.
  */
 
-import type { NewComponentTypes } from '@instructure/ui-themes'
-import type { DataPermissionLevelsStyle } from './props'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type {
+  DataPermissionLevelsProps,
+  DataPermissionLevelsStyle
+} from './props'
 
 /**
  * ---
@@ -31,15 +34,25 @@ import type { DataPermissionLevelsStyle } from './props'
  * ---
  * Generates the style object from the theme and provided additional information
  * @param componentTheme The theme variable object.
+ * @param _props the props of the component, the style is applied to
+ * @param sharedTokens Shared token object that stores common values for the theme.
  * @return The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: ReturnType<NewComponentTypes['DataPermissionLevels']>
+  componentTheme: ReturnType<NewComponentTypes['DataPermissionLevels']>,
+  _props: DataPermissionLevelsProps,
+  sharedTokens: SharedTokens
 ): DataPermissionLevelsStyle => {
   return {
     dataPermissionLevels: {
       label: 'data-permission-levels'
     },
+    trigger: {
+      label: 'data-permission-levels__trigger',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: sharedTokens?.spacing.general.spaceXs
+    },
     body: {
       label: 'data-permission-levels__body',
       display: 'flex',

package/src/NutritionFacts/v2/index.tsx

@@ -30,6 +30,7 @@ import {
 } from '@instructure/ui-buttons/latest'
 import { Heading } from '@instructure/ui-heading/latest'
 import { Text } from '@instructure/ui-text/latest'
+import { InfoInstUIIcon } from '@instructure/ui-icons'
 import { useStyleNew } from '@instructure/emotion'
 
 import { NutritionFactsProps } from './props.js'
@@ -63,7 +64,10 @@ const NutritionFacts = ({
   return (
     <div>
       <CondensedButton onClick={() => setOpen(true)} aria-haspopup="dialog">
-        {triggerText}
+        <span css={styles?.trigger}>
+          {triggerText}
+          <InfoInstUIIcon size="sm" />
+        </span>
       </CondensedButton>
       <Modal
         open={open}

package/src/NutritionFacts/v2/props.ts

@@ -85,6 +85,7 @@ type NutritionFactsStyle = ComponentStyle<
   | 'segmentContainer'
   | 'blockContainer'
   | 'body'
+  | 'trigger'
 > & {
   maxWidth?: string
 }

package/src/NutritionFacts/v2/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import type { NewComponentTypes } from '@instructure/ui-themes'
-import type { NutritionFactsStyle } from './props'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type { NutritionFactsProps, NutritionFactsStyle } from './props'
 
 /**
  * ---
@@ -31,12 +31,22 @@ import type { NutritionFactsStyle } from './props'
  * ---
  * Generates the style object from the theme and provided additional information
  * @param componentTheme The theme variable object.
+ * @param _props the props of the component, the style is applied to
+ * @param sharedTokens Shared token object that stores common values for the theme.
  * @return The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: ReturnType<NewComponentTypes['NutritionFacts']>
+  componentTheme: ReturnType<NewComponentTypes['NutritionFacts']>,
+  _props: NutritionFactsProps,
+  sharedTokens: SharedTokens
 ): NutritionFactsStyle => {
   return {
+    trigger: {
+      label: 'nutrition-facts__trigger',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: sharedTokens?.spacing.general.spaceXs
+    },
     segmentCard: {
       label: 'nutrition-facts__segment-card',
       borderStyle: 'solid',