@wordpress/interface 6.8.3 → 6.9.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.9.0 (2024-10-03)
+
 ## 6.8.0 (2024-09-19)
 
 ## 6.7.0 (2024-09-05)

package/build/components/complementary-area-toggle/index.js

@@ -18,6 +18,15 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
+/**
+ * Whether the role supports checked state.
+ *
+ * @param {import('react').AriaRole} role Role.
+ * @return {boolean} Whether the role supports checked state.
+ * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+ */function roleSupportsCheckedState(role) {
+  return ['checkbox', 'option', 'radio', 'switch', 'menuitemcheckbox', 'menuitemradio', 'treeitem'].includes(role);
+}
 function ComplementaryAreaToggle({
   as = _components.Button,
   scope,
@@ -36,7 +45,10 @@ function ComplementaryAreaToggle({
   } = (0, _data.useDispatch)(_store.store);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentToUse, {
     icon: selectedIcon && isSelected ? selectedIcon : icon,
-    "aria-controls": identifier.replace('/', ':'),
+    "aria-controls": identifier.replace('/', ':')
+    // Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+    ,
+    "aria-checked": roleSupportsCheckedState(props.role) ? isSelected : undefined,
     onClick: () => {
       if (isSelected) {
         disableComplementaryArea(scope);

package/build/components/complementary-area-toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_data","_store","_complementaryAreaContext","_interopRequireDefault","_jsxRuntime","ComplementaryAreaToggle","as","Button","scope","identifier","icon","selectedIcon","name","shortcut","props","ComponentToUse","isSelected","useSelect","select","interfaceStore","getActiveComplementaryArea","enableComplementaryArea","disableComplementaryArea","useDispatch","jsx","replace","onClick","_default","exports","default","complementaryAreaContext"],"sources":["@wordpress/interface/src/components/complementary-area-toggle/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as interfaceStore } from '../../store';\nimport complementaryAreaContext from '../complementary-area-context';\n\nfunction ComplementaryAreaToggle( {\n\tas = Button,\n\tscope,\n\tidentifier,\n\ticon,\n\tselectedIcon,\n\tname,\n\tshortcut,\n\t...props\n} ) {\n\tconst ComponentToUse = as;\n\tconst isSelected = useSelect(\n\t\t( select ) =>\n\t\t\tselect( interfaceStore ).getActiveComplementaryArea( scope ) ===\n\t\t\tidentifier,\n\t\t[ identifier, scope ]\n\t);\n\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\n\treturn (\n\t\t<ComponentToUse\n\t\t\ticon={ selectedIcon && isSelected ? selectedIcon : icon }\n\t\t\taria-controls={ identifier.replace( '/', ':' ) }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( isSelected ) {\n\t\t\t\t\tdisableComplementaryArea( scope );\n\t\t\t\t} else {\n\t\t\t\t\tenableComplementaryArea( scope, identifier );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tshortcut={ shortcut }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default complementaryAreaContext( ComplementaryAreaToggle );\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,yBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAqE,IAAAK,WAAA,GAAAL,OAAA;AAVrE;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASM,uBAAuBA,CAAE;EACjCC,EAAE,GAAGC,kBAAM;EACXC,KAAK;EACLC,UAAU;EACVC,IAAI;EACJC,YAAY;EACZC,IAAI;EACJC,QAAQ;EACR,GAAGC;AACJ,CAAC,EAAG;EACH,MAAMC,cAAc,GAAGT,EAAE;EACzB,MAAMU,UAAU,GAAG,IAAAC,eAAS,EACzBC,MAAM,IACPA,MAAM,CAAEC,YAAe,CAAC,CAACC,0BAA0B,CAAEZ,KAAM,CAAC,KAC5DC,UAAU,EACX,CAAEA,UAAU,EAAED,KAAK,CACpB,CAAC;EAED,MAAM;IAAEa,uBAAuB;IAAEC;EAAyB,CAAC,GAC1D,IAAAC,iBAAW,EAAEJ,YAAe,CAAC;EAE9B,oBACC,IAAAf,WAAA,CAAAoB,GAAA,EAACT,cAAc;IACdL,IAAI,EAAGC,YAAY,IAAIK,UAAU,GAAGL,YAAY,GAAGD,IAAM;IACzD,iBAAgBD,UAAU,CAACgB,OAAO,CAAE,GAAG,EAAE,GAAI,CAAG;IAChDC,OAAO,EAAGA,CAAA,KAAM;MACf,IAAKV,UAAU,EAAG;QACjBM,wBAAwB,CAAEd,KAAM,CAAC;MAClC,CAAC,MAAM;QACNa,uBAAuB,CAAEb,KAAK,EAAEC,UAAW,CAAC;MAC7C;IACD,CAAG;IACHI,QAAQ,EAAGA,QAAU;IAAA,GAChBC;EAAK,CACV,CAAC;AAEJ;AAAC,IAAAa,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc,IAAAC,iCAAwB,EAAEzB,uBAAwB,CAAC","ignoreList":[]}
+{"version":3,"names":["_components","require","_data","_store","_complementaryAreaContext","_interopRequireDefault","_jsxRuntime","roleSupportsCheckedState","role","includes","ComplementaryAreaToggle","as","Button","scope","identifier","icon","selectedIcon","name","shortcut","props","ComponentToUse","isSelected","useSelect","select","interfaceStore","getActiveComplementaryArea","enableComplementaryArea","disableComplementaryArea","useDispatch","jsx","replace","undefined","onClick","_default","exports","default","complementaryAreaContext"],"sources":["@wordpress/interface/src/components/complementary-area-toggle/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as interfaceStore } from '../../store';\nimport complementaryAreaContext from '../complementary-area-context';\n\n/**\n * Whether the role supports checked state.\n *\n * @param {import('react').AriaRole} role Role.\n * @return {boolean} Whether the role supports checked state.\n * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n */\nfunction roleSupportsCheckedState( role ) {\n\treturn [\n\t\t'checkbox',\n\t\t'option',\n\t\t'radio',\n\t\t'switch',\n\t\t'menuitemcheckbox',\n\t\t'menuitemradio',\n\t\t'treeitem',\n\t].includes( role );\n}\n\nfunction ComplementaryAreaToggle( {\n\tas = Button,\n\tscope,\n\tidentifier,\n\ticon,\n\tselectedIcon,\n\tname,\n\tshortcut,\n\t...props\n} ) {\n\tconst ComponentToUse = as;\n\tconst isSelected = useSelect(\n\t\t( select ) =>\n\t\t\tselect( interfaceStore ).getActiveComplementaryArea( scope ) ===\n\t\t\tidentifier,\n\t\t[ identifier, scope ]\n\t);\n\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\n\treturn (\n\t\t<ComponentToUse\n\t\t\ticon={ selectedIcon && isSelected ? selectedIcon : icon }\n\t\t\taria-controls={ identifier.replace( '/', ':' ) }\n\t\t\t// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n\t\t\taria-checked={\n\t\t\t\troleSupportsCheckedState( props.role ) ? isSelected : undefined\n\t\t\t}\n\t\t\tonClick={ () => {\n\t\t\t\tif ( isSelected ) {\n\t\t\t\t\tdisableComplementaryArea( scope );\n\t\t\t\t} else {\n\t\t\t\t\tenableComplementaryArea( scope, identifier );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tshortcut={ shortcut }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default complementaryAreaContext( ComplementaryAreaToggle );\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,yBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAqE,IAAAK,WAAA,GAAAL,OAAA;AAVrE;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,SAASM,wBAAwBA,CAAEC,IAAI,EAAG;EACzC,OAAO,CACN,UAAU,EACV,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,eAAe,EACf,UAAU,CACV,CAACC,QAAQ,CAAED,IAAK,CAAC;AACnB;AAEA,SAASE,uBAAuBA,CAAE;EACjCC,EAAE,GAAGC,kBAAM;EACXC,KAAK;EACLC,UAAU;EACVC,IAAI;EACJC,YAAY;EACZC,IAAI;EACJC,QAAQ;EACR,GAAGC;AACJ,CAAC,EAAG;EACH,MAAMC,cAAc,GAAGT,EAAE;EACzB,MAAMU,UAAU,GAAG,IAAAC,eAAS,EACzBC,MAAM,IACPA,MAAM,CAAEC,YAAe,CAAC,CAACC,0BAA0B,CAAEZ,KAAM,CAAC,KAC5DC,UAAU,EACX,CAAEA,UAAU,EAAED,KAAK,CACpB,CAAC;EAED,MAAM;IAAEa,uBAAuB;IAAEC;EAAyB,CAAC,GAC1D,IAAAC,iBAAW,EAAEJ,YAAe,CAAC;EAE9B,oBACC,IAAAlB,WAAA,CAAAuB,GAAA,EAACT,cAAc;IACdL,IAAI,EAAGC,YAAY,IAAIK,UAAU,GAAGL,YAAY,GAAGD,IAAM;IACzD,iBAAgBD,UAAU,CAACgB,OAAO,CAAE,GAAG,EAAE,GAAI;IAC7C;IAAA;IACA,gBACCvB,wBAAwB,CAAEY,KAAK,CAACX,IAAK,CAAC,GAAGa,UAAU,GAAGU,SACtD;IACDC,OAAO,EAAGA,CAAA,KAAM;MACf,IAAKX,UAAU,EAAG;QACjBM,wBAAwB,CAAEd,KAAM,CAAC;MAClC,CAAC,MAAM;QACNa,uBAAuB,CAAEb,KAAK,EAAEC,UAAW,CAAC;MAC7C;IACD,CAAG;IACHI,QAAQ,EAAGA,QAAU;IAAA,GAChBC;EAAK,CACV,CAAC;AAEJ;AAAC,IAAAc,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc,IAAAC,iCAAwB,EAAE1B,uBAAwB,CAAC","ignoreList":[]}

package/build-module/components/complementary-area-toggle/index.js

@@ -9,7 +9,18 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import { store as interfaceStore } from '../../store';
 import complementaryAreaContext from '../complementary-area-context';
+
+/**
+ * Whether the role supports checked state.
+ *
+ * @param {import('react').AriaRole} role Role.
+ * @return {boolean} Whether the role supports checked state.
+ * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+function roleSupportsCheckedState(role) {
+  return ['checkbox', 'option', 'radio', 'switch', 'menuitemcheckbox', 'menuitemradio', 'treeitem'].includes(role);
+}
 function ComplementaryAreaToggle({
   as = Button,
   scope,
@@ -28,7 +39,10 @@ function ComplementaryAreaToggle({
   } = useDispatch(interfaceStore);
   return /*#__PURE__*/_jsx(ComponentToUse, {
     icon: selectedIcon && isSelected ? selectedIcon : icon,
-    "aria-controls": identifier.replace('/', ':'),
+    "aria-controls": identifier.replace('/', ':')
+    // Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+    ,
+    "aria-checked": roleSupportsCheckedState(props.role) ? isSelected : undefined,
     onClick: () => {
       if (isSelected) {
         disableComplementaryArea(scope);

package/build-module/components/complementary-area-toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Button","useDispatch","useSelect","store","interfaceStore","complementaryAreaContext","jsx","_jsx","ComplementaryAreaToggle","as","scope","identifier","icon","selectedIcon","name","shortcut","props","ComponentToUse","isSelected","select","getActiveComplementaryArea","enableComplementaryArea","disableComplementaryArea","replace","onClick"],"sources":["@wordpress/interface/src/components/complementary-area-toggle/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as interfaceStore } from '../../store';\nimport complementaryAreaContext from '../complementary-area-context';\n\nfunction ComplementaryAreaToggle( {\n\tas = Button,\n\tscope,\n\tidentifier,\n\ticon,\n\tselectedIcon,\n\tname,\n\tshortcut,\n\t...props\n} ) {\n\tconst ComponentToUse = as;\n\tconst isSelected = useSelect(\n\t\t( select ) =>\n\t\t\tselect( interfaceStore ).getActiveComplementaryArea( scope ) ===\n\t\t\tidentifier,\n\t\t[ identifier, scope ]\n\t);\n\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\n\treturn (\n\t\t<ComponentToUse\n\t\t\ticon={ selectedIcon && isSelected ? selectedIcon : icon }\n\t\t\taria-controls={ identifier.replace( '/', ':' ) }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( isSelected ) {\n\t\t\t\t\tdisableComplementaryArea( scope );\n\t\t\t\t} else {\n\t\t\t\t\tenableComplementaryArea( scope, identifier );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tshortcut={ shortcut }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default complementaryAreaContext( ComplementaryAreaToggle );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,WAAW,EAAEC,SAAS,QAAQ,iBAAiB;;AAExD;AACA;AACA;AACA,SAASC,KAAK,IAAIC,cAAc,QAAQ,aAAa;AACrD,OAAOC,wBAAwB,MAAM,+BAA+B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAErE,SAASC,uBAAuBA,CAAE;EACjCC,EAAE,GAAGT,MAAM;EACXU,KAAK;EACLC,UAAU;EACVC,IAAI;EACJC,YAAY;EACZC,IAAI;EACJC,QAAQ;EACR,GAAGC;AACJ,CAAC,EAAG;EACH,MAAMC,cAAc,GAAGR,EAAE;EACzB,MAAMS,UAAU,GAAGhB,SAAS,CACzBiB,MAAM,IACPA,MAAM,CAAEf,cAAe,CAAC,CAACgB,0BAA0B,CAAEV,KAAM,CAAC,KAC5DC,UAAU,EACX,CAAEA,UAAU,EAAED,KAAK,CACpB,CAAC;EAED,MAAM;IAAEW,uBAAuB;IAAEC;EAAyB,CAAC,GAC1DrB,WAAW,CAAEG,cAAe,CAAC;EAE9B,oBACCG,IAAA,CAACU,cAAc;IACdL,IAAI,EAAGC,YAAY,IAAIK,UAAU,GAAGL,YAAY,GAAGD,IAAM;IACzD,iBAAgBD,UAAU,CAACY,OAAO,CAAE,GAAG,EAAE,GAAI,CAAG;IAChDC,OAAO,EAAGA,CAAA,KAAM;MACf,IAAKN,UAAU,EAAG;QACjBI,wBAAwB,CAAEZ,KAAM,CAAC;MAClC,CAAC,MAAM;QACNW,uBAAuB,CAAEX,KAAK,EAAEC,UAAW,CAAC;MAC7C;IACD,CAAG;IACHI,QAAQ,EAAGA,QAAU;IAAA,GAChBC;EAAK,CACV,CAAC;AAEJ;AAEA,eAAeX,wBAAwB,CAAEG,uBAAwB,CAAC","ignoreList":[]}
+{"version":3,"names":["Button","useDispatch","useSelect","store","interfaceStore","complementaryAreaContext","jsx","_jsx","roleSupportsCheckedState","role","includes","ComplementaryAreaToggle","as","scope","identifier","icon","selectedIcon","name","shortcut","props","ComponentToUse","isSelected","select","getActiveComplementaryArea","enableComplementaryArea","disableComplementaryArea","replace","undefined","onClick"],"sources":["@wordpress/interface/src/components/complementary-area-toggle/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as interfaceStore } from '../../store';\nimport complementaryAreaContext from '../complementary-area-context';\n\n/**\n * Whether the role supports checked state.\n *\n * @param {import('react').AriaRole} role Role.\n * @return {boolean} Whether the role supports checked state.\n * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n */\nfunction roleSupportsCheckedState( role ) {\n\treturn [\n\t\t'checkbox',\n\t\t'option',\n\t\t'radio',\n\t\t'switch',\n\t\t'menuitemcheckbox',\n\t\t'menuitemradio',\n\t\t'treeitem',\n\t].includes( role );\n}\n\nfunction ComplementaryAreaToggle( {\n\tas = Button,\n\tscope,\n\tidentifier,\n\ticon,\n\tselectedIcon,\n\tname,\n\tshortcut,\n\t...props\n} ) {\n\tconst ComponentToUse = as;\n\tconst isSelected = useSelect(\n\t\t( select ) =>\n\t\t\tselect( interfaceStore ).getActiveComplementaryArea( scope ) ===\n\t\t\tidentifier,\n\t\t[ identifier, scope ]\n\t);\n\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\n\treturn (\n\t\t<ComponentToUse\n\t\t\ticon={ selectedIcon && isSelected ? selectedIcon : icon }\n\t\t\taria-controls={ identifier.replace( '/', ':' ) }\n\t\t\t// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n\t\t\taria-checked={\n\t\t\t\troleSupportsCheckedState( props.role ) ? isSelected : undefined\n\t\t\t}\n\t\t\tonClick={ () => {\n\t\t\t\tif ( isSelected ) {\n\t\t\t\t\tdisableComplementaryArea( scope );\n\t\t\t\t} else {\n\t\t\t\t\tenableComplementaryArea( scope, identifier );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tshortcut={ shortcut }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default complementaryAreaContext( ComplementaryAreaToggle );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,WAAW,EAAEC,SAAS,QAAQ,iBAAiB;;AAExD;AACA;AACA;AACA,SAASC,KAAK,IAAIC,cAAc,QAAQ,aAAa;AACrD,OAAOC,wBAAwB,MAAM,+BAA+B;;AAEpE;AACA;AACA;AACA;AACA;AACA;AACA;AANA,SAAAC,GAAA,IAAAC,IAAA;AAOA,SAASC,wBAAwBA,CAAEC,IAAI,EAAG;EACzC,OAAO,CACN,UAAU,EACV,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,eAAe,EACf,UAAU,CACV,CAACC,QAAQ,CAAED,IAAK,CAAC;AACnB;AAEA,SAASE,uBAAuBA,CAAE;EACjCC,EAAE,GAAGZ,MAAM;EACXa,KAAK;EACLC,UAAU;EACVC,IAAI;EACJC,YAAY;EACZC,IAAI;EACJC,QAAQ;EACR,GAAGC;AACJ,CAAC,EAAG;EACH,MAAMC,cAAc,GAAGR,EAAE;EACzB,MAAMS,UAAU,GAAGnB,SAAS,CACzBoB,MAAM,IACPA,MAAM,CAAElB,cAAe,CAAC,CAACmB,0BAA0B,CAAEV,KAAM,CAAC,KAC5DC,UAAU,EACX,CAAEA,UAAU,EAAED,KAAK,CACpB,CAAC;EAED,MAAM;IAAEW,uBAAuB;IAAEC;EAAyB,CAAC,GAC1DxB,WAAW,CAAEG,cAAe,CAAC;EAE9B,oBACCG,IAAA,CAACa,cAAc;IACdL,IAAI,EAAGC,YAAY,IAAIK,UAAU,GAAGL,YAAY,GAAGD,IAAM;IACzD,iBAAgBD,UAAU,CAACY,OAAO,CAAE,GAAG,EAAE,GAAI;IAC7C;IAAA;IACA,gBACClB,wBAAwB,CAAEW,KAAK,CAACV,IAAK,CAAC,GAAGY,UAAU,GAAGM,SACtD;IACDC,OAAO,EAAGA,CAAA,KAAM;MACf,IAAKP,UAAU,EAAG;QACjBI,wBAAwB,CAAEZ,KAAM,CAAC;MAClC,CAAC,MAAM;QACNW,uBAAuB,CAAEX,KAAK,EAAEC,UAAW,CAAC;MAC7C;IACD,CAAG;IACHI,QAAQ,EAAGA,QAAU;IAAA,GAChBC;EAAK,CACV,CAAC;AAEJ;AAEA,eAAed,wBAAwB,CAAEM,uBAAwB,CAAC","ignoreList":[]}

package/build-style/style-rtl.css

@@ -29,6 +29,9 @@
 /**
  * Fonts & basic variables.
  */
+/**
+ * Typography
+ */
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -43,7 +46,10 @@
  * Dimensions.
  */
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
  */
 /**
  * Block & Editor UI.
@@ -67,6 +73,9 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoint mixins
  */

package/build-style/style.css

@@ -29,6 +29,9 @@
 /**
  * Fonts & basic variables.
  */
+/**
+ * Typography
+ */
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -43,7 +46,10 @@
  * Dimensions.
  */
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
  */
 /**
  * Block & Editor UI.
@@ -67,6 +73,9 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoint mixins
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "6.8.3",
+	"version": "6.9.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,18 +33,18 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^4.8.2",
-		"@wordpress/components": "^28.8.3",
-		"@wordpress/compose": "^7.8.3",
-		"@wordpress/data": "^10.8.3",
-		"@wordpress/deprecated": "^4.8.2",
-		"@wordpress/element": "^6.8.1",
-		"@wordpress/i18n": "^5.8.2",
-		"@wordpress/icons": "^10.8.2",
-		"@wordpress/plugins": "^7.8.3",
-		"@wordpress/preferences": "^4.8.3",
-		"@wordpress/private-apis": "^1.8.1",
-		"@wordpress/viewport": "^6.8.3",
+		"@wordpress/a11y": "^4.9.0",
+		"@wordpress/components": "^28.9.0",
+		"@wordpress/compose": "^7.9.0",
+		"@wordpress/data": "^10.9.0",
+		"@wordpress/deprecated": "^4.9.0",
+		"@wordpress/element": "^6.9.0",
+		"@wordpress/i18n": "^5.9.0",
+		"@wordpress/icons": "^10.9.0",
+		"@wordpress/plugins": "^7.9.0",
+		"@wordpress/preferences": "^4.9.0",
+		"@wordpress/private-apis": "^1.9.0",
+		"@wordpress/viewport": "^6.9.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -54,5 +54,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6187079697e13c3292eb098d6338523a6676c6e8"
+	"gitHead": "2e5495c635910cb34bfaca3c6258d2e989f66214"
 }

package/src/components/complementary-area-toggle/index.js

@@ -10,6 +10,25 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as interfaceStore } from '../../store';
 import complementaryAreaContext from '../complementary-area-context';
 
+/**
+ * Whether the role supports checked state.
+ *
+ * @param {import('react').AriaRole} role Role.
+ * @return {boolean} Whether the role supports checked state.
+ * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+ */
+function roleSupportsCheckedState( role ) {
+	return [
+		'checkbox',
+		'option',
+		'radio',
+		'switch',
+		'menuitemcheckbox',
+		'menuitemradio',
+		'treeitem',
+	].includes( role );
+}
+
 function ComplementaryAreaToggle( {
 	as = Button,
 	scope,
@@ -35,6 +54,10 @@ function ComplementaryAreaToggle( {
 		<ComponentToUse
 			icon={ selectedIcon && isSelected ? selectedIcon : icon }
 			aria-controls={ identifier.replace( '/', ':' ) }
+			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+			aria-checked={
+				roleSupportsCheckedState( props.role ) ? isSelected : undefined
+			}
 			onClick={ () => {
 				if ( isSelected ) {
 					disableComplementaryArea( scope );