chore: Disable `{property|value}-no-vendor-prefix` stylelint rules, clean up prefixes (#6278)

#### Details

This pull request will officially disable the stylelint rules
`property-no-vendor-prefix` and `value-no-vendor-prefix`. It also audits
current prefix usage and removed vendor prefixes that are no longer
needed and makes adjustments to existing vendor prefixes as needed.

##### Motivation

Part of
https://github.com/microsoft/accessibility-insights-web/issues/5187 as
an incremental task to enable stylelint rules.

##### Context

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


##### Alternatives to autoprefixer

-
[stylelint-no-unsupported-browser-features](https://github.com/ismay/stylelint-no-unsupported-browser-features)
- We would install and enable this stylelint rule to help us learn about
unsupported features. I don't like this option as the [recommendation is
to set it to
"warn"](https://github.com/ismay/stylelint-no-unsupported-browser-features#recommendations)
and warnings are easy to miss.
- These rules are meant to work with a secondary build tool, like
[autoprefixer](https://github.com/postcss/autoprefixer), however the
cost of adding autoprefixer (added dependencies, increase build times)
outweighs the benefits.



<!-- 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 -->
- [x] Addresses an existing issue:
https://github.com/microsoft/accessibility-insights-web/issues/5187
- [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

.stylelintrc.js

@@ -13,15 +13,13 @@ module.exports = {
             '^(ms-([A-Z][a-z0-9]*)(-[a-z0-9]+)*)|(([a-z][a-z0-9]*)(-[a-z0-9]+)*)$', // Allows: kebab case and ms-Kebab-case
         'declaration-property-max-values': { padding: 1, margin: 1 }, // Limit shorthand to improve readability
         'annotation-no-unknown': null, // Disabled per guidance at https://github.com/stylelint-scss/stylelint-config-recommended-scss/issues/149
+        'property-no-vendor-prefix': null, // Disabled, we decided against using a tool like autoprefixer: https://github.com/microsoft/accessibility-insights-web/pull/6278#issuecomment-1372793392
+        'value-no-vendor-prefix': null, // Disabled, we decided against using a tool like autoprefixer: https://github.com/microsoft/accessibility-insights-web/pull/6278#issuecomment-1372793392
 
         // STRETCH GOAL: limit shorthand for border-width, border-radius, border-color, border-style, grid-gap
         // Example: 'declaration-property-max-values': {  'border-width': 1 }
 
         // TO BE CONFIGURED: Enforce variable values
         // Example: 'declaration-property-value-allowed-list': { 'font-weight': ['/^\\$.*$/']},
-
-        // Requires investigation
-        'property-no-vendor-prefix': null,
-        'value-no-vendor-prefix': null,
     },
 };

packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html

@@ -221,10 +221,8 @@
           0 3.2px 7.2px var(--box-shadow-132);
         margin-bottom: 16px;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
       }
 
       .instance-details-card-container.selected {
@@ -260,10 +258,8 @@
         display: table;
         table-layout: fixed;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;
@@ -830,14 +826,10 @@
       }
       .collapsible-container
         .collapsible-control[aria-expanded="false"]::before {
-        -webkit-transform: rotate(-45deg);
-        -ms-transform: rotate(-45deg);
         transform: rotate(-45deg);
       }
       .collapsible-container
         .collapsible-control[aria-expanded="true"]::before {
-        -webkit-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
         transform: rotate(45deg);
       }
       .collapsible-container .collapsible-content[aria-hidden="true"] {
@@ -889,7 +881,7 @@
         margin-bottom: 16px;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
       }
       .instance-details-card-container--KLHTp.selected--wEA4l {
         outline: 5px solid var(--communication-tint-10);
@@ -919,7 +911,7 @@
         table-layout: fixed;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;

packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html

@@ -221,10 +221,8 @@
           0 3.2px 7.2px var(--box-shadow-132);
         margin-bottom: 16px;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
       }
 
       .instance-details-card-container.selected {
@@ -260,10 +258,8 @@
         display: table;
         table-layout: fixed;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;
@@ -830,14 +826,10 @@
       }
       .collapsible-container
         .collapsible-control[aria-expanded="false"]::before {
-        -webkit-transform: rotate(-45deg);
-        -ms-transform: rotate(-45deg);
         transform: rotate(-45deg);
       }
       .collapsible-container
         .collapsible-control[aria-expanded="true"]::before {
-        -webkit-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
         transform: rotate(45deg);
       }
       .collapsible-container .collapsible-content[aria-hidden="true"] {
@@ -889,7 +881,7 @@
         margin-bottom: 16px;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
       }
       .instance-details-card-container--KLHTp.selected--wEA4l {
         outline: 5px solid var(--communication-tint-10);
@@ -919,7 +911,7 @@
         table-layout: fixed;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;

packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-issues.snap.html

@@ -221,10 +221,8 @@
           0 3.2px 7.2px var(--box-shadow-132);
         margin-bottom: 16px;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
       }
 
       .instance-details-card-container.selected {
@@ -260,10 +258,8 @@
         display: table;
         table-layout: fixed;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;
@@ -830,14 +826,10 @@
       }
       .collapsible-container
         .collapsible-control[aria-expanded="false"]::before {
-        -webkit-transform: rotate(-45deg);
-        -ms-transform: rotate(-45deg);
         transform: rotate(-45deg);
       }
       .collapsible-container
         .collapsible-control[aria-expanded="true"]::before {
-        -webkit-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
         transform: rotate(45deg);
       }
       .collapsible-container .collapsible-content[aria-hidden="true"] {
@@ -889,7 +881,7 @@
         margin-bottom: 16px;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
       }
       .instance-details-card-container--KLHTp.selected--wEA4l {
         outline: 5px solid var(--communication-tint-10);
@@ -919,7 +911,7 @@
         table-layout: fixed;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;

packages/report-e2e-tests/src/examples/combined-results-with-issues.snap.html

@@ -221,10 +221,8 @@
           0 3.2px 7.2px var(--box-shadow-132);
         margin-bottom: 16px;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
       }
 
       .instance-details-card-container.selected {
@@ -260,10 +258,8 @@
         display: table;
         table-layout: fixed;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;
@@ -830,14 +826,10 @@
       }
       .collapsible-container
         .collapsible-control[aria-expanded="false"]::before {
-        -webkit-transform: rotate(-45deg);
-        -ms-transform: rotate(-45deg);
         transform: rotate(-45deg);
       }
       .collapsible-container
         .collapsible-control[aria-expanded="true"]::before {
-        -webkit-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
         transform: rotate(45deg);
       }
       .collapsible-container .collapsible-content[aria-hidden="true"] {
@@ -889,7 +881,7 @@
         margin-bottom: 16px;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
       }
       .instance-details-card-container--KLHTp.selected--wEA4l {
         outline: 5px solid var(--communication-tint-10);
@@ -919,7 +911,7 @@
         table-layout: fixed;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;

packages/report-e2e-tests/src/examples/combined-results-without-issues.snap.html

@@ -221,10 +221,8 @@
           0 3.2px 7.2px var(--box-shadow-132);
         margin-bottom: 16px;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
       }
 
       .instance-details-card-container.selected {
@@ -260,10 +258,8 @@
         display: table;
         table-layout: fixed;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;
@@ -830,14 +826,10 @@
       }
       .collapsible-container
         .collapsible-control[aria-expanded="false"]::before {
-        -webkit-transform: rotate(-45deg);
-        -ms-transform: rotate(-45deg);
         transform: rotate(-45deg);
       }
       .collapsible-container
         .collapsible-control[aria-expanded="true"]::before {
-        -webkit-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
         transform: rotate(45deg);
       }
       .collapsible-container .collapsible-content[aria-hidden="true"] {
@@ -889,7 +881,7 @@
         margin-bottom: 16px;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
       }
       .instance-details-card-container--KLHTp.selected--wEA4l {
         outline: 5px solid var(--communication-tint-10);
@@ -919,7 +911,7 @@
         table-layout: fixed;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;

packages/report-e2e-tests/src/examples/summary-scan-with-issues.snap.html

@@ -221,10 +221,8 @@
           0 3.2px 7.2px var(--box-shadow-132);
         margin-bottom: 16px;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
       }
 
       .instance-details-card-container.selected {
@@ -260,10 +258,8 @@
         display: table;
         table-layout: fixed;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;
@@ -830,14 +826,10 @@
       }
       .collapsible-container
         .collapsible-control[aria-expanded="false"]::before {
-        -webkit-transform: rotate(-45deg);
-        -ms-transform: rotate(-45deg);
         transform: rotate(-45deg);
       }
       .collapsible-container
         .collapsible-control[aria-expanded="true"]::before {
-        -webkit-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
         transform: rotate(45deg);
       }
       .collapsible-container .collapsible-content[aria-hidden="true"] {
@@ -889,7 +881,7 @@
         margin-bottom: 16px;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
       }
       .instance-details-card-container--KLHTp.selected--wEA4l {
         outline: 5px solid var(--communication-tint-10);
@@ -919,7 +911,7 @@
         table-layout: fixed;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;

packages/report-e2e-tests/src/examples/summary-scan-without-issues.snap.html

@@ -221,10 +221,8 @@
           0 3.2px 7.2px var(--box-shadow-132);
         margin-bottom: 16px;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
       }
 
       .instance-details-card-container.selected {
@@ -260,10 +258,8 @@
         display: table;
         table-layout: fixed;
         width: -moz-available;
-        /* WebKit-based browsers will ignore this. */
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;
@@ -830,14 +826,10 @@
       }
       .collapsible-container
         .collapsible-control[aria-expanded="false"]::before {
-        -webkit-transform: rotate(-45deg);
-        -ms-transform: rotate(-45deg);
         transform: rotate(-45deg);
       }
       .collapsible-container
         .collapsible-control[aria-expanded="true"]::before {
-        -webkit-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
         transform: rotate(45deg);
       }
       .collapsible-container .collapsible-content[aria-hidden="true"] {
@@ -889,7 +881,7 @@
         margin-bottom: 16px;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
       }
       .instance-details-card-container--KLHTp.selected--wEA4l {
         outline: 5px solid var(--communication-tint-10);
@@ -919,7 +911,7 @@
         table-layout: fixed;
         width: -moz-available;
         width: -webkit-fill-available;
-        width: fill-available;
+        width: stretch;
         border-radius: inherit;
         border-collapse: collapse;
         overflow-wrap: break-word;

src/DetailsView/components/requirement-instructions.scss

@@ -22,7 +22,8 @@
     }
 
     ol {
-        -webkit-padding-start: 16px;
+        -webkit-padding-start: 16px; // Chrome versions before 87 use non-standard name: https://caniuse.com/mdn-css_properties_padding-inline-start
+        padding-inline-start: 16px;
     }
 
     ol ol {

src/DetailsView/components/static-content-common.scss

@@ -10,7 +10,8 @@
     margin-bottom: auto;
 
     ol {
-        -webkit-padding-start: 16px;
+        -webkit-padding-start: 16px; // Chrome versions before 87 use non-standard name: https://caniuse.com/mdn-css_properties_padding-inline-start
+        padding-inline-start: 16px;
 
         li ul li {
             list-style-type: disc;

src/common/components/cards/collapsible-component-cards.scss

@@ -4,12 +4,6 @@
 @import '../../../common/styles/colors.scss';
 
 .collapsible-container {
-    @mixin transform($property) {
-        -webkit-transform: $property;
-        -ms-transform: $property;
-        transform: $property;
-    }
-
     %common-control-chevron {
         display: inline-block;
         border-right: 1px solid $secondary-text;
@@ -42,12 +36,14 @@
 
     .collapsible-control[aria-expanded='false']::before {
         @extend %common-control-chevron;
-        @include transform(rotate(-45deg));
+
+        transform: rotate(-45deg);
     }
 
     .collapsible-control[aria-expanded='true']::before {
         @extend %common-control-chevron;
-        @include transform(rotate(45deg));
+
+        transform: rotate(45deg);
     }
 
     .collapsible-container-content {

src/popup/Styles/popup.scss

@@ -115,8 +115,6 @@ html {
 #popup-container,
 #popup-container * {
     box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
 }
 
 #popup-container :is(h1, h2, h3, h4, h5, h6) {

src/reports/assessment-report.scss

@@ -12,12 +12,8 @@
 
 * {
     font-family: $font-family;
-    -webkit-print-color-adjust: exact;
-
-    /* Chrome, Safari */
-    color-adjust: exact;
-
-    /* Firefox */
+    -webkit-print-color-adjust: exact; // Requires vendor prefix: https://caniuse.com/mdn-css_properties_print-color-adjust
+    print-color-adjust: exact;
 }
 
 body {

src/reports/automated-checks-report.scss

@@ -69,12 +69,6 @@ $outcome-not-applicable-summary-color: $neutral-outcome;
 }
 
 .collapsible-container {
-    @mixin transform($property) {
-        -webkit-transform: $property;
-        -ms-transform: $property;
-        transform: $property;
-    }
-
     .collapsible-control {
         font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont,
             Roboto, 'Helvetica Neue', Helvetica, Ubuntu, Arial, sans-serif, 'Apple Color Emoji',
@@ -101,12 +95,14 @@ $outcome-not-applicable-summary-color: $neutral-outcome;
 
     .collapsible-control[aria-expanded='false']::before {
         @extend %common-control-chevron;
-        @include transform(rotate(-45deg));
+
+        transform: rotate(-45deg);
     }
 
     .collapsible-control[aria-expanded='true']::before {
         @extend %common-control-chevron;
-        @include transform(rotate(45deg));
+
+        transform: rotate(45deg);
     }
 
     .collapsible-content {

src/reports/components/instance-details.scss

@@ -5,13 +5,10 @@
 @import '../../common/styles/fonts.scss';
 
 @mixin fill-available-width {
+    // `stretch` is experimental: https://caniuse.com/mdn-css_properties_width_stretch
     width: -moz-available;
-
-    /* WebKit-based browsers will ignore this. */
     width: -webkit-fill-available;
-
-    /* Mozilla-based browsers will ignore this. */
-    width: fill-available;
+    width: stretch;
 }
 
 .hidden-highlight-button {

src/views/content/content.scss

@@ -66,7 +66,8 @@
     }
 
     ol {
-        -webkit-padding-start: 16px;
+        -webkit-padding-start: 16px; // Chrome versions before 87 use non-standard name: https://caniuse.com/mdn-css_properties_padding-inline-start
+        padding-inline-start: 16px;
 
         li ul li {
             list-style-type: disc;