Merge pull request #3859 from ProjectMirador/mui5-span-tags

Update annotation tags to avoid improperly nested HTML tags

src/components/CanvasAnnotations.js

@@ -95,14 +95,17 @@ export class CanvasAnnotations extends Component {
                 onMouseEnter={() => this.handleAnnotationHover(annotation)}
                 onMouseLeave={this.handleAnnotationBlur}
               >
-                <ListItemText primaryTypographyProps={{ variant: 'body2' }}>
+                <ListItemText
+                  primaryTypographyProps={{ variant: 'body2' }}
+                  primary={
                     <SanitizedHtml ruleSet={htmlSanitizationRuleSet} htmlString={annotation.content} />
-                  <div>
-                    {annotation.tags.map((tag) => (
-                      <Chip size="small" variant="outlined" label={tag} id={tag} key={tag.toString()} />
-                    ))}
-                  </div>
-                </ListItemText>
+                  }
+                  secondary={
+                    annotation.tags.map((tag) => (
+                      <Chip component="span" size="small" variant="outlined" label={tag} id={tag} key={tag.toString()} />
+                    ))
+                  }
+                />
               </MenuItem>
             </ScrollTo>
           ))}