diff --git a/assets/scripts/customizer-a11y.js b/assets/scripts/customizer-a11y.js new file mode 100644 index 0000000..f5b3feb --- /dev/null +++ b/assets/scripts/customizer-a11y.js @@ -0,0 +1,55 @@ +const { __ } = wp.i18n + +document.addEventListener( 'DOMContentLoaded', function () { + + function addAttribute( selector, att, val ){ + let e = document.querySelectorAll( selector ); + for ( let i=0; i < e.length; i++ ) { + e[ i ].setAttribute( att, val ); + } + } + + // Add aria-label attribute to color picker slider + // https://github.com/Automattic/Iris/issues/69 + addAttribute( 'div.iris-slider.iris-strip', 'aria-label', __( 'Gradient selector', 'pressbooks' ) ); + addAttribute( '.ui-slider-handle', 'aria-label', __( 'Gradient selector', 'pressbooks' ) ); + + // Add aria-label attributes to color picker palette boxes + // https://github.com/Automattic/Iris/issues/69 + ( function (){ + let colors = document.querySelectorAll( 'a.iris-palette' ); + + for ( let i=0; i < colors.length; i++ ) { + let irisPalette = colors[ i ]; + let rgb = colors[ i ].style.backgroundColor; + let color = ''; + + if ( rgb === 'rgb(0, 0, 0)' ){ + color = __( 'Black', 'pressbooks' ) + } + if ( rgb === 'rgb(255, 255, 255)' ){ + color = __( 'White', 'pressbooks' ) + } + if ( rgb === 'rgb(221, 51, 51)' ){ + color = __( 'Red', 'pressbooks' ) + } + if ( rgb === 'rgb(221, 153, 51)' ){ + color = __( 'Orange', 'pressbooks' ) + } + if ( rgb === 'rgb(238, 238, 34)' ){ + color = __( 'Yellow', 'pressbooks' ) + } + if ( rgb === 'rgb(129, 215, 66)' ){ + color = __( 'Green', 'pressbooks' ) + } + if ( rgb === 'rgb(30, 115, 190)' ){ + color = __( 'Blue', 'pressbooks' ) + } + if ( rgb === 'rgb(130, 36, 227)' ){ + color = __( 'Purple', 'pressbooks' ) + } + + irisPalette.setAttribute( 'aria-label', __( 'Select ' + color, 'pressbooks' ) ); + } + } )(); +} ); diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json index 753ce5c..847d878 100644 --- a/dist/mix-manifest.json +++ b/dist/mix-manifest.json @@ -5,6 +5,7 @@ "/scripts/call-to-action.js": "/scripts/call-to-action.js?id=14b2ac09b5fc52660522", "/scripts/catalog-admin.js": "/scripts/catalog-admin.js?id=43511dff74631c962103", "/scripts/customizer.js": "/scripts/customizer.js?id=cd5dc6157cc6b89dc521", - "/scripts/customizer-toggle.js": "/scripts/customizer-toggle.js?id=1c22f3d5b5cb63f75533", - "/scripts/page-section.js": "/scripts/page-section.js?id=b62a3319a10d83a36aea" + "/scripts/customizer-a11y.js": "/scripts/customizer-a11y.js?id=1707e48c6bdf1a369423", + "/scripts/customizer-toggle.js": "/scripts/customizer-toggle.js?id=55ecf43c7085bfe814bb", + "/scripts/page-section.js": "/scripts/page-section.js?id=c5e96163966f3eafa3ef" } diff --git a/dist/scripts/customizer-a11y.js b/dist/scripts/customizer-a11y.js new file mode 100644 index 0000000..ed49050 --- /dev/null +++ b/dist/scripts/customizer-a11y.js @@ -0,0 +1 @@ +!function(e){var r={};function t(o){if(r[o])return r[o].exports;var n=r[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,t),n.l=!0,n.exports}t.m=e,t.c=r,t.d=function(e,r,o){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:o})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)t.d(o,n,function(r){return e[r]}.bind(null,n));return o},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="/",t(t.s=4)}({4:function(e,r,t){e.exports=t("jfXF")},jfXF:function(e,r){var t=wp.i18n.__;document.addEventListener("DOMContentLoaded",function(){function e(e,r,t){for(var o=document.querySelectorAll(e),n=0;nInsert your page section content here.

[/aldine_page_section]')}})}})},createControl:function(e,t){return null}}),tinymce.PluginManager.add("aldine_page_section",tinymce.plugins.aldine_page_section)}}); \ No newline at end of file +!function(e){var t={};function n(i){if(t[i])return t[i].exports;var a=t[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(i,a,function(t){return e[t]}.bind(null,a));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=6)}({6:function(e,t,n){e.exports=n("eeN9")},eeN9:function(e,t){tinymce.create("tinymce.plugins.aldine_page_section",{init:function(e,t){e.addButton("aldine_page_section",{title:aldine.page_section.title,icon:"icon dashicons-layout",onclick:function(){e.windowManager.open({title:aldine.page_section.title,body:[{type:"textbox",name:"title",label:aldine.page_section.title_label,value:aldine.page_section.title},{type:"listbox",name:"variant",label:"Variant",values:[{text:aldine.page_section.standard,value:""},{text:aldine.page_section.accent,value:"accent"},{text:aldine.page_section.bordered,value:"bordered"},{text:aldine.page_section.borderless,value:"borderless"}],value:""}],onsubmit:function(t){e.insertContent('[aldine_page_section title="'+t.data.title+'" variant="'+t.data.variant+'"]

Insert your page section content here.

[/aldine_page_section]')}})}})},createControl:function(e,t){return null}}),tinymce.PluginManager.add("aldine_page_section",tinymce.plugins.aldine_page_section)}}); \ No newline at end of file diff --git a/functions.php b/functions.php index 446b540..671cec6 100644 --- a/functions.php +++ b/functions.php @@ -65,7 +65,7 @@ add_action( 'updated_option', '\Aldine\Actions\add_color_variants', 10, 3 ); add_action( 'customize_register', '\Aldine\Customizer\customize_register' ); add_action( 'customize_preview_init', '\Aldine\Customizer\customize_preview_js' ); add_action( 'customize_controls_enqueue_scripts', '\Aldine\Customizer\enqueue_color_contrast_validator' ); -add_action( 'customize_controls_enqueue_scripts', '\Aldine\Customizer\enqueue_customizer_toggle' ); +add_action( 'customize_controls_enqueue_scripts', '\Aldine\Customizer\enqueue_customizer_scripts' ); // Shortcodes add_shortcode( 'aldine_page_section', '\Aldine\Shortcodes\page_section' ); diff --git a/inc/customizer/namespace.php b/inc/customizer/namespace.php index 31e1aab..c689e14 100644 --- a/inc/customizer/namespace.php +++ b/inc/customizer/namespace.php @@ -292,9 +292,10 @@ function enqueue_color_contrast_validator() { ); } -function enqueue_customizer_toggle() { +function enqueue_customizer_scripts() { $assets = new Assets( 'pressbooks-aldine', 'theme' ); $assets->setSrcDirectory( 'assets' )->setDistDirectory( 'dist' ); + wp_enqueue_script( 'aldine/customizer-a11y', $assets->getPath( 'scripts/customizer-a11y.js' ), [ 'wp.i18n' ], false, null ); wp_enqueue_script( 'aldine/customizer-toggle', $assets->getPath( 'scripts/customizer-toggle.js' ), false, null ); } diff --git a/webpack.mix.js b/webpack.mix.js index 018a669..9ca5937 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -45,6 +45,7 @@ mix .js( `${assets}/scripts/call-to-action.js`, `${dist}/scripts` ) .js( `${assets}/scripts/catalog-admin.js`, `${dist}/scripts` ) .js( `${assets}/scripts/customizer.js`, `${dist}/scripts` ) + .js( `${assets}/scripts/customizer-a11y.js`, `${dist}/scripts` ) .js( `${assets}/scripts/customizer-toggle.js`, `${dist}/scripts` ) .js( `${assets}/scripts/page-section.js`, `${dist}/scripts` );