chore(deps): Bump eslint-plugin-primer-react to v5.4.0 and update the code accordingly (#4766)

* Update primer-react eslint plugin and update the code accordignly

* fix linting

* disable the rule

* disable the rule

* Create honest-ligers-fly.md

* add role region for pagelayout content

Author: broccolinisoup

.changeset/honest-ligers-fly.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+chore(deps): Update eslint-plugin-primer-react to latest

.eslintrc.js

@@ -75,7 +75,6 @@ module.exports = {
         ],
       },
     ],
-    'primer-react/no-deprecated-colors': ['warn', {checkAllStrings: true}],
 
     // Overrides from updating plugin:github
     'filenames/match-regex': 'off',
@@ -89,6 +88,7 @@ module.exports = {
     'github/no-inner-html': 'off',
     'github/role-supports-aria-props': 'off',
     'no-restricted-syntax': 'off',
+    'primer-react/a11y-use-next-tooltip': 'off',
   },
   overrides: [
     // rules which apply only to JS
@@ -241,7 +241,6 @@ module.exports = {
         'jsx-a11y/label-has-for': 'off',
         '@typescript-eslint/no-unnecessary-condition': 'off',
         '@typescript-eslint/no-unused-vars': 'off',
-        'primer-react/no-deprecated-colors': ['error', {skipImportCheck: true}],
         'no-redeclare': 'off',
         'ssr-friendly/no-dom-globals-in-module-scope': 'off',
         'ssr-friendly/no-dom-globals-in-react-fc': 'off',

docs/content/ActionMenu.mdx

@@ -121,7 +121,8 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
 
   <ActionMenu.Overlay>
     <ActionList showDividers>
-      <ActionList.Group title="Live query">
+      <ActionList.Group>
+        <ActionList.GroupHeading>Live query</ActionList.GroupHeading>
         <ActionList.Item>
           <ActionList.LeadingVisual>
             <SearchIcon />
@@ -130,7 +131,8 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
         </ActionList.Item>
       </ActionList.Group>
       <ActionList.Divider />
-      <ActionList.Group title="Layout" variant="subtle">
+      <ActionList.Group variant="subtle">
+        <ActionList.GroupHeading>Layout</ActionList.GroupHeading>
         <ActionList.Item>
           <ActionList.LeadingVisual>
             <NoteIcon />

package-lock.json

@@ -64,7 +64,7 @@
     "eslint-plugin-mdx": "3.0.0",
     "eslint-plugin-playwright": "0.15.1",
     "eslint-plugin-prettier": "5.0.0",
-    "eslint-plugin-primer-react": "4.0.2",
+    "eslint-plugin-primer-react": "5.4.0",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-ssr-friendly": "1.3.0",

package.json

@@ -41,6 +41,7 @@ export const GroupWithSubtleTitleOldAPI = () => {
         under features.
       </p>
       <ActionList selectionVariant="multiple" role="menu" showDividers aria-label="Reviewers">
+        {/* eslint-disable-next-line primer-react/no-deprecated-props */}
         <ActionList.Group title="Everyone">
           {users.slice(2).map(user => (
             <ActionList.Item
@@ -80,6 +81,7 @@ export const GroupWithFilledTitleOldAPI = () => {
         under features.
       </p>
       <ActionList selectionVariant="multiple" role="menu" showDividers aria-label="Reviewers">
+        {/* eslint-disable-next-line primer-react/no-deprecated-props */}
         <ActionList.Group title="Everyone" variant="filled">
           {users.slice(2).map(user => (
             <ActionList.Item

packages/react/src/ActionList/ActionList.dev.stories.tsx

@@ -181,7 +181,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
         cursor: 'not-allowed',
         '[data-component="ActionList.Checkbox"]': {
           cursor: 'not-allowed',
-          bg: selected ? 'fg.muted' : 'var(--color-input-disabled-bg, rgba(175, 184, 193, 0.2))',
+          bg: selected ? 'fg.muted' : 'var(--control-bgColor-disabled, rgba(175, 184, 193, 0.2))',
           borderColor: selected ? 'fg.muted' : 'var(--color-input-disabled-bg, rgba(175, 184, 193, 0.2))',
         },
       },

packages/react/src/ActionList/Item.tsx

@@ -219,7 +219,8 @@ export const LoadingItems = () => (
           </ActionList.LeadingVisual>
         </ActionList.Item>
         <ActionList.Divider />
-        <ActionList.Group title="Github projects">
+        <ActionList.Group>
+          <ActionList.GroupHeading>Github projects</ActionList.GroupHeading>
           <ActionList.LinkItem href="/">
             What&apos;s new
             <ActionList.LeadingVisual>

packages/react/src/ActionMenu/ActionMenu.features.stories.tsx

@@ -7,14 +7,7 @@ export default {
 }
 
 export const CustomSize = () => (
-  <IconButton
-    aria-label="Expand"
-    variant="primary"
-    size="small"
-    icon={ChevronDownIcon}
-    unsafeDisableTooltip={false}
-    sx={{width: 16, height: 16}}
-  />
+  <IconButton aria-label="Expand" variant="primary" size="small" icon={ChevronDownIcon} sx={{width: 16, height: 16}} />
 )
 
 export const CustomSizeWithMedia = () => {
@@ -24,19 +17,11 @@ export const CustomSizeWithMedia = () => {
       variant="primary"
       size="small"
       icon={ChevronDownIcon}
-      unsafeDisableTooltip={false}
       sx={{'@media (min-width: 123px)': {width: 16, height: 16}}}
     />
   )
 }
 
 export const CustomIconColor = () => (
-  <IconButton
-    aria-label="Expand"
-    variant="invisible"
-    size="small"
-    icon={ChevronDownIcon}
-    unsafeDisableTooltip={false}
-    sx={{color: 'red'}}
-  />
+  <IconButton aria-label="Expand" variant="invisible" size="small" icon={ChevronDownIcon} sx={{color: 'red'}} />
 )

packages/react/src/Button/IconButton.dev.stories.tsx

@@ -10,41 +10,22 @@ export default {
   title: 'Components/IconButton/Features',
 }
 
-export const Primary = () => (
-  <IconButton icon={HeartIcon} variant="primary" aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Primary = () => <IconButton icon={HeartIcon} variant="primary" aria-label="Favorite" />
 
-export const Danger = () => (
-  <IconButton icon={HeartIcon} variant="danger" aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Danger = () => <IconButton icon={HeartIcon} variant="danger" aria-label="Favorite" />
 
-export const Invisible = () => (
-  <IconButton icon={HeartIcon} variant="invisible" aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Invisible = () => <IconButton icon={HeartIcon} variant="invisible" aria-label="Favorite" />
 
-export const Disabled = () => (
-  <IconButton disabled icon={HeartIcon} aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Disabled = () => <IconButton disabled icon={HeartIcon} aria-label="Favorite" />
 
-export const Small = () => (
-  <IconButton size="small" icon={HeartIcon} aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Small = () => <IconButton size="small" icon={HeartIcon} aria-label="Favorite" />
 
-export const Medium = () => (
-  <IconButton size="medium" icon={HeartIcon} aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Medium = () => <IconButton size="medium" icon={HeartIcon} aria-label="Favorite" />
 
-export const Large = () => (
-  <IconButton size="large" icon={HeartIcon} aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Large = () => <IconButton size="large" icon={HeartIcon} aria-label="Favorite" />
 
 export const WithDescription = () => (
-  <IconButton
-    icon={InboxIcon}
-    aria-label="Notifications"
-    description="You have no unread notifications."
-    unsafeDisableTooltip={false}
-  />
+  <IconButton icon={InboxIcon} aria-label="Notifications" description="You have no unread notifications." />
 )
 
 export const ExternalTooltip = () => (
@@ -62,7 +43,7 @@ export const ExternalTooltipVersion1 = () => (
 export const AsAMenuAnchor = () => (
   <ActionMenu>
     <ActionMenu.Anchor>
-      <IconButton icon={ChevronDownIcon} aria-label="Something" unsafeDisableTooltip={false} />
+      <IconButton icon={ChevronDownIcon} aria-label="Something" />
     </ActionMenu.Anchor>
 
     <ActionMenu.Overlay width="medium">
@@ -105,14 +86,11 @@ export const LoadingTrigger = () => {
 }
 export const KeyshortcutsOnDescription = () => (
   <IconButton
-    unsafeDisableTooltip={false}
     icon={InboxIcon}
     aria-label="Notifications"
     description="You have unread notifications"
     keyshortcuts="G+N"
   />
 )
 
-export const Keyshortcuts = () => (
-  <IconButton unsafeDisableTooltip={false} icon={BoldIcon} aria-label="Bold" keyshortcuts="Command+B" />
-)
+export const Keyshortcuts = () => <IconButton icon={BoldIcon} aria-label="Bold" keyshortcuts="Command+B" />