A11y/4.3 quick fixes

CHANGELOG-WIP.md

@@ -8,7 +8,7 @@
 
 ### Changed
 - Improved the control panel accessibility. ([#11534](https://github.com/craftcms/cms/pull/11534), [#11565](https://github.com/craftcms/cms/pull/11565), [#11578](https://github.com/craftcms/cms/pull/11578), [#11589](https://github.com/craftcms/cms/pull/11589), [#11604](https://github.com/craftcms/cms/pull/11604), [#11610](https://github.com/craftcms/cms/pull/11610), [#11611](https://github.com/craftcms/cms/pull/11611), [#11613](https://github.com/craftcms/cms/pull/11613), [#11636](https://github.com/craftcms/cms/pull/11636), [#11703](https://github.com/craftcms/cms/pull/11703), [#11727](https://github.com/craftcms/cms/pull/11727), [#11763](https://github.com/craftcms/cms/pull/11763), [#11768](https://github.com/craftcms/cms/pull/11768), [#11775](https://github.com/craftcms/cms/pull/11775))
-- `users/session-info` responses now include a `csrfTokenName` key. ([#11706](https://github.com/craftcms/cms/pull/11706))
+- `users/session-info` responses now include a `csrfTokenName` key. ([#11706](https://github.com/craftcms/cms/pull/11706), [#11767](https://github.com/craftcms/cms/pull/11767))
 - `craft\helpers\Component::iconSvg()` now namespaces the SVG contents, and adds `aria-hidden="true"`. ([#11703](https://github.com/craftcms/cms/pull/11703))
 - `craft\services\Search::EVENT_BEFORE_INDEX_KEYWORDS` is now cancellable by setting `$event->isValid` to `false`. ([#11705](https://github.com/craftcms/cms/discussions/11705))
 - `checkboxSelect` inputs without `showAllOption: true` now post an empty value if no options were selected. ([#11748](https://github.com/craftcms/cms/issues/11748))

packages/craftcms-sass/_mixins.scss

@@ -148,9 +148,19 @@ $radioSize: 16px;
   font-size: 0.9em !important;
 }
 
-@function toRem($size) {
-  $remValue: calc($size / 16) + rem;
-  @return $remValue;
+@function toRem($values...) {
+  $max: length($values);
+  $remValues: '';
+
+  @for $i from 1 through $max {
+    $remValues: #{$remValues + calc(nth($values, $i) / 16)}rem;
+
+    @if $i < $max {
+      $remValues: #{$remValues + ' '};
+    }
+  }
+
+  @return $remValues;
 }
 
 @mixin fontSize($size) {
@@ -590,27 +600,33 @@ $radioSize: 16px;
 }
 
 @mixin placeholder-styles($color) {
-  ::-webkit-input-placeholder {
+  input::-webkit-input-placeholder,
+  textarea::-webkit-input-placeholder {
     color: $color;
   }
 
-  input:-ms-input-placeholder {
+  input:-ms-input-placeholder,
+  textarea:-ms-input-placeholder {
     color: $color;
   }
 
-  ::-ms-input-placeholder {
+  input::-ms-input-placeholder,
+  textarea::-ms-input-placeholder {
     color: $color;
   }
 
-  :-moz-placeholder {
+  input:-moz-placeholder,
+  textarea:-moz-placeholder {
     color: $color;
   }
 
-  ::-moz-placeholder {
+  input::-moz-placeholder,
+  textarea::-moz-placeholder {
     color: $color;
   }
 
-  ::placeholder {
+  input::placeholder,
+  textarea::placeholder {
     color: $color;
   }
 }

src/helpers/Cp.php

@@ -1306,6 +1306,7 @@ public static function addressFieldsHtml(Address $address): string
                 'value' => $address->addressLine1,
                 'required' => isset($requiredFields['addressLine1']),
                 'errors' => $address->getErrors('addressLine1'),
+                'autocomplete' => 'address-line1',
             ]) .
             static::textFieldHtml([
                 'label' => $address->getAttributeLabel('addressLine2'),
@@ -1314,6 +1315,7 @@ public static function addressFieldsHtml(Address $address): string
                 'value' => $address->addressLine2,
                 'required' => isset($requiredFields['addressLine2']),
                 'errors' => $address->getErrors('addressLine2'),
+                'autocomplete' => 'address-line2',
             ]) .
             self::_subdivisionField(
                 $address,
@@ -1351,6 +1353,7 @@ public static function addressFieldsHtml(Address $address): string
                 'value' => $address->postalCode,
                 'required' => isset($requiredFields['postalCode']),
                 'errors' => $address->getErrors('postalCode'),
+                'autocomplete' => 'postal-code',
             ]) .
             static::textFieldHtml([
                 'fieldClass' => array_filter([

src/web/assets/cp/src/css/_cp.scss

@@ -357,20 +357,20 @@ $systemInfoHoverBgColor: darken($grey800, 10%);
   border: 1px solid var(--gray-600);
   border-radius: 3px;
   display: inline-flex;
-  height: 20px;
+  height: toRem(20);
   box-sizing: content-box;
   font-size: 11px;
 
   & > .edition-name,
   & > .edition-trial {
-    padding: 6px 7px 5px;
+    padding: toRem(6, 7, 5);
     line-height: var(--s);
   }
 
   & > .edition-name {
     font-weight: 600;
     letter-spacing: 1.7px;
-    padding-right: 5px;
+    padding-right: toRem(5);
     text-transform: uppercase;
   }
 
@@ -1382,8 +1382,8 @@ li.breadcrumb-toggle-wrapper {
         .icon {
           @include margin-right(10px);
           flex-shrink: 1;
-          width: 18px;
-          height: 18px;
+          width: toRem(18);
+          height: toRem(18);
           word-break: normal;
           transition: margin-left linear 150ms, margin-right linear 150ms;
           opacity: 0.85;

src/web/assets/cp/src/css/_main.scss

@@ -289,7 +289,7 @@ h2,
   margin: 14px 0;
   font-size: 16px;
   font-weight: bold;
-  line-height: 20px;
+  line-height: 1.2;
 }
 
 h3,
@@ -6160,6 +6160,7 @@ body .selectize-dropdown {
 
 /* single select styles */
 .selectize.select {
+  @include placeholder-styles(var(--gray-700));
   height: 34px;
 
   &:not(.fullwidth) {
@@ -6336,7 +6337,7 @@ body .selectize-dropdown .active {
 .ui-datepicker-calendar th span,
 .ui-datepicker-calendar td a {
   display: block;
-  width: 26px;
+  width: toRem(26);
   line-height: 26px;
   text-align: center;
   color: var(--text-color);