chore: Enable and fix eslint react/no-unknown-property, react/jsx-no-target-blank (#6203)

#### Details

This pull request enables and fixes two eslint rules:
react/no-unknown-property and react/jsx-no-target-blank

- Adds `rel="noreferrer"` to a link with `target=blank`
- Rewrites `mask-type` as a CSS property:
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type
- Removes `list-style-type="disc"`, it's a CSS property but is not
needed here as `multiLineTextYesBullet` sets the list style type
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

##### Motivation

Increase eslint coverage.

##### Context

<!-- Are there any parts that you've intentionally left out-of-scope for
a later PR to handle? -->

<!-- Were there any alternative approaches you considered? What
tradeoffs did you consider? -->

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a"
in the checkbox -->
- [n/a] Addresses an existing issue: #0000
- [x] Ran `yarn null:autoadd`
- [x] Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [x] Verified code coverage for the changes made. Check coverage report
at: `<rootDir>/test-results/unit/coverage`
- [x] PR title *AND* final merge commit title both start with a semantic
tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See
`CONTRIBUTING.md`.
- [ ] (UI changes only) Added screenshots/GIFs to description above
- [ ] (UI changes only) Verified usability with NVDA/JAWS

eslintrc.base.js

@@ -89,8 +89,6 @@ module.exports = {
         'react/display-name': 'off',
         'react/no-unescaped-entities': 'off',
         'react/no-direct-mutation-state': 'off',
-        'react/jsx-no-target-blank': 'off',
-        'react/no-unknown-property': 'off',
         'security/detect-object-injection': 'off',
         'no-prototype-builtins': 'off',
     },

src/common/components/cards/rich-resolution-content.tsx

@@ -25,10 +25,8 @@ export const RichResolutionContent = NamedFC<RichResolutionContentProps>(
                 return (
                     <div className={styles.combinationLists}>
                         <ul className={styles.multiLineTextYesBullet}>
-                            <li list-style-type="disc">
-                                If the text is intended to be invisible, it passes.
-                            </li>
-                            <li list-style-type="disc">
+                            <li>If the text is intended to be invisible, it passes.</li>
+                            <li>
                                 If the text is intended to be visible, use{' '}
                                 <LinkComponent href="https://go.microsoft.com/fwlink/?linkid=2075365">
                                     Accessibility Insights for Windows
@@ -181,10 +179,8 @@ export const RichResolutionContent = NamedFC<RichResolutionContentProps>(
                 return (
                     <div className={styles.combinationLists}>
                         <ul className={styles.multiLineTextYesBullet}>
-                            <li list-style-type="disc">
-                                If the text is intended to be invisible, it passes.
-                            </li>
-                            <li list-style-type="disc">
+                            <li>If the text is intended to be invisible, it passes.</li>
+                            <li>
                                 If the text is intended to be visible, use{' '}
                                 <LinkComponent href="https://go.microsoft.com/fwlink/?linkid=2075365">
                                     Accessibility Insights for Windows
@@ -240,11 +236,11 @@ export const RichResolutionContent = NamedFC<RichResolutionContentProps>(
                 return (
                     <div className={styles.combinationLists}>
                         <ul className={styles.multiLineTextYesBullet}>
-                            <li list-style-type="disc">
+                            <li>
                                 If the instance is an icon or other non-text content, ignore it.
                                 This rule applies only to text.
                             </li>
-                            <li list-style-type="disc">
+                            <li>
                                 If the instance is text, use{' '}
                                 <LinkComponent href="https://go.microsoft.com/fwlink/?linkid=2075365">
                                     Accessibility Insights for Windows

src/icons/brand/blue/brand-blue.tsx

@@ -15,7 +15,7 @@ export const BrandBlue = NamedFC('BrandBlue', () => (
     >
         <mask
             id="mask0"
-            mask-type="alpha"
+            style={{ maskType: 'alpha' }}
             maskUnits="userSpaceOnUse"
             x="0"
             y="3"
@@ -42,7 +42,7 @@ export const BrandBlue = NamedFC('BrandBlue', () => (
             />
             <mask
                 id="mask1"
-                mask-type="alpha"
+                style={{ maskType: 'alpha' }}
                 maskUnits="userSpaceOnUse"
                 x="-1"
                 y="3"

src/reports/components/assessment-report-footer.tsx

@@ -21,6 +21,7 @@ export class AssessmentReportFooter extends React.Component<AssessmentReportFoot
                     href="http://aka.ms/AccessibilityInsights"
                     className="link report-footer-link"
                     target="_blank"
+                    rel="noreferrer"
                 >
                     http://aka.ms/AccessibilityInsights
                 </a>

src/tests/unit/tests/common/components/cards/__snapshots__/rich-resolution-content.test.tsx.snap

@@ -52,14 +52,10 @@ exports[`RichResolutionContent renders static content with id=android/ColorContr
   <ul
     className="multiLineTextYesBullet"
   >
-    <li
-      list-style-type="disc"
-    >
+    <li>
       If the text is intended to be invisible, it passes.
     </li>
-    <li
-      list-style-type="disc"
-    >
+    <li>
       If the text is intended to be visible, use
        
       <stubLinkComponent
@@ -253,14 +249,10 @@ exports[`RichResolutionContent renders static content with id=android/atfa/TextC
   <ul
     className="multiLineTextYesBullet"
   >
-    <li
-      list-style-type="disc"
-    >
+    <li>
       If the text is intended to be invisible, it passes.
     </li>
-    <li
-      list-style-type="disc"
-    >
+    <li>
       If the text is intended to be visible, use
        
       <stubLinkComponent
@@ -317,14 +309,10 @@ exports[`RichResolutionContent renders static content with id=web/color-contrast
   <ul
     className="multiLineTextYesBullet"
   >
-    <li
-      list-style-type="disc"
-    >
+    <li>
       If the instance is an icon or other non-text content, ignore it. This rule applies only to text.
     </li>
-    <li
-      list-style-type="disc"
-    >
+    <li>
       If the instance is text, use
        
       <stubLinkComponent

src/tests/unit/tests/reports/components/__snapshots__/assessment-report-footer.test.tsx.snap

@@ -18,6 +18,7 @@ exports[`AssessmentReportFooter renders 1`] = `
   <a
     className="link report-footer-link"
     href="http://aka.ms/AccessibilityInsights"
+    rel="noreferrer"
     target="_blank"
   >
     http://aka.ms/AccessibilityInsights