refactor: [M3-6708] – Implement new React 18 hooks

docs/development-guide/13-coding-standards.md

@@ -15,9 +15,28 @@ If you are using VSCode it is highly recommended to use the ESlint extension. Th
 
 ## React
 
-- When conditionally rendering JSX, use ternaries instead of `&&`.
-  - Example: `condition ? <Component /> : null` instead of `condition && <Component />`
-  - This is to avoid hard-to-catch bugs ([read more](https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx)).
+[Several new hooks were introduced with the release of React 18](https://react.dev/blog/2022/03/29/react-v18#new-hooks).
+
+It should be noted that the `useId()` hook is particularly useful for generating unique IDs for accessibility attributes. For this use case, `useId()` is preferred over hardcoding the ID because components may be rendered more than once on a page, but IDs must be unique.
+
+As an example from `DisplayLinodes.tsx`, early in the file we invoke the hook: `const displayViewDescriptionId = React.useId()`
+
+And make use of the unique ID by passing it as the value for a component's `aria-describedby` attribute in the `return` value:
+
+```
+  <StyledToggleButton
+  aria-describedby={displayViewDescriptionId}
+  aria-label="Toggle display"
+  disableRipple
+  isActive={true}
+  onClick={toggleLinodeView}
+  size="large"
+>
+  <GridView />
+</StyledToggleButton>
+```
+
+Per the [docs](https://react.dev/reference/react/useId#usage), the hook should not be used for generating keys in a list.
 
 ## Event Handler Naming Convention
 

packages/manager/.changeset/pr-10261-tech-stories-1709842863706.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Implement new useId() hook in several components ([#10261](https://github.com/linode/manager/pull/10261))

packages/manager/src/components/GroupByTagToggle.tsx

@@ -13,9 +13,11 @@ interface GroupByTagToggleProps {
 export const GroupByTagToggle = React.memo((props: GroupByTagToggleProps) => {
   const { isGroupedByTag, isLargeAccount, toggleGroupByTag } = props;
 
+  const groupByDescriptionId = React.useId();
+
   return (
     <>
-      <div className="visually-hidden" id="groupByDescription">
+      <div className="visually-hidden" id={groupByDescriptionId}>
         {isGroupedByTag
           ? 'group by tag is currently enabled'
           : 'group by tag is currently disabled'}
@@ -25,7 +27,7 @@ export const GroupByTagToggle = React.memo((props: GroupByTagToggleProps) => {
         title={`${isGroupedByTag ? 'Ungroup' : 'Group'} by tag`}
       >
         <StyledToggleButton
-          aria-describedby={'groupByDescription'}
+          aria-describedby={groupByDescriptionId}
           aria-label={`Toggle group by tag`}
           disableRipple
           // See https://github.com/linode/manager/pull/6653 for more details

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx

@@ -242,6 +242,8 @@ export const LinodeConfigDialog = (props: Props) => {
 
   const { enqueueSnackbar } = useSnackbar();
 
+  const virtModeCaptionId = React.useId();
+
   const {
     data: kernels,
     error: kernelsError,
@@ -721,7 +723,7 @@ export const LinodeConfigDialog = (props: Props) => {
               <Typography variant="h3">Virtual Machine</Typography>
               <FormControl>
                 <FormLabel
-                  aria-describedby="virtModeCaption"
+                  aria-describedby={virtModeCaptionId}
                   disabled={isReadOnly}
                   htmlFor="virt_mode"
                 >
@@ -745,7 +747,7 @@ export const LinodeConfigDialog = (props: Props) => {
                     label="Full virtualization"
                     value="fullvirt"
                   />
-                  <FormHelperText id="virtModeCaption">
+                  <FormHelperText id={virtModeCaptionId}>
                     Controls if devices inside your virtual machine are
                     paravirtualized or fully virtualized. Paravirt is what you
                     want, unless you&rsquo;re doing weird things.

packages/manager/src/features/Linodes/LinodesLanding/DisplayGroupedLinodes.tsx

@@ -71,6 +71,9 @@ export const DisplayGroupedLinodes = (props: CombinedProps) => {
     ...rest
   } = props;
 
+  const displayViewDescriptionId = React.useId();
+  const groupByDescriptionId = React.useId();
+
   const dataLength = data.length;
 
   const orderedGroupedLinodes = compose(sortGroups, groupByTags)(data);
@@ -96,12 +99,12 @@ export const DisplayGroupedLinodes = (props: CombinedProps) => {
       <>
         <Grid className={'px0'} xs={12}>
           <StyledControlHeader isGroupedByTag={linodesAreGrouped}>
-            <div className="visually-hidden" id="displayViewDescription">
+            <div className="visually-hidden" id={displayViewDescriptionId}>
               Currently in {linodeViewPreference} view
             </div>
             <Tooltip placement="top" title="List view">
               <StyledToggleButton
-                aria-describedby={'displayViewDescription'}
+                aria-describedby={displayViewDescriptionId}
                 aria-label="Toggle display"
                 disableRipple
                 isActive={linodesAreGrouped}
@@ -112,14 +115,14 @@ export const DisplayGroupedLinodes = (props: CombinedProps) => {
               </StyledToggleButton>
             </Tooltip>
 
-            <div className="visually-hidden" id="groupByDescription">
+            <div className="visually-hidden" id={groupByDescriptionId}>
               {linodesAreGrouped
                 ? 'group by tag is currently enabled'
                 : 'group by tag is currently disabled'}
             </div>
             <Tooltip placement="top-end" title="Ungroup by tag">
               <StyledToggleButton
-                aria-describedby={'groupByDescription'}
+                aria-describedby={groupByDescriptionId}
                 aria-label={`Toggle group by tag`}
                 disableRipple
                 isActive={linodesAreGrouped}

packages/manager/src/features/Linodes/LinodesLanding/DisplayLinodes.tsx

@@ -69,6 +69,9 @@ export const DisplayLinodes = React.memo((props: CombinedProps) => {
     ...rest
   } = props;
 
+  const displayViewDescriptionId = React.useId();
+  const groupByDescriptionId = React.useId();
+
   const { infinitePageSize, setInfinitePageSize } = useInfinitePageSize();
   const numberOfLinodesWithMaintenance = React.useMemo(() => {
     return data.reduce((acc, thisLinode) => {
@@ -143,13 +146,13 @@ export const DisplayLinodes = React.memo((props: CombinedProps) => {
                   <StyledControlHeader isGroupedByTag={linodesAreGrouped}>
                     <div
                       className="visually-hidden"
-                      id="displayViewDescription"
+                      id={displayViewDescriptionId}
                     >
                       Currently in {linodeViewPreference} view
                     </div>
                     <Tooltip placement="top" title="List view">
                       <StyledToggleButton
-                        aria-describedby={'displayViewDescription'}
+                        aria-describedby={displayViewDescriptionId}
                         aria-label="Toggle display"
                         disableRipple
                         isActive={true}
@@ -160,14 +163,14 @@ export const DisplayLinodes = React.memo((props: CombinedProps) => {
                       </StyledToggleButton>
                     </Tooltip>
 
-                    <div className="visually-hidden" id="groupByDescription">
+                    <div className="visually-hidden" id={groupByDescriptionId}>
                       {linodesAreGrouped
                         ? 'group by tag is currently enabled'
                         : 'group by tag is currently disabled'}
                     </div>
                     <Tooltip placement="top-end" title="Group by tag">
                       <StyledToggleButton
-                        aria-describedby={'groupByDescription'}
+                        aria-describedby={groupByDescriptionId}
                         aria-label={`Toggle group by tag`}
                         disableRipple
                         isActive={linodesAreGrouped}

packages/manager/src/features/Linodes/LinodesLanding/SortableTableHead.tsx

@@ -42,6 +42,8 @@ export const SortableTableHead = <T extends unknown>(
     toggleLinodeView,
   } = props;
 
+  const displayViewDescriptionId = React.useId();
+
   const isActive = (label: string) =>
     label.toLowerCase() === orderBy.toLowerCase();
 
@@ -167,12 +169,12 @@ export const SortableTableHead = <T extends unknown>(
               justifyContent: 'flex-end',
             }}
           >
-            <div className="visually-hidden" id="displayViewDescription">
+            <div className="visually-hidden" id={displayViewDescriptionId}>
               Currently in {linodeViewPreference} view
             </div>
             <Tooltip placement="top" title="Summary view">
               <StyledToggleButton
-                aria-describedby={'displayViewDescription'}
+                aria-describedby={displayViewDescriptionId}
                 aria-label="Toggle display"
                 disableRipple
                 isActive={linodeViewPreference === 'grid'}