mirror of
https://gh.wpcy.net/https://github.com/elementor/one-click-accessibility.git
synced 2026-04-23 17:03:34 +08:00
* Bump WP version * ♻️ Initial Refactor commit [APP-687] (#109) * Initial refactor commit * ✅ Added build and tests CI/CD * PR Rejects * Rejects leftover * Setup base (#110) * Initial refactor commit * ✅ Added build and tests CI/CD * update: add src for admin settings * update: incorrect constant names * update: namespace * add: accessibility settings * update: webpack to output files inside a folder * update: build output folders * update: removed commented code * update: npm scripts * add: webpack config * add: hooks * update: move admin setting to the module folder * update: assets loading logic * update: settings variable * update: removed duplicate css import * Update modules/settings/assets/js/api/index.js Co-authored-by: VasylD <vasyld@elementor.red> --------- Co-authored-by: Ohad <ohad@elementor.com> Co-authored-by: VasylD <vasyld@elementor.red> * [Infra] ✅ updated Github actions (#114) * updated github actions * removed composer github auth * PHPCS * removed package-lock.json from ignore to allow `npm ci` * added missing husky * ignore legacy * removed unused non existing import * Add connect modal (#111) * Initial refactor commit * ✅ Added build and tests CI/CD * update: add src for admin settings * update: incorrect constant names * update: namespace * add: accessibility settings * update: webpack to output files inside a folder * update: build output folders * update: removed commented code * update: npm scripts * add: webpack config * add: hooks * update: move admin setting to the module folder * update: assets loading logic * update: add rule to move jsx props to multiline imporving readability * add: connect modal * update: hooks import for better readability * update: replace functions with hooks * fix: alignment and style * update: imports * update: removed conflicting imports * fix: add compatibility for mobile devices --------- Co-authored-by: Ohad <ohad@elementor.com> * [APP 705] add connect module, settings and notification component (#112) * Initial refactor commit * ✅ Added build and tests CI/CD * update: add src for admin settings * update: incorrect constant names * update: namespace * add: accessibility settings * update: webpack to output files inside a folder * update: build output folders * update: removed commented code * update: npm scripts * add: webpack config * add: hooks * update: move admin setting to the module folder * update: assets loading logic * update: add rule to move jsx props to multiline imporving readability * add: connect modal * update: hooks import for better readability * update: replace functions with hooks * add: connect module * add: settings and get settings route * add: hooks and contexts to get settings * add: hooks * add: notification component * add: data api * add: settings provider and connect settings * add: husky * fix: formatting and text-domain * update: filter names * fix: hook import * add: set function for settings * add: prop-types package * update: refactor notification component and context * update: remove filter for authorize url * update: imports and exports of hooks * update: plugin settings context filename and relevant imports --------- Co-authored-by: Ohad <ohad@elementor.com> * [APP 707] general setting components (#113) * Initial refactor commit * ✅ Added build and tests CI/CD * update: add src for admin settings * update: incorrect constant names * update: namespace * add: accessibility settings * update: webpack to output files inside a folder * update: build output folders * update: removed commented code * update: npm scripts * add: webpack config * add: hooks * update: move admin setting to the module folder * update: assets loading logic * update: add rule to move jsx props to multiline imporving readability * add: connect modal * update: hooks import for better readability * update: replace functions with hooks * add: connect module * add: settings and get settings route * add: hooks and contexts to get settings * add: hooks * add: notification component * add: data api * add: settings provider and connect settings * add: husky * add: icon size control * fix: icon size control labels * add: icon select component * add: color picker component * add: accessibility icons * add: icon export * update: add icons to the component * fix: styling for the icon select control * update: color picker with react-colorful component * update: icon size component with live icon design * fix: styling of radio boxes * add: icon design settings layout * add: position settings layout * add: layout exports * add: alignment matrix and position control components * add: position settings & position settings for mobile layout * fix: formatting and text-domain * update: filter names * fix: hook import * add: set function for settings * add: prop-types package * update: refactor notification component and context * update: remove filter for authorize url * Update modules/settings/assets/js/components/color-picker/style.css Co-authored-by: Raz Ohad <admin@bainternet.info> * update: color picker class name --------- Co-authored-by: Ohad <ohad@elementor.com> Co-authored-by: Raz Ohad <admin@bainternet.info> * [App 780] Navigation Sidebar (#115) * Initial refactor commit * ✅ Added build and tests CI/CD * update: add src for admin settings * update: incorrect constant names * update: namespace * add: accessibility settings * update: webpack to output files inside a folder * update: build output folders * update: removed commented code * update: npm scripts * add: webpack config * add: hooks * update: move admin setting to the module folder * update: assets loading logic * update: add rule to move jsx props to multiline imporving readability * add: connect modal * update: hooks import for better readability * update: replace functions with hooks * add: connect module * add: settings and get settings route * add: hooks and contexts to get settings * add: hooks * add: notification component * add: data api * add: settings provider and connect settings * add: husky * fix: formatting and text-domain * update: filter names * fix: hook import * add: set function for settings * add: prop-types package * update: refactor notification component and context * update: remove filter for authorize url * update: imports and exports of hooks * update: plugin settings context filename and relevant imports * update: icons and icon imports * add: sidebar(wip) * update: fix width of connect screen on mobile * update: sidebar layout * add: credit card and user arrow icons * update: hidden wpfooter and fixed sidebar height * update: sidebar layout * add: basic page layouts * update: sidebar layout * add: sidebar menu, sidebar app bar and my account menu components * update: add sidebar and menu settings * update: add page layouts * update: admin top bar * add: bottom bar * add: bottom bar and top bar * add: bottom bar and top bar * update: page content styling * fix: styling * fix: styling * update: text domain * update: added translations * fix: admin top bar layout * update: exports of icons * update: exports of components * add: aliases for imports and fix exports * fix: height and styling of the layout * fix: unhide wp footer * update: keep widget menu open on page load (default) * update: linter rules to move first prop to new line * update: linter rules to move first prop to new line --------- Co-authored-by: Ohad <ohad@elementor.com> * Fix error on install plugin, add prettier (#116) * Feature/app 810 assemble icon settings page (#117) * Initial refactor commit * ✅ Added build and tests CI/CD * update: add src for admin settings * update: incorrect constant names * update: namespace * add: accessibility settings * update: webpack to output files inside a folder * update: build output folders * update: removed commented code * update: npm scripts * add: webpack config * add: hooks * update: move admin setting to the module folder * update: assets loading logic * update: add rule to move jsx props to multiline imporving readability * add: connect modal * update: hooks import for better readability * update: replace functions with hooks * add: connect module * add: settings and get settings route * add: hooks and contexts to get settings * add: hooks * add: notification component * add: data api * add: settings provider and connect settings * add: husky * add: icon size control * fix: icon size control labels * add: icon select component * add: color picker component * add: accessibility icons * add: icon export * update: add icons to the component * fix: styling for the icon select control * update: color picker with react-colorful component * update: icon size component with live icon design * fix: styling of radio boxes * add: icon design settings layout * add: position settings layout * add: layout exports * add: alignment matrix and position control components * add: position settings & position settings for mobile layout * fix: formatting and text-domain * update: filter names * fix: hook import * add: set function for settings * add: prop-types package * update: refactor notification component and context * update: remove filter for authorize url * update: imports and exports of hooks * update: plugin settings context filename and relevant imports * update: icons and icon imports * add: sidebar(wip) * update: fix width of connect screen on mobile * update: sidebar layout * Update modules/settings/assets/js/components/color-picker/style.css Co-authored-by: Raz Ohad <admin@bainternet.info> * update: color picker class name * add: credit card and user arrow icons * update: hidden wpfooter and fixed sidebar height * update: sidebar layout * add: basic page layouts * update: sidebar layout * add: sidebar menu, sidebar app bar and my account menu components * update: add sidebar and menu settings * update: add page layouts * update: admin top bar * add: bottom bar * add: bottom bar and top bar * add: bottom bar and top bar * update: page content styling * fix: styling * fix: styling * update: text domain * add: props to wrapper * add: icon design and position setting layouts * add: in page scroll behaviour to the settings * add: widget icons and getter function * update: icon design settings getter and setter functions * update: imports * add: mobile layout for position settings * add: icon position settings * add: icon position settings hooks and handlers * fix: alignment of controls in AlignmentMatrixControl * update: useSettings and usePositionSetting hooks and relevant functions * fix: colors of AlignmentMatrixControl * fix: styling of components and layouts * add: aliases * add: container wrapper to page * update: accessibility options rendering logic * fix: order of the icons * add: aliases for components and hooks imports * fix: styling of settings panel * fix: container height for settings page * update: toggle control states * add: widget icon settings * add: load saved widget icon settings * update: move layout to page for different designs per page * update: add changes tracking and disable button logic * add: async/await to save settings * update: convert options to array of objects * Update modules/settings/assets/js/components/bottom-bar/index.js Co-authored-by: VasylD <vasyld@elementor.red> * Update modules/settings/assets/js/app.js Co-authored-by: VasylD <vasyld@elementor.red> * fix: remove duplicate entries --------- Co-authored-by: Ohad <ohad@elementor.com> Co-authored-by: Raz Ohad <admin@bainternet.info> Co-authored-by: VasylD <vasyld@elementor.red> * Feature/app 708 widget menu settings (#118) * add: icons for menu settings * add: placeholder layout for widget preview in menu settings * update: load saved settings and updated imports * add: logics for handling and saving menu settings * add: useSavedSettings hook * update: set export as default for Sidebar layout * add: widget menu settings layout and settings * update: add widget menu settings and widget preview layouts * add: hide/show minimum option alert notification * update: styling of the save button * update: save settings logic to use async/await * fix: accessibility text icon * update: app type (#119) * [APP-834] Update account menu buttons (#121) * update: account menu buttons * update: billing link * add: error handling for switch account * [APP-835] add service data (#122) * add: client functions * add: site register and site info endpoints * update: add plan data settings * update: add support for 201 response code * update: add plan data key * update: store the plan data on the once the site is registered * update: add filter for client url * add: retry registering in there is any error after connect * update: setting prefix * add: plan data * update: add account details to menu * fix: lint issues * update: add data checkbox support (#123) * [APP-928] Settings pointer (#125) * add: settings pointer * update: add alias for the settings * [APP-837] Add post connect modal (#120) * add: post connect modal * update: settings prefix * fix: connect modal design * update: connect modal text * add: connect modal graphics * update: connect modal icon * update: post connect modal * update: sidebar menu text * update: text of icon settings * update: text * update: php compatibility with return types * add: accessibility statement page structure (#126) * [APP-721] Render widget and global settings (#124) * add: webhook endpoint * add: widget module * add: default widget settings on successful registration * update: name of global object to ea11yWidget * update: remove json encoding to make objects available on the frontend * update: widget url, filter and enqueuing method * update: removed obsolete code * update: enqueue script only when connected * update: add check for valid plan data and key * update: conditional check * update: conditional check * fix: widget loading error (#128) * [Legacy] Upgrade To New [APP-949] (#127) * Added `Notice_Base` and `Notices` component to core module * Always load core module and load all other modules based on legacy status * added filter in customizer settings * added bubble / pimple in admin menu to indicate upgrade * added `Dismissible_Deprecated_Nag` notice to none legacy pages * added `Dismissible_Deprecated_Nag` notice to legacy pages * Added `Upgrade` component to legacy module includes: * loading of notices * introduction modal * admin menu pimple * customizer notice * pointer * confirmation modal * upgrade logic and handler * ✅ Fixed legacy module test * added `local:quick-run` command to run in browser mode * update phpunit workflow * ensure wp.ajax is loaded * wrong translations * Updated strings * added "Equally" * remove unused test * ✅ use custom version of wp test library (#129) * ✅ use custom version of wp test library * cleanup * update WP versions for testing * [APP-711] Widget preview (#130) * add: dynamic script loader for widget * update: settings name * update: settings save function and comments * update: tools settings object structure * add: widget preview section * update: added setting page slug as a constant * update: enqueue widget for preview in the settings * add: widget icon assets link * add: widget icon svgs * update: store widget url in a constant * update: store widget url in a constant * update: trigger widget preview update on menu item changes * update: remove the icon option from the frontend. * update: add widget URL * update: plan data setting type * update: widget plan url * update: widget plan url and parse plan data * fix: phpcs error ext-json missing * fix: widget url * fix: save and use plan data as a serialized option * fix: use template string for widget url * [APP-908] Accessibility generator (#131) * add: accessibility statement radio icons * update: add form group on radio buttons * add: statement generator * add: statement generator * add: accessibility statement data option * update: create page in WordPress and save it to the option * update: exclude zip file from the git * update: render statement page conditionally * add: statement link layout and settings * add: preload statement data * update: publish the created page and add link for it * update: changed Dynamic Script Loader to WidgetLoader * add: accessibility statement url * update: text and styling * update: styling of the preview text * update: restructure statement generator * add: support for dynamic update in statement links * update: remove index.css file for widget loader * add: widget styling for settings page * add: empty link when hide link is enabled * update: statement page structure and logic * fix: typo * update: convert component into a styled component * fix: styling and layout * update: icons * update: convert radio buttons to styled component * fix: typo and style * add: fading for the link preview * update: import * update: styling and spacing * fix: sidebar layout * update: wpcs to latest version * fix: spacing * fix: wpcs version * add: check for valid statement page * fix: jitters on rendering * fix: use escape attribute * update: settings menu slug and plugin name * fix: menu item rendering * update: definition of the styled text field * add: addPage function to the API * fix: add notification on page creation * add: copy link icon * update: optimize SVGs * [APP-908] Additional fixes (#133) * fix: text domains * updated: styled component syntax * update: use await instead of then * fix: prevent application crash in case widget fails to load * add: generated info tip card * update: refactor function * Fix: Fix the QA bugs [n/a] (#135) * [APP-830] Add mixpanel events (#134) * [APP-830] Add mixpanel events * Merge branch 'develop' into feature/APP-830-add-mixpanel # Conflicts: # .gitignore # modules/settings/assets/js/components/sidebar-menu/index.js # modules/settings/assets/js/pages/accessibility-statement.js * Merge branch 'develop' into feature/APP-830-add-mixpanel # Conflicts: # .gitignore # modules/settings/assets/js/components/sidebar-menu/index.js # modules/settings/assets/js/pages/accessibility-statement.js * Merge branch 'develop' into feature/APP-830-add-mixpanel # Conflicts: # .gitignore # modules/settings/assets/js/components/sidebar-menu/index.js # modules/settings/assets/js/pages/accessibility-statement.js * Merge branch 'develop' into feature/APP-830-add-mixpanel # Conflicts: # .gitignore # modules/settings/assets/js/components/sidebar-menu/index.js # modules/settings/assets/js/pages/accessibility-statement.js * Merge branch 'develop' into feature/APP-830-add-mixpanel # Conflicts: # .gitignore # modules/settings/assets/js/components/sidebar-menu/index.js # modules/settings/assets/js/pages/accessibility-statement.js * Merge branch 'develop' into feature/APP-830-add-mixpanel # Conflicts: # .gitignore # modules/settings/assets/js/components/sidebar-menu/index.js # modules/settings/assets/js/pages/accessibility-statement.js * [APP-830] Add user to init Mixpanel (#136) * [APP-830] Add mixpanel events * Merge branch 'develop' into feature/APP-830-add-mixpanel # Conflicts: # .gitignore # modules/settings/assets/js/components/sidebar-menu/index.js # modules/settings/assets/js/pages/accessibility-statement.js * Merge branch 'develop' into feature/APP-830-add-mixpanel # Conflicts: # .gitignore # modules/settings/assets/js/components/sidebar-menu/index.js # modules/settings/assets/js/pages/accessibility-statement.js * Merge branch 'develop' into feature/APP-830-add-mixpanel # Conflicts: # .gitignore # modules/settings/assets/js/components/sidebar-menu/index.js # modules/settings/assets/js/pages/accessibility-statement.js * Merge branch 'develop' into feature/APP-830-add-mixpanel # Conflicts: # .gitignore # modules/settings/assets/js/components/sidebar-menu/index.js # modules/settings/assets/js/pages/accessibility-statement.js * Merge branch 'develop' into feature/APP-830-add-mixpanel # Conflicts: # .gitignore # modules/settings/assets/js/components/sidebar-menu/index.js # modules/settings/assets/js/pages/accessibility-statement.js * Merge branch 'develop' into feature/APP-830-add-mixpanel # Conflicts: # .gitignore # modules/settings/assets/js/components/sidebar-menu/index.js # modules/settings/assets/js/pages/accessibility-statement.js * [APP-830] Add user to init Mixpanel * [APP-830] Add user to init Mixpanel * [APP-830] Add user to init Mixpanel * [APP-830] rename events (#137) * Connect and Preview Fixes (#139) * updated connect admin page * Use unified widget URL instead of hardcoded Js to support envs * Removed enqueue of fictional widget.js and reuse settings `admin` handle * Fix: Fix the QA bugs [n/a] (#138) * New: Finish the BE integration [n/a] * Fix: Fix some bugs [n/a] * upgrade flow UI and design tweaks [app-949] (#141) * Updated Learn More links with UTM's * Tweaked Pointer strings Icon and CTA * dismissible notice strings * sticky notice strings * updated upgrade flow design for pointer, notices, introduction modal, and confirmation modal * added build script * [APP-979] Update links and plugin name (#140) * Ensure loading of legacy widget based on any saved data and fixed legacy JS * Bug/app 1002 (#143) * Bug: Update the logo in the "Hide Widget" modal [APP-1001] * Fix: Update the side menu spaces [APP-1002] * [APP-991] Add translation for statement (#142) * [APP-979] Update links and plugin name * [APP-991] Add translation for statement * Set Prod Widget URL * [APP-1004][APP-1005][APP-1006] Fix generator UI and logic, fix statement UI, fix copy link (#144) * [APP-1004] Fix generator UI and logic * [APP-1005] Fix statement UI * [APP-1005] Fix statement UI * Mixpanel record session * Fix: Enhance position values validation [APP-1009] (#146) * Bug/app 1003 (#147) * Fix: Add a border to the preview [n/a] * Fix: Fix Capabilities screen UI [APP-1003] * [APP-1020] add missed events (#148) * [APP-1015] fix switch account (#149) * [APP-1015] fix switch account (#150) * [APP-1021] Fix switch modal ui (#151) * fix: ui issues * fix: translation strings * [APP-912] add default settings for RTL (#152) * [APP-912] add default settings for RTL * [APP-912] add default settings for RTL * [APP-912] add default settings for RTL * [APP-1026] Remove HTML breaking <style> tag & update pointer logic (#153) * fix: remove extra closing tag * update: hide settings pointer when plugin settings is opened * update: remove unused functions * update: add help text to mobile position settings * Bug/app 1003 (#157) * Fix: Add missed translations [n/a] * Fix: Refresh the plan data on page load [n/a] * New: Add loader to the settings [n/a] * update: delete lock key after each check (#160) * New: Update dashboard icon size [n/a] (#158) * New: Update dashboard icon size [n/a] * Fix: Fix widget previews [n/a] * [APP-1018] Help menu change (#155) * update: remove accessibility word from menu items * update: remove top bar * update: add help button to the sidebar * update: re-add spacing in styled css code * update: create styled components * [APP-973] Add an UTM for users upgrading from one click to the new widget (#165) * update: ui of the statement preview (#166) * [APP-1011][APP-1013] focus outline and sitemap settings (#161) * [APP-1011][APP-1013] focus outline and sitemap settings * [APP-1011][APP-1013] focus outline and sitemap settings * [APP-1011][APP-1013] focus outline and sitemap settings * [APP-1011][APP-1013] focus outline and sitemap settings * update: video link (#167) * [APP-1051] Fix layout on the small and medium devices (#156) * fix: layout on the small and medium devices * update: change components to styled components * refactor: position settings wrapper into a separate component * [APP-1012][APP-1085] Add skip to content settings and event for Mixpanel (#169) * [APP-1012][APP-1085] Add skip to content settings and event for Mixpanel * [APP-1012][APP-1085] Add skip to content settings and event for Mixpanel * [APP-1012][APP-1085] Add skip to content settings and event for Mixpanel * [APP-1012][APP-1085] Add skip to content settings and event for Mixpanel * [APP-1048] Add tooltip to accessibility statement (#159) * add: tooltip to accessibility statement * update: hide infotip when statement link is set * update: infotip's text * fix: infotip naming and logic * [APP-1049] Add back button accessibility statement (#164) * add: back button to the statement link section * add: Edit link button to statement page section * update: add admin_url and generate query args properly * update: learn more link for accessibility statement page (#168) * Fix: Update overlay height [n/a] (#171) * Fix settings and connect issues (#170) * fix: token fails to refresh after expiry * update: add 12 hour time for plan data refresh and fix missing subscription id * update: add check to refresh plan data * fix: decoding errors and alignment and add logging for errors * update: refresh logic and formatting * Update/app 1029 app name (#173) * update: plugin name * update: default menu option * update: menu structure * update: add inline checks * update: reduce padding on app icon in menu * fix: height of the modal * update: app menu icon color * update: menu icon colors * fix: menu icon size * update: plugin names * update: HELP_LINK * update: app name * update: icon background color * update: icon size * fix: admin icon size * fix: width of the sidebar * Fix/toggle not working properly (#174) * fix: toggles not working properly in some cases * fix: saving of the settings was not working * add: missing adminUrl in settings data * fix: switch was not working properly in some cases (#175) * Fix/app 1093 incorrect position on default (#176) * fix: switch was not working properly in some cases * fix: default setting structure for the icon position * [APP-1096] Text changes (#177) * fix: switch was not working properly in some cases * update: plugin name and action buttons title * fix: revert change to is_active function * fix: button color * New: Add the skip link [APP-1012] (#179) * [APP-1097] Fix preview load (#178) * [APP-1097] Fix preview load * [APP-1097] Fix preview load * [APP-1097] Fix preview load * Update modules/settings/assets/js/components/widget-loader/index.js --------- Co-authored-by: Raz Ohad <ohad@elementor.com> * [APP-1123] Accessibility statement text (#181) * fix: switch was not working properly in some cases * update: accessibility statement content * [APP-1121] Add support for react-jsx-runtime for older WP versions (#180) * fix: switch was not working properly in some cases * update: revert wp-scripts version to 28.0.0 to add support for older WordPress versions * update: revert wp-scripts to 27.9.0 * add: support for react-jsx-runtime in older versions of WordPress * update: version to the latest wp-scripts 30.3.0 * update: add lib/ to gitignore * update: plugin name * Fix: Fix admin widget previews [n/a] (#183) * [APP-1061] change mixpanel user id (#184) * [APP-1129] change toggle_event for mixpanel (#186) * Remove skip to content btn if anchor does not exist (#187) * fix: hide wp notices to keep the layout from shifting (#189) * [APP-1143] fix bug with capability display (#195) * [APP-1143] fix bug with capability display * [APP-1143] fix bug with capability display * [APP-1143] fix bug with capability display * [APP-1143] fix bug with capability display * add: loading text to widget preview (#196) * [APP-1142] add 'appType' super props, change identify key (#191) * [APP-1108][APP-1109][APP-1110] Add analytics backend logic * [APP-1142] Add 'appType' super props * [APP-1144] Accessibility statement tooltip text update (#198) * update: text * update: switch design * Tweak: Update widget loaders [n/a] (#197) * added images to readme (#172) * added images to readme * updated readme * V3.0.0 * updated readme * updated tested up to * Fix: Update the skip link rendering hook [APP-1157] (#203) * bumped v3.0.1 (#206) * Fix: Adapt widget preview to smaller height viewports [APP-1130] (#217) * update: convert menu icon to base64 svg (#199) * update: convert menu icon to base64 svg * update: logo to svg logo with base64 encoded * update: svg app icon * [APP-1201] Improve admin panel accessibility (#220) * [APP-1201] add accessibility rules * [APP-1201] add accessibility rules * [APP-1210] add prop to Mixpanel, move event names to const (#225) * [APP-1159] Add mismatch URL flow (#210) * update: convert imports to named imports * add: function to check if current screen is settings page * update: rename elementor logo to app logo * add: url mismatch flow and components * update: remove obsolete code * Update modules/connect/rest/authorize.php Co-authored-by: Pavlo Kniazevych <139438463+pkniazevych@users.noreply.github.com> * Update modules/settings/module.php Co-authored-by: Pavlo Kniazevych <139438463+pkniazevych@users.noreply.github.com> * fix: modal was not closing * update: remove url mismatch notice * update: mismatch modal and rendering logic * add: toast notifications for errors * update: convert components into styled components * update: remove bottom border from the dialog * update: text copy * fix: logo alignment * update: renamed styled component --------- Co-authored-by: Pavlo Kniazevych <139438463+pkniazevych@users.noreply.github.com> * [APP-1108][APP-1109][APP-1110] Add analytics backend logic (#190) * [APP-1108][APP-1109][APP-1110] Add analytics backend logic * [APP-1108][APP-1109][APP-1110] Add analytics backend logic * Add nonce to the widget settings * Update routes and DB table * Fix comments * Fix comments * Fix comments * Fix comments * Fix comments * Fix comments * [APP-1101] Move action button to footer (#208) * update: add save changes footer to the bottom and remove it from capabilities * add: logic to save settings for skiptocontent using footer * update: text * update: convert component to styled component * [APP-1198] [APP-1199] Quota bar and notices (#219) * add: quota bar * add: openLink helper function * add: styled elements and visits link placeholder * update: remove hover state from the box * add: quota notices * update: quota access and usage calculations * add: logic to calculate plan usage * update: move logic to calculate plan usage to hook * add: todo note * add: todos * add: mixpanel events * fix: hide quota bar when sidebar is minimized * fix: settings panel was not expanding when sidebar is minimized * update: text and structure of the bar * update: quota calculation logic * update: remove TODOs * update: text and values * fix: height of the container for icon settings * update: golinks * update: golinks * fix: prevent icon options from wrapping on smaller screen sizes (#229) * [APP-1107] Add dashboard for analytics (#204) * [APP-1108][APP-1109][APP-1110] Add analytics backend logic * [APP-1108][APP-1109][APP-1110] Add analytics backend logic * Add nonce to the widget settings * Update routes and DB table * Fix comments * Fix comments * Fix comments * Fix comments * Fix comments * Fix comments * [APP-1107] Add dashboard for analytics * [APP-1107] Add dashboard for analytics * [APP-1107] Add dashboard for analytics * [APP-1107] Add dashboard for analytics * [APP-1107] Add dashboard for analytics * [APP-1107] Add dashboard for analytics * [APP-1107] Add dashboard for analytics * [APP-1107] Add dashboard for analytics * [APP-1107] Add dashboard for analytics * [APP-1107] Add dashboard for analytics * [APP-1201] add accessibility rules * [APP-1107] fixed API endpoint * [APP-1107] fixed API endpoint * [APP-1107] fixed API endpoint * [APP-1107] add check for is_active * update to the latest * update to the latest * update to the latest * fix bugs, add changes * fix bugs, add changes * fix bugs, add changes * fix bugs, add changes * [APP-1105] Add pro capabilities (#205) * add: volume and solid crown icon * add: volume and crown icons to export * update: refactor menu item to a new component * add: screen reader to the menu items and reorganize them * add: pro item infotip content * add: capabilities item and pro info tip to exports * update: import ProInfoTip component and change disabled logic * update: imports * update: refactor pro item infotip into the separate component * update: refactor infotip and add comments * add: custom switch component * add: logo settings layout * update: switch component * add: useToggleSetting hook to manage widget settings. * update: move pro feature key to a separate constant * fix: pro icon style * update: remove branding key * update: pro enable check structure * update: pro enabled check structure * update: key name * update: update key before checking for it * fix: null error * add: update logic to get the tools settings based on plan * update: exclude remove-elementor-label from the minimum option rule * update: add formlabel and eventnames * add: logic to deactivate the features which are disabled for the plan * fix: PHP warning * fix: keyword name * add: GOLINKS * add: open link function * fix: PHP warning undefined key * update: logic to show the icon and added golinks * [APP-1045] Add billing tab (#223) * add: plan name and subscription link * update: refactor my account menu * update: move truncate email to a helper file * update: simplify truncation logic * [APP-1270] Delete transient and force info update (#236) * add: force update site/info on mismatch url * update: add a constant for the transient * add: delete_transient for switch account as well * add: delete_transient for disconnect as well * [APP-1267] Quota bar undefined (#234) * fix: undefined was shown when there is no quota data * add: preloader * fix: make bottom bar sticky on the settings pages (#237) * [APP-1268] Pro tip spacing (#235) * fix: pro tip spacing * fix: pro icon * [APP-1271] Align menu icons (#238) * update: hide info button on minimized sidebar * fix: alignment of quota bar icon * fix: conditional logic * update: improve sidebar motion * fix: switch account issue * update: upgrade link for analytics popup (#239) * [APP-1281] fix usage percentage formatting (#240) * fix: format display of percentage correctly. * update: fraction conversion logic * Force referer and lower transient time to 15 minutes [APP-1286] (#242) * reduce transient timeout * force referrer in script tags * [APP-1262] Enable routes for get statistic on disabled analytics (#233) * [APP-1262] Enable routes for get statistic on disabled analytics * [APP-1262] Enable routes for get statistic on disabled analytics * [APP-1262] Enable routes for get statistic on disabled analytics * [APP-1262] Enable routes for get statistic on disabled analytics * [APP-1262] Enable routes for get statistic on disabled analytics * [APP-1262] Enable routes for get statistic on disabled analytics * [APP-1243] Admin upgrade notices (#241) * add: admin quota notices * add: fix function name and phpcs issues * fix: formatting issues * [APP-1287] change Mixpanel check for free trial (#243) * Fix/quota text (#244) * fix: wp notice close logic plus banner text * update: banner text * [APP-1292] missing mixpanel events (#245) * add: missing mixpanel events * update: use variable for hardcoded names * update: use variable for hardcoded names * [APP-1293] Add additional checks (#246) * update: add additional check to prevent fatal error * fix: formatting * [APP-1312] minimize client css (#252) * [APP-1168] widget icon radius * add: icon radius component * add: icon radius component * update: add support for widget radius * fix: minor ui fixes * fix: resolve comments * fix: alignment of the icon * update: add styled components * add: corner radius mixpanel event * fix: corner radius should have default values when no value is set based on icon * fix: icon radius input style * add: accessibility attributes * fix: active states color * add: logic to control invalid inputs * update: make aria attributes translatable * update: styled component names * add: spacing between the components * [APP-1342] add super props, store plan scope after register/switch (#250) * [APP-0000] store plan scope after register/switch * Update modules/settings/module.php Co-authored-by: Pavlo Kniazevych <139438463+pkniazevych@users.noreply.github.com> * remove deprecated method * remove deprecated method * [1342] Add super prop to mixpanel * [1342] Add super prop to mixpanel * [1342] Add super prop to mixpanel --------- Co-authored-by: Pavlo Kniazevych <139438463+pkniazevych@users.noreply.github.com> * [Legacy] Added strict settings sanitization (#257) * [Legacy] Added strict settings sanitization * use correct esc_x method * hardcoded 6.8.0 * added svn for wp test library * fix: default border radius (#258) * fix: default border radius * add: default corner radius for new users * update: add support for default values for users with saved style settings * updated phpunit workflow * revert to master * hardcode 6.8.x * update: default values for existing users * update: remove saving default corner radius for new users * fix: update default radius for text icon * fix: PHPUnit tests for WP 6.8.0 * align with develop * set to latest --------- Co-authored-by: Raz Ohad <admin@bainternet.info> Co-authored-by: Raz Ohad <ohad@elementor.com> * fix: widget icon spacing (#262) * Added custom gutenberg link to toggle widget [APP-1306] (#256) * New: Added Ally Trigger Dynamic Tag for Elementor [APP-1305] (#254) * New: Added Ally Trigger Dynamic Tag for Elementor [APP-1305] * typo Update modules/widget/components/ally-trigger.php * New: Add the what's new functionality [APP-1329] (#264) * add: statement page selector field (#261) * add: statement page selector field * add: updated the statement link button to a search field * fix: add support for create statement data * New: Bump the Notifications SDK to 1.2.0 [APP-1427] (#267) * Fix: Resolve a11y issues [APP-1331] (#269) * [APP-1417] Add support for custom icon (#270) * add: media upload button * add: support for custom icon * fix: code alignment, phpcs * fix: code alignment and linting * add: mixpanel events * fix: styling of custom svg * fix: missing variable * fix: missing variable * fix: load gutenberg block without css * fix: icon spacing in preview * fix: indentation * fix: indents * [APP-1440] Fix doing_it_wrong warning for translations (#271) * fix: doing_it_wrong warning for translations * update: stop explicitly loading translations * fix: add package-lock * fix: add package-lock * New: Store fonts inside the plugin [APP-1385] (#277) * add: what's new mixpanel event (#274) * fix:disable autofocus on opening of popup menu (#279) * New: Add the birthday banner [APP-1489] (#281) * [APP-1442] Add language selector option to plugin (#273) * add: language selector option * update: language selector option key * update: lang selector name (#284) * update: add language selector to analytics table (#285) * Tweak: Update the campaign's time range [APP-1489] (#283) * fix: container width logic (#292) * [APP-1530] scrollbars settings width (#296) * update: title layout * fix: width of the content * update: browserlist * fix: rtl issues (#304) * [APP-1629] Fix pro icon (#305) * update: @elementor/ui package * fix: pro icon * fix: pro icon * [APP-1678] Remove mixpanel session replay (#317) * Fix: plugin headers (#316) (#320) * [APP-907] Accessibility assistant (#326) * PHPCS and remediation POC WIP * WIP Wizard module * Added scanner module * [APP-929][APP-930] Add initial setup for wizard, added btn to the topbar (#230) * [APP-929][APP-930] * [APP-929][APP-930] * update logic * update init app * [APP-0000] store plan scope after register/switch * change return of load * add header * Move into shadow dom, add context, add headers components * add UI components * add UI components * add UI components * merge current develop * merge current develop * Add AltText Form * Add scroll to current element * Align with current design, add loader, added preview for svg * Align with current design, add loader, added preview for svg * Resolve comments * Resolve comments * Resolve comments * [APP-934] add submit logic (#259) * [APP-934] add submit logic * [APP-934] add submit logic * [APP-934] add submit logic * [APP-934] add submit logic * Added replace remediation action * Add submit logic * Add submit alt text logic, generate AI alt text * Add AI generate request, add convert from SVG to png base64, added manual fix block * Add AI generate request, add convert from SVG to png base64, added manual fix block * Add texts, add remediation submit, fix logic to store remediation * Add texts, add remediation submit, fix logic to store remediation * Add texts, add remediation submit, fix logic to store remediation * Add texts, add remediation submit, fix logic to store remediation * Add texts, add remediation submit, fix logic to store remediation * Add texts, add remediation submit, fix logic to store remediation --------- Co-authored-by: Raz Ohad <admin@bainternet.info> * Add texts, add remediation submit, fix logic to store remediation * [APP-0000] add store request to the Service API (#268) * [APP-0000] add store request to the Service API * [APP-0000] add store request to the Service API * [APP-0000] add store request to the Service API * [APP-0000] add store request to the Service API * [APP-0000] add request to store scanner summary * [APP-0000] add request to store scanner summary * [APP-0000] add request to store scanner summary * [APP-1432] fix with AI flow (#275) * [APP-1432] fix with AI flow * [APP-1432] fix with AI flow * [APP-1432] fix with AI flow * [APP-1432] fix with AI flow * [APP-1432] fix with AI flow * [APP-1432] fix with AI flow * [APP-1432] fix with AI flow * [APP-1432] fix with AI flow * [APP-1432] fix with AI flow * [APP-1432] fix with AI flow * [APP-1432] fix with AI flow * [APP-1446] sidebar menu update (#276) * update: simplify menu * add: headings and scanner menu options * [APP-945] add column for tables (#282) * [APP-945] add column for tables * [APP-945] add column for tables * [APP-945] add column for tables * [APP-945] add column for tables * [APP-1447] Updated quota bar designs (#278) * update: quota bar designs * fix: the popover was partially visible * update: AI credits name * update: usage calculation logic * add: quota indicators * update: quotas tooltip text * update: quotas notices text * update: make toggle icon dynamic * fix: @elementor/ui imports * Update modules/settings/assets/js/layouts/quota-bar.js Co-authored-by: VasylD <vasyld@elementor.red> * update: styling of component --------- Co-authored-by: VasylD <vasyld@elementor.red> * [APP-1507] add UI changes (#286) * [APP-1507] add UI changes * [APP-1507] add UI changes * [APP-1507] add UI changes * [APP-1507] add UI changes * [APP-1507] add UI changes * [APP-1507] add UI changes * [APP-1507] add UI changes * [APP-1387] add mixpanel events (#288) * [APP-1387] add mixpanel events * [APP-1387] add mixpanel events * New: Add the a11y assistant dashboard's UI [APP-1445] (#289) * [APP-1513] add disconnected msg (#290) * [APP-1513] add disconnected msg * [APP-1513] add disconnected msg * [APP-1513] add disconnected msg * [APP-1547][APP-1548][APP-948] update alt text view, fix list issues (#291) * [APP-1547][APP-1548][APP-948] update alt text view, fix list issues, add rest route for update status * [APP-1547][APP-1548][APP-948] update alt text view, fix list issues, add rest route for update status * fix: infotip icon padding and font style (#293) * fix: infotip icon padding and font style * fix: infotip icon padding and font style * update: caniuse database * [APP-1525] add edit mode (#294) * [APP-1525] add edit mode * [APP-1525] add edit mode * [APP-1525] add edit mode * Bug/app 1544 (#295) * Fix: Resolve QA comments [APP-1544] * New: Add beta tags [APP-1555] * New: Add the "no results" state [APP-1544] * [APP-1554] rename violations (#297) * [APP-1512] add backend logic for remediation management (#298) * [APP-1512] add backend logic for remediation management * [APP-1512] add backend logic for remediation management * Update modules/remediation/database/remediation-entry.php Co-authored-by: gitstream-cm[bot] <111687743+gitstream-cm[bot]@users.noreply.github.com> * Update modules/remediation/rest/items.php Co-authored-by: gitstream-cm[bot] <111687743+gitstream-cm[bot]@users.noreply.github.com> * [APP-1512] add backend logic for remediation management --------- Co-authored-by: gitstream-cm[bot] <111687743+gitstream-cm[bot]@users.noreply.github.com> * Fix: Resolve QA comments [n/a] (#299) * [APP-1512] add FE remediation management (#300) * [APP-1512] add backend logic for remediation management * [APP-1512] add backend logic for remediation management * Update modules/remediation/database/remediation-entry.php Co-authored-by: gitstream-cm[bot] <111687743+gitstream-cm[bot]@users.noreply.github.com> * Update modules/remediation/rest/items.php Co-authored-by: gitstream-cm[bot] <111687743+gitstream-cm[bot]@users.noreply.github.com> * [APP-1512] add backend logic for remediation management * [APP-1512] add FE remediation management * [APP-1512] add FE remediation management * [APP-1512] add FE remediation management * [APP-1512] add FE remediation management * [APP-1512] add FE remediation management * [APP-1512] add FE remediation management * [APP-1512] add FE remediation management * [APP-1512] add FE remediation management --------- Co-authored-by: gitstream-cm[bot] <111687743+gitstream-cm[bot]@users.noreply.github.com> * [APP-1609] fix tooltip * [APP-1609] fix resolved btn click * [APP-1401] clear cache on update (#302) * [APP-1401] clear cache on update * [APP-1401] clear cache on update * [APP-1401] clear cache on update * [APP-1401] clear cache on update * [APP-1401] clear cache on update * update with latest develop branch * fix copies * [APP-1619] add mixpanel event (#303) * [APP-1619] add mixpanel event * [APP-1619] add mixpanel event * [APP-1593] Add locked variant for quota bar (#301) * update: add locked version of quota status bar * fix: text color for infotip * fix: width issues * fix: add check for 0 * [APP-1637][APP-1643] add UI fixes, add excluded rules array (#307) * fix: make sidebar collapsible (#306) * Merge current dev * [APP-1603] Add dashboard menu (#309) * [APP-1603] Add dashboard menu * [APP-1603] Add dashboard menu * [APP-1603] Add dashboard menu * [APP-1603] Add dashboard menu * Bug/app 1607 (#311) * Fix: Update stats calculation logic [APP-1607] * Fix: Set fixed width for the results table [APP-1650] * Fix: Update filter rules [APP-1634] * New: Add the no search results state [APP-1651] * Fix: Convert indents [n/a] * [APP-1670] add menu on Manage Fixes (#315) * [APP-1670] add menu on Manage Fixes * [APP-1670] update menu * [APP-1611] fix comments * fix: direction of snippet (#313) * [APP-1561] New menu layout (#308) * update: app menu and layout * merge: latest changes from feature/remediation * add: alert indicator to the closed sidebar * fix: page layout for statement page * update: menu display names * fix: topbar menu layout * update: sidebar menu width * update: sidebar menu width * fix: popup menu layout * add: hover action to the toggle button * update: my account menu * fix: quota indicator for closed sidebar * fix: icon alignments * fix: scroll behaviour * fix: page scroll behaviour * fix: popup menu hover state * update: quota bar and group layouts * add: tooltips to the menu items * update: make scans page fixed height and scrollable * update: styles with theme references and added new styled components * fix: make sidebar smoother * update: accessibility page heading * Merge latest develop * [APP-1611] trigger save entry for clean cache (#314) * [APP-1611] trigger save entry for clean cache * [APP-1611] fix comments * [APP-1611] fix comments * [APP-1611] fix comments * [APP-1611] fix comments * [APP-0000] call trigger save async (#319) * [APP-1611] trigger save entry for clean cache * [APP-1611] fix comments * [APP-1611] fix comments * [APP-1611] fix comments * [APP-1611] fix comments * [APP-0000] call trigger save async * fix: scrollbar issues (#318) * [APP-1615] add remediation for wp image (#321) * POC - FrontEnd remediations to handle Dynamic Data [APP-1644] (#312) * POC - FrontEnd remediations to handle Dynamic Data * Update modules/remediation/components/remediation-runner.php Co-authored-by: gitstream-cm[bot] <111687743+gitstream-cm[bot]@users.noreply.github.com> * added MutationObserver to cover elements that are added later on the page runs until remediations are all done, and disconnect * added $use_frontend flag instead of using "false" * Update modules/remediation/components/remediation-runner.php Co-authored-by: gitstream-cm[bot] <111687743+gitstream-cm[bot]@users.noreply.github.com> * WIP on poc/fe-remediations * [APP-0000] call trigger save async * [APP-1644] apply FE remediation * [APP-1644] apply FE remediation * [APP-1644] apply FE remediation * Add timeout (wait for FE remediation timeout) * Add timeout (wait for FE remediation timeout) * Add timeout (wait for FE remediation timeout) * Add timeout (wait for FE remediation timeout) * Add timeout (wait for FE remediation timeout) * Small fixes * Small fixes * Small fixes * Small fixes --------- Co-authored-by: gitstream-cm[bot] <111687743+gitstream-cm[bot]@users.noreply.github.com> Co-authored-by: vasyldinets <vasyld@elementor.red> * [APP-1611] Fix cache issue (#324) * [APP-1611] trigger save entry for clean cache * [APP-1611] fix comments * [APP-1611] fix comments * [APP-1611] fix comments * [APP-1611] fix comments * [APP-0000] call trigger save async * [APP-1611] clear cache * [APP-1657] upgrade cta (#323) * update: added logic to show button based on plan * Update modules/settings/assets/js/components/quota-bar/quota-bar-group.js Co-authored-by: gitstream-cm[bot] <111687743+gitstream-cm[bot]@users.noreply.github.com> * fix: eslint error --------- Co-authored-by: gitstream-cm[bot] <111687743+gitstream-cm[bot]@users.noreply.github.com> * [APP-1658] Update accessibility admin column design (#322) * update: wpadmin column layout * update: move icon to assets * Fix: Resolve remediation encoding issue [APP-1646] (#325) --------- Co-authored-by: Ohad <ohad@elementor.com> Co-authored-by: Raz Ohad <admin@bainternet.info> Co-authored-by: Nirbhay Singh <121793120+nirbhayel@users.noreply.github.com> Co-authored-by: Pavlo Kniazevych <139438463+pkniazevych@users.noreply.github.com> Co-authored-by: gitstream-cm[bot] <111687743+gitstream-cm[bot]@users.noreply.github.com> * Bumped 3.5.0 * Fix: Update the results table data [APP-1693] (#328) * fix: imports * update: button hover color * [APP-1611] add litespeed clear cache hook (#329) * [APP-1611] clear cache * [APP-1611] clear cache * Update modules/remediation/classes/utils.php --------- Co-authored-by: Raz Ohad <ohad@elementor.com> * Fix: Update stats calculation logic [n/a] (#330) * updated changlog * add: Help us improve button (#331) --------- Co-authored-by: Yakir Sitbon <kingyes1@gmail.com> Co-authored-by: Nirbhay Singh <121793120+nirbhayel@users.noreply.github.com> Co-authored-by: VasylD <vasyld@elementor.red> Co-authored-by: Pavlo Kniazevych <139438463+pkniazevych@users.noreply.github.com> Co-authored-by: gitstream-cm[bot] <111687743+gitstream-cm[bot]@users.noreply.github.com> Co-authored-by: Nirbhay Singh <nirbhayr@elementor.com>
2636 lines
97 KiB
JavaScript
2636 lines
97 KiB
JavaScript
import { __ } from '@wordpress/i18n';
|
||
|
||
export const uxMessaging = {
|
||
table_caption_empty: {
|
||
violationName: __('Missing or Unclear Table Caption', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Table captions must clearly describe the table.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If a table caption doesn’t describe the table’s purpose, people relying on assistive technologies may struggle to understand what the information relates to.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give every data table a short caption that tells people what the table shows.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A table caption is missing or says something vague like "Table 1," giving users no real idea what the table is about',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'For a pricing table, add a caption that says “Monthly vs. Annual Plans.” For a class‑attendance table, add “Boys and Girls in Elementary School Classes.”',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
"Table needs a descriptive caption like 'Monthly vs. Annual Plans'.",
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
table_caption_nested: {
|
||
violationName: __('Table Caption Placement', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Captions must be placed inside their tables.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If the caption isn’t properly placed inside the table, people relying on assistive technologies may not know which caption belongs to which table, leading to confusion.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Add the caption as part of the table, not as separate text above or below it.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A table caption is written outside the table code, making it harder for assistive technologies to connect the caption with the correct table.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Select your table block or widget and look for a field called Caption or Title. Type something like “Fruit Sales 2025” there—this attaches the label directly to the table. If you already wrote the caption as a regular heading or paragraph just above the table, cut that text and paste it into the table’s Caption field instead.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
"Make sure the caption (e.g., 'Fruit Sales 2025') is placed inside the table itself, not outside.",
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
table_summary_redundant: {
|
||
violationName: __('Missing or Unclear Table Caption', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Table summaries must add new information, not repeat the caption.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If the summary just repeats the caption, it doesn’t give people any additional context, making it less useful for people relying on assistive technologies.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Keep just one clear caption or add a short extra note only if the caption needs help.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A table’s caption says "Sales Data 2024" and its summary says exactly the same thing, providing no extra help for screen reader users.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Caption is enough: If the caption already says “Monthly Budget Breakdown,” delete any extra “Summary” paragraph that repeats those same words. Caption needs a bit more: If your caption is “Age Demographics by Country” but readers also need to know the columns are “0‑14, 15‑64, 65+,” add one short sentence right before the table that explains those age groups—then keep the caption as is.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Avoid repeating the caption in the summary; only add details if they help clarify the table.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
label_content_exists: {
|
||
violationName: __('Unclear Form Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Labels must clearly describe the purpose of form fields.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If a label doesn’t clearly describe the form field’s purpose, people relying on assistive technologies may not know what to do, leading to mistakes or frustration.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give every input or checkbox a short label that tells people what to enter or choose.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A form label is empty or too vague (like "Field 1"), making it unclear what information the user should enter.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'An email field with no label should read “Email address.” A blank checkbox label becomes “Subscribe to newsletter.”',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Every form input must have a meaningful label, like “Email address” or “Subscribe to newsletter.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
text_spacing_valid: {
|
||
violationName: __('Fixed Text Spacing', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
"Text spacing shouldn't be locked, so people can adjust readability.",
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'When spacing can’t be adjusted, people with dyslexia or visual impairments may struggle to read comfortably.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Don’t lock the distance between letters, words, or lines—use your theme’s normal text settings, and let visitors change spacing if they need to.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A block of text has fixed spacing that users can’t change, making it harder for people with reading difficulties to read comfortably.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'If you added custom styling that forces very tight or very wide text, remove that custom rule and rely on the theme’s built‑in font controls instead.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Text must use flexible spacing so users can adjust it for better readability.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
text_contrast_sufficient: {
|
||
violationName: __('Insufficient Color Contrast', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Text must have enough contrast against the background.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If text doesn’t have enough contrast with the background, many people may struggle to read it, especially those with visual impairments or when viewing on different screens.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Choose color pairs that are easy to read—darken the text or lighten the background (or both) until a contrast‑checker says the combination passes accessibility tests.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Light gray text on a white background is hard to read, especially for users with low vision.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Light‑gray body text on a white page looks faint; change the text to a darker gray or black, or place it on a pale‑gray card. White words on a pastel‑blue button can be hard to see; keep the white text but deepen the blue to navy so it pops. Large headings can tolerate slightly softer contrast than small body text, but they still need to stand out clearly—check both sizes with a free online contrast‑checker.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Use a contrast‑checker to ensure text and background colors meet accessibility guidelines.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_parent_required: {
|
||
violationName: __('Incorrect Element Container', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Elements must be placed inside the right type of container.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If elements aren’t placed inside the right containers, screen readers and other assistive tools may misinterpret the page, making navigation and understanding harder for people.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Make sure every custom option (for example, a dropdown item) is placed inside the menu or list it belongs to—not floating on its own.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'An interactive element is put inside a section that doesn’t support it, making it confusing for assistive technologies.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'You created a custom dropdown with three choices, but the choices were added as separate text blocks instead of being grouped together. Re‑add the choices using your theme’s “List / Menu / Dropdown” block so they sit inside one container. A single “Color: Blue” option was accidentally dragged outside its product‑options list. Move it back into the list so screen‑reader users know it’s part of the same group.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Make sure items like dropdown options or list entries live inside the proper container widget.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
combobox_popup_reference: {
|
||
violationName: __('Dropdown Open State Incorrect', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Dropdowns must correctly link to the popup they open.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If the dropdown isn’t properly linked to its popup, people relying on screen readers or keyboards might not know where the new content appeared, making it harder to navigate and interact.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Make sure the list of suggestions belongs to the same search or tag box that opens it so it pops up right below the field and moves with keyboard arrows.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A dropdown expands, but the connection to the popup isn’t set up properly, making it confusing for assistive technology users.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'You built a “Tag” field that suggests words as people type, but the suggestion list sits off to the side. Re‑add the field with your form or theme’s “Autocomplete / Tag Input” option so the list is directly linked and appears under the box. A search bar shows results in a floating panel that isn’t tied to the input. Move the panel into the same widget or block, ensuring the list opens and closes together with the box.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure dropdown suggestions are correctly linked to the input field they belong to.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_activedescendant_valid: {
|
||
violationName: __('Incorrectly Highlighted Options', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Highlighted options must point to visible content.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If a highlighted option is hidden or empty, people relying on keyboards or assistive technologies may get stuck or lose track of where they are.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Make sure the option that looks selected is actually in the list and easy to see.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A dropdown highlights a choice that is hidden or missing, confusing keyboard users.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'In a product‑category dropdown, if “Shoes” appears in the box but isn’t listed when you open the dropdown, add “Shoes” back to the list or choose a different category that really exists. For a set of radio buttons, if “Thin Crust” is shown as chosen but the button isn’t visible, un‑hide “Thin Crust” or pick another visible choice.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure selected or highlighted options are visible and present in the dropdown or group.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
combobox_active_descendant: {
|
||
violationName: __('Keyboard Navigation Issues', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Keyboard focus must stay on choices inside the dropdown.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If focus doesn’t follow the highlighted choice inside a dropdown, keyboard people may have trouble knowing where they are or selecting the right option.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'When a search or tag box shows suggestions, the blinking cursor should stay in the box while the ↑ / ↓ keys simply move the highlight through the list.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'When using the keyboard to open a dropdown, the highlighted option doesn’t stay properly focused, making it hard to choose.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'In a “Tag” field, pressing ↓ should highlight “Zoom” in the dropdown, but you should still see the cursor inside the box so you can keep typing. If the cursor jumps out of the box and into the list—so you can’t type anymore—rebuild or adjust the widget so the list opens below the box without stealing the cursor. Selecting a suggestion should copy the word into the box and close the list.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure arrow key navigation highlights options while keeping the input field focused.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_role_valid: {
|
||
violationName: __('Mismatched Element Role', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Labels for assistive technologies must match the type of content.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If role labels don’t match the actual content, assistive technology people may get wrong information about what things are and how to interact with them.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Choose the built‑in block or widget that already does what you need (Button, Heading, List, etc.)—don’t repurpose a generic text or box element and hope it acts like one.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'An image is labeled like a button, which confuses screen reader users.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'You made a paragraph look like a button with bold text and color. Swap it for your theme’s Button block so visitors—and assistive tech—instantly know it can be clicked. A plain text block was styled to look like a heading. Replace it with the Heading block so screen‑reader users can jump to it quickly.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure that elements are properly labeled with their respective roles, like using a button element for clickable actions and a heading element for headings.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
combobox_autocomplete_valid: {
|
||
violationName: __('Autocomplete Incorrect Usage', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Autocomplete settings must be applied only to the text field.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If autocomplete isn’t set up properly, people relying on keyboards or screen readers may struggle to enter information or select options.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Let the typing box decide how suggestions appear. Remove any “autocomplete” setting from the dropdown list itself, and pick the option (inline text, dropdown list, or both) that matches what users see.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A dropdown with autocomplete puts settings on the wrong parts, making it harder for assistive technology users to interact correctly.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Your “State” field shows a dropdown list as people type. Keep the autocomplete setting only on the box and choose “show list suggestions.” Don’t add extra settings to the list below. A search bar fills in the rest of the word right inside the box but never opens a list. Set the box to “inline suggestions” and leave the list turned off. If your tag picker shows both inline text and a dropdown, choose “both suggestions” on the box and make sure the list appears right under it.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure autocomplete settings are applied correctly, either within the text input field or appropriately with the dropdown list.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
combobox_focusable_elements: {
|
||
violationName: __('Dropdown Incorrect Focus', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Only the text field in a dropdown should be focusable.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If focus moves to the wrong parts of a dropdown, it can confuse people and make the site harder to navigate with a keyboard.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'When the box appears, the blinking cursor should land in the text field—not on one of the suggestions below it.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'When using the Tab key, users can accidentally focus parts of the dropdown that aren’t meant for direct typing or selection.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'In a “State” search field, clicking or tabbing into the box should put the cursor in the empty field so you can start typing. If the first suggestion (“Alabama”) is highlighted instead, adjust the widget so the cursor begins in the box. A product search overlay opens with the cursor sitting on a result link. Move the starting focus back to the search field, so users can type or paste their query immediately.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure the cursor always starts in the input field, not on suggestions, to facilitate proper keyboard navigation.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
combobox_haspopup_valid: {
|
||
violationName: __('Popup Type Misdescribed', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Dropdowns must correctly describe the type of popup they open.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If a dropdown describes the wrong type of popup, people using screen readers may not understand what will appear, making it harder to use the site.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Tell the autocomplete box to open the correct type of helper, usually a simple dropdown list, so assistive tools know what to expect.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A dropdown says it opens a menu, but it actually opens a calendar, confusing assistive technology users.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Your “Tag” field shows a straight list of suggestions. In the widget’s settings, pick the option for “Dropdown list” (or similar) instead of leaving it undefined. If your search box opens a larger pop‑up panel with extra filters, choose the setting that labels it as a “Dialog” so screen readers announce it properly.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure the correct popup type is described in the settings (e.g., Dropdown list, Dialog) to improve accessibility for screen reader users.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_descendant_valid: {
|
||
violationName: __('Invalid Nested Elements', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Some content inside certain elements may not behave as expected.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If browsers ignore labels inside certain elements, people relying on assistive technologies might miss important information or have a harder time navigating the content.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Keep options, menu items, and buttons simple. Don’t put extra buttons, links, or headings inside them.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Adding special labels inside a table or list might be ignored by browsers, causing confusion for assistive technology users.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A dropdown choice was built as a button inside another button. Replace the inner button with plain text so each choice is just one item, not a widget within a widget. A list item in a custom select menu contains a heading block. Change the heading to regular text (or bold styling) so the list stays clean and easy for assistive tech to read. Removing extra nested elements prevents confusion and lets screen‑reader users move through menus and lists without surprises.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Avoid nesting buttons, links, or headings inside menu items or options. Keep elements simple and straightforward for better accessibility.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_role_allowed: {
|
||
violationName: __('Invalid Element Role', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Elements must use correct labels for assistive technologies.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If the role is wrong or invalid, assistive technologies can’t correctly explain the purpose of the content, making the site harder to navigate and understand.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Pick the widget that already matches what you need. Don’t assign a fancy role to an element that wasn’t built for it.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'An element is given a role that doesn’t exist or isn’t allowed, making it confusing for screen reader users.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'You styled a plain box to act like a scrollbar. Replace it with your theme’s built-in Scroll area or let the browser’s own scrollbar appear naturally. A decorative icon was given a role that says “button,” but it does nothing. Remove that role or turn the icon into an actual button with a click action.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Avoid assigning incorrect or non-existent roles to elements. Use the correct role for the content to ensure clarity for assistive technologies.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_attribute_allowed: {
|
||
violationName: __('Invalid ARIA Attributes', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Labels and properties must match the type of content.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If labels or properties don’t match the content type, assistive technologies may misread the page, making it harder for people to understand and interact with it.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'When you use an accessibility setting (like “live update” or “busy”), pick one of the values the spec allows. No made-up words or empty fields.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A button is given attributes meant for a table, which can confuse screen readers.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A status message uses “live update: polite” (allowed). Change any custom value like “gentle” to “polite” so screen readers handle it correctly. A busy-indicator flag must be either “true” or “false.” If it’s blank, set it to the proper choice or remove the flag.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure that accessibility attributes match the content type, using values that are part of the accessibility specifications.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_attribute_conflict: {
|
||
violationName: __('ARIA Conflicting Attributes', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Labels and settings must not conflict with built-in HTML behavior.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If labels or settings conflict, assistive technologies might behave unpredictably, making the site harder to use for people relying on them.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'If an input is already marked as required (or has any other HTML setting), don’t add an extra ARIA tag that says the same thing. Pick one or the other.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'An element has two different settings for the same feature — one from HTML and one from ARIA — causing confusion for assistive technologies.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A phone-number field has both the standard “Required” toggle turned on and an extra “required” flag in advanced settings. Turn off the duplicate so the form doesn’t announce “required” twice. A checkbox is labeled by visible text and also by an override in accessibility settings. Keep the visible label and remove the extra override to avoid confusion.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure that ARIA and HTML settings don’t conflict with each other, particularly when describing the same functionality.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_attribute_exists: {
|
||
violationName: __('Missing ARIA Attribute Value', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Required settings for assistive technologies must not be left empty.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If required information is missing, assistive technologies can’t explain how to use the feature properly, making the site harder to navigate and understand.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Fill in every required setting with one of the allowed choices. Never leave it blank.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'An element includes a setting that’s supposed to give extra information, but the value is missing, leaving screen reader users without the details they need.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A message area is marked “live update” but the setting box is empty. Choose “polite” (or another allowed option) so screen-readers know how quickly to announce changes.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure every required attribute or setting has a valid value so assistive technologies can process it correctly.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_attribute_required: {
|
||
violationName: __('Required ARIA Attributes', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Important information must be included for assistive technologies.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
"If important details are missing, assistive technologies can't properly explain how to use a feature, making it harder for people to interact with the site.",
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Add any essential details the widget needs, such as minimum, maximum, and current value for a custom slider.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A slider is missing required information about its current value, making it confusing for screen reader users.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A vertical scroll bar shows but has no “top” or “bottom” value set. Enter 0 for minimum, 100 for maximum, and the current position (e.g., 25) so assistive tools can report progress accurately.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure sliders have proper attributes like minimum, maximum, and current value for full accessibility.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_attribute_value_valid: {
|
||
violationName: __('Incorrect ARIA Value', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Settings for assistive technologies must use correct values.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If the values are incorrect, assistive technologies might misread the content or stop working properly, making the site harder to use.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Replace any invented or misspelled value with one from the official list—for example, “polite,” “assertive,” “true,” or “false.”',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A dropdown uses a value that isn’t allowed, confusing screen readers and other assistive tools.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A status message is set to “gentle.” Change it to “polite” so screen-readers recognize it.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure you use the correct, valid values for ARIA attributes to improve accessibility.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_eventhandler_role_valid: {
|
||
violationName: __('Invalid Interactive Role', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Clickable or interactive elements must have the right label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If interactive elements aren’t labeled correctly, people using assistive technologies might not know they can click or use them, making the site harder to navigate.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Use the proper element for the action (Button, Link, etc.) or clearly label the custom element as such.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A clickable area doesn’t have a proper role, making it unclear to screen reader users that it can be interacted with.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A DIV styled as a button should be replaced with a real Button block, or labeled in accessibility settings as a button, so keyboards and screen-readers can activate it.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure that interactive elements like buttons or links are properly labeled and identified to enhance usability for screen reader users.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_id_unique: {
|
||
violationName: __('Duplicate ARIA IDs', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Labels must point to real, visible content.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If labels point to missing or hidden content, assistive technology people may get confused or miss important information on the page.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give each form helper (tooltip, hint, error) its own unique ID, and make sure the field’s “Described by” setting points to that exact ID.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'An element references an ID that doesn’t exist or is hidden, leaving screen reader users without the right information.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Your “Last Name” input references “hint‑last‑name,” but no helper with that ID exists. Add a helper with that ID—or update the reference to the correct helper—to avoid confusion.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Ensure that each label points to an actual helper and that IDs are unique and correctly referenced to avoid confusion for screen reader users.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_widget_labelled: {
|
||
violationName: __('Missing Widget Label', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Interactive elements must have a clear, accessible name.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If interactive elements don’t have a name, people relying on assistive technologies may not know how to interact with them, making the site confusing and harder to use.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give every interactive part (menu, slider, search icon, etc.) a short name that says what it does.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A button has no label, so screen reader users don’t know what it does.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Add a heading “Table of contents” just above a tree menu and link the menu to that heading so screen-readers announce it.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A magnifying-glass icon that opens search results gets a hidden label “Search” so voice users know its purpose.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
combobox_design_valid: {
|
||
violationName: __('Outdated Dropdown Design', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Update dropdowns to meet the latest accessibility standards.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If dropdowns don’t follow the latest accessibility guidelines, people relying on screen readers or keyboards may have trouble using them, leading to a poor experience.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Use a single autocomplete widget that opens suggestions right under the typing box avoid stitching separate pieces together.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A dropdown is built using an outdated setup, making it harder for assistive technology users to navigate and select options.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Replace a free-text box plus a detached list with one autocomplete field where the list pops up below as you type.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Make sure the field, any “▼” button, and the suggestions list belong to the same component so arrow keys move naturally through the choices.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
element_id_unique: {
|
||
violationName: __('Duplicate Element IDs', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Each element must have a unique ID.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If IDs are not unique, assistive technologies and browsers can get confused, making it harder for people to navigate the page correctly.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give each helper, section, or control its own one‑of‑a‑kind ID never reuse the same ID twice.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Two different sections on a page are given the same ID, which can confuse screen readers and other tools.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Two newsletter forms both use “signup.” Rename one to “signup‑footer” and update any references.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A tooltip and a heading share “info.” Change the tooltip’s ID to “info‑tip” so labels point to the right place.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
element_accesskey_unique: {
|
||
violationName: __('Duplicate Shortcut Keys', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Shortcut keys must be unique on each page.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If shortcut keys aren’t unique, keyboard people can trigger the wrong action or get confused when navigating the page.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Assign each shortcut letter only once per page so they don’t clash.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Two different buttons are assigned the same keyboard shortcut, making it unclear which one will be activated.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'“Accept” and “Approve” buttons both use “A.” Change one to “C” (for Confirm) so each key triggers just one action.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A link and a form field both claim “S.” Remove or change one of them to keep shortcuts unique.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_attribute_valid: {
|
||
violationName: __('Invalid ARIA Attribute', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Labels and settings must match the type of content.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If labels or settings don’t match the content, assistive technology people may hear wrong or unclear information, making the site harder to navigate.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Remove or change any accessibility setting the element isn’t allowed to have.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'An element is given settings that don’t fit its type, confusing assistive technologies.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A paragraph has a setting for “expanded/collapsed,” which only applies to collapsible items—delete that setting.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A list item needs to show it can open and close; change its type to a collapsible list item first, then keep the “expanded” flag.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
input_checkboxes_grouped: {
|
||
violationName: __(
|
||
'Checkboxes/Radio Buttons Not Grouped',
|
||
'pojo-accessibility',
|
||
),
|
||
whatsTheIssue: __(
|
||
'Related checkboxes or radio buttons must be grouped together.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If related choices aren’t grouped, assistive technology people may not realize the options are connected, leading to confusion and mistakes.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Keep check‑boxes or radio buttons that belong to the same question in one group, and keep unrelated choices in separate groups.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A set of shipping options appears visually together but isn’t grouped for screen reader users, making it harder to understand they belong to the same question.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Place all “Newsletter Topics” check‑boxes (News, Tips, Events) in one cluster under that heading.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Put “Shipping Method” radio buttons (Standard, Express) in their own cluster—do not mix them with the newsletter choices.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
fieldset_label_valid: {
|
||
violationName: __('Duplicate Fieldset Label', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Groups of form fields must have unique names.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If groups of inputs have the same name, people relying on assistive technologies may get confused about which section they are in, leading to mistakes when filling out forms.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Add a short group label (such as “Payment Method” or “Choose Your Size”) so everyone knows what the nearby options are for.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Two sections of a form are both labeled "Contact Info," making it hard for screen reader users to tell them apart.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Above three card‑type radio buttons, add the heading “Payment Method.”',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Above four T‑shirt size check‑boxes, add “Choose Your Size.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
form_label_unique: {
|
||
violationName: __('Unclear Form Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Form fields must have one clear label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If a form field has more than one label, assistive technology people might hear conflicting instructions, making it harder to fill out the form correctly.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Make sure each field has only one label attached remove any duplicates that point to the same input.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A text input has two labels attached to it, confusing screen reader users about what information is needed.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Two “Email Address” labels both point to the same email box. Keep one label and delete the extra.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
label_ref_valid: {
|
||
violationName: __('Unclear Form Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Labels must be correctly connected to form fields.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If labels aren’t properly connected to form fields, assistive technology people may not know what information to enter, leading to confusion and mistakes.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Check that each label actually targets its own input if the link is broken, update it to match the field’s ID.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A label points to an input field that doesn’t exist or is missing an ID, making it hard for screen reader users to know what the label applies to.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'The “Phone Number” label points to “phone‑1,” but the input is “phone.” Change the label to point to “phone” so clicking the label places the cursor in the box.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
input_autocomplete_valid: {
|
||
violationName: __('Autocomplete Mismatch', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Autocomplete settings must match the type of form field.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If autocomplete settings don’t match the field type, browsers and assistive technologies may suggest wrong information, making forms harder to fill out correctly.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Tell the browser exactly what each field is for so it can offer the right autofill suggestions.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'An address field is marked to autocomplete as a phone number, confusing users and autofill tools.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Your “First name” field currently uses a custom label like “given-name,” so browsers don’t offer saved names. Change the field’s autofill setting to “First name.”',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'The credit-card box is set to “cc-num,” which password managers don’t recognize. Switch it to “Credit card number” so users can quickly fill it.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
error_message_exists: {
|
||
violationName: __('Missing Error Messages', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Error messages must be properly connected and announced.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If error messages aren’t properly connected, people relying on assistive technologies may not realize there’s a problem, making it hard to fix mistakes and complete forms.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Make sure every field’s error box exists and becomes visible when there’s a problem.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Relationship between elements need to be properly defined.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A signup field points to an error message that doesn’t exist—you see no feedback. Create the missing error text below the field so users know what went wrong.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'An error message container is hidden even when the form flags a mistake. Change its settings so it appears in plain sight when needed.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
input_label_after: {
|
||
violationName: __('Misplaced Checkbox Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Checkboxes and radio buttons must have a label placed after them.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If the label isn’t placed after the checkbox or radio button, screen reader people may get confused about which option they are selecting, leading to mistakes.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Keep the label text immediately after the checkbox or radio button so they read as one control.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A checkbox appears, but the label describing it comes before or is missing, making it unclear for users what the checkbox is for.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A newsletter signup has the box followed by “Receive updates.” Perfect—you see the box and label together.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'If your label is sitting above or to the left of the box and feels disconnected, move it to sit directly to the right of the checkbox.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
input_label_before: {
|
||
violationName: __('Label Placement Incorrect', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Text fields and dropdowns must have a label placed before them.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If the label comes after the text field or dropdown, people relying on assistive technologies might not understand what they need to enter or choose, causing confusion.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Show the label text just before each input box so users know what to enter.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A text box appears before its label, making it harder for screen reader users to know what information is expected.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'“Email address” appears right above the email field. Good—you see the prompt before you type.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'If the label sits after the field or is missing, drag or insert the text so it comes immediately before the input box.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
input_label_exists: {
|
||
violationName: __('Unclear Form Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Every form field must have a label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If a form field doesn’t have a label, people relying on assistive technologies may not know what information to enter, making forms harder or impossible to complete.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Add or link a clear text label to each input, dropdown, or checkbox so everyone knows its purpose.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A search box appears on the page without any label, making it unclear to screen reader users what the field is for.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'An address field has no label—add “Mailing address” above it.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A hidden label was used for design reasons—turn on the visible label option or provide a clear name in the control’s settings.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_hidden_nontabbable: {
|
||
violationName: __('Incorrect Tab Order Roles', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Hidden sections should not contain focusable elements.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
"If people can tab to hidden elements, it can cause confusion and frustration, especially for keyboard and screen reader users who can't interact with what they can't see.",
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Mark icons, graphics, or decorative bits so they’re skipped by screen readers and not included in keyboard navigation.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A hidden panel still contains a button that users can accidentally tab to, even though they can’t see it.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A decorative star icon before headings shouldn’t be read aloud—set it to “hidden from assistive tech” and remove it from the tab order.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'If a background graphic accidentally gets focus, adjust its settings so it never receives keyboard focus and is ignored by screen readers.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_activedescendant_tabindex_valid: {
|
||
violationName: __('Keyboard Navigation Issues', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Elements highlighting active choices must be reachable with the keyboard.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If people can’t reach elements that highlight active choices, they may lose track of where they are or be unable to make a selection, leading to a frustrating experience.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Make sure you can tab into any custom selection or toolbar so keyboard users can start interacting with its items.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'An element highlights a selection but can’t be focused using the Tab key, making it hard for keyboard users to interact with it.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'In your page builder, enable the “Focusable” option for the custom toolbar or dropdown container so it’s reached when you press Tab.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Check that once the container is focused, arrow keys move through its buttons or options.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_child_tabbable: {
|
||
violationName: __('Keyboard Navigation Issues', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Interactive components must have something users can reach with the keyboard.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If an interactive part of the site doesn’t have anything people can tab to, keyboard people and people relying on assistive technologies may not be able to use it at all.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Ensure at least one item inside any custom list or tree can be reached with the Tab key so users can navigate inside.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A popup opens but none of its buttons or options can be reached by tabbing, leaving keyboard users stuck.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'For a collapsible menu, turn on the “Link” or “Focusable” setting for the first menu item so Tab lands there.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'In a nested list, make sure each sub-item is a real link or button, not just plain text, so it can receive focus.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
element_scrollable_tabbable: {
|
||
violationName: __('Scrollable Element Untabbable', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Scrollable non-interactive element is not tabbable.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
"If people can't reach scrollable areas using the keyboard, they might miss important content — making the website harder to navigate for those who don't use a mouse.",
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Let people tab into any scrollable box so they can use arrow keys to scroll through hidden content.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
"A section with scrollable product cards can't be reached or explored by keyboard users.",
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'If you’ve put text in a small “scroll box” widget, enable its keyboard scrolling feature so Tab brings focus inside and arrow keys move the content.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'Replace a custom block that can’t be reached by Tab with a built-in “Scrollable Panel” element that supports keyboard navigation.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
iframe_interactive_tabbable: {
|
||
violationName: __('Keyboard Navigation Issues', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Embedded Interactive content must be reachable with the keyboard.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
"If interactive content like videos or forms can't be reached by keyboard, some people won't be able to play, pause, or interact with them — making the site harder to use and less accessible.",
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Make sure any embedded content (videos, maps, forms) can be reached by pressing Tab or hide it completely if it’s purely decorative.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'An embedded video player is skipped when users navigate with the Tab key.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'For a YouTube video embed, turn on the “Focusable” setting so users can Tab into the video controls.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'If an iframe only shows decorative graphics, mark it as “Hidden from keyboard” so Tab skips over it.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
a_text_purpose: {
|
||
violationName: __('Link Purpose Unclear', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Links must clearly describe their purpose.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If links don’t clearly describe their purpose, people relying on assistive technologies may not understand where the link will take them, making navigation confusing.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give every link (text or image) a name that tells people where it goes.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A link says "Click here" without explaining where it goes, leaving screen reader users guessing.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Change a generic “Learn more” link to “Learn more about our Pricing Plans.”',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'For a linked image, update its alt text to “View our Spring Collection” instead of “image1.png.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
label_name_visible: {
|
||
violationName: __('Visible Label Mismatch', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'The accessible name must match what users see.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If the accessible name doesn’t match the visible label, people relying on assistive technologies may hear different information than what they see, causing confusion and mistakes.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Make sure the name announced by assistive tools matches exactly what users see on the button or field.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A button visually says "Submit Form," but its accessible name is just "Submit," which can confuse screen reader users.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'If a button reads “Next Page,” set its accessibility name to “Next Page” (not “Go Forward”).',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'For a search icon that shows a magnifying glass, give it the hidden label “Search” so screen-reader users hear “Search” when they land on it.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
html_lang_exists: {
|
||
violationName: __('Missing Page Language', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Set the main language of the page.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If the page’s language isn’t set, screen readers may mispronounce words, making the content harder to understand for people who rely on them.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Tell browsers and assistive tools what language your site uses so they can pronounce text correctly.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A website is written in English, but there’s no language setting, making it harder for screen readers to pronounce words correctly.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'In your site settings or template options, set the language to “English” (or your chosen language) so screen readers switch voices appropriately.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'If your page is in French, change the language setting from blank or “Automatic” to “French.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
html_lang_valid: {
|
||
violationName: __('Invalid Language Code', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'The page’s language setting must be valid.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If the language code isn’t valid, assistive technologies may not recognize it, leading to incorrect pronunciation and a confusing experience for people.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Set your site’s main language to a standard code so browsers and screen readers know how to pronounce text.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A page tries to set its language, but uses an incorrect code, causing screen readers to mispronounce the text.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'In your site settings, change the language from “english” or blank to the official code “en” (for English).',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'If your site is in Spanish, pick “es” instead of writing out “Spanish” or leaving it unset.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
element_lang_valid: {
|
||
violationName: __('Incorrect Language Tag', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Language changes in the content must use valid language settings.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If language changes aren’t properly marked, assistive technologies may mispronounce words, making the content harder to understand for people.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Tag any text in a different language with its proper code so assistive tools switch pronunciation correctly.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A paragraph switches from English to Spanish but doesn’t correctly mark the language change, confusing screen readers.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'For a French quote, apply the code “fr” to that paragraph so screen readers read it with French pronunciation.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'If you slip in a German phrase, mark it as “de” rather than leaving it as default.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
input_haspopup_conflict: {
|
||
violationName: __('Unclear Form Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Inputs with suggestions should not have extra popup labels.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If extra popup labels are added where they aren’t needed, people relying on assistive technologies may get the wrong idea about how the input works, leading to confusion.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'If a text field already uses browser suggestions, turn off any extra “popup” option you added so they don’t conflict.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A search box with suggested terms uses an additional popup label, confusing assistive technologies about what will open.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'You added a “show menu” toggle to an email field that already shows domain suggestions—switch that toggle off so the browser list works normally.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'If a phone-number field has both built-in dropdown and a custom “has popup” setting, remove the custom setting and let the browser handle it.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
element_tabbable_role_valid: {
|
||
violationName: __('Orientation Lock Issue', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Elements users can tab to must be correctly labeled as interactive',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If an element can be reached with the keyboard but isn’t labeled as interactive, people may not know what it does or how to use it.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'If something shouldn’t be clicked or typed into, remove it from Tab order if it should be interactive, make sure it’s focusable.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A focusable item looks interactive but doesn’t have a proper role, confusing screen reader users.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A banner image that isn’t clickable still got tab focus—turn off its focus setting so Tab skips it.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A custom drop-down that users need to open wasn’t reachable by keyboard—enable its “focusable” option so Tab lands on it first.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
element_orientation_unlocked: {
|
||
violationName: __('Locked Orientation View', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Content must work in both portrait and landscape views.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If content is locked to one screen orientation, it can be hard or impossible for some people to interact with the site, especially those with limited mobility or using mounted devices.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Avoid locking parts of your page into portrait or landscape use responsive settings so content rotates naturally.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A form forces users to turn their device sideways to fill it out, making it difficult for people who can’t easily rotate their screens.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'You added a rotate effect that only shows correctly in portrait—remove that so the page also works in landscape.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'If a section flips upside down on mobile, switch to a flexible layout option that adapts to both orientations.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
meta_redirect_optional: {
|
||
violationName: __('Auto Refresh Without Warning', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Pages should not refresh automatically without a warning or option.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If a page refreshes without warning, people — especially those with disabilities — might lose their place, miss important information, or have trouble completing tasks.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Don’t force the page to reload on a timer either remove the automatic refresh or let visitors pause or extend it.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A page refreshes after a few minutes without telling the user, causing someone to lose information they were entering.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Your dashboard refreshes every minute—add a toggle so people can turn off auto-update if they need time to read.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'If a warning page times out, show a “Stay on this page” button and a countdown so users aren’t surprised.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
blink_elem_deprecated: {
|
||
violationName: __('Persistent Blinking Content', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Avoid using content that blinks repeatedly.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'Persistent blinking can be distracting, overwhelming, or even dangerous for some people, making the website less safe and harder to use.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Make any flashing or blinking element stop on its own within a few seconds or let people pause or view a non-blinking version.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'An ad banner keeps blinking without stopping, distracting users and potentially triggering seizures for people with certain conditions.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A warning banner that flashes indefinitely is replaced with one that stops blinking after 3 seconds and includes a “Pause animation” button.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A promotional carousel offers a “View static version” link so users who find movement distracting can switch to a still layout.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
marquee_elem_avoid: {
|
||
violationName: __('Scrolling Text Used', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Don’t use scrolling text (marquee).',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'Scrolling text can be distracting and is not supported by modern accessibility standards, making the site harder to use for many people.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Remove automatic marquee effects or give people a simple toggle to stop or turn off the motion.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A message scrolls across the screen using outdated code, making it hard for users to read or interact with the page.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Replace an endlessly scrolling news ticker with a static list of headlines and an optional “Start scrolling” button for those who want the effect.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A marquee of customer logos includes an “Animation off” setting so viewers can read at their own pace.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
table_headers_ref_valid: {
|
||
violationName: __('Invalid Table Header Link', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Table headers must correctly link to their cells.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If table headers aren’t properly linked, people relying on assistive technologies may not understand the relationship between the data and its meaning, leading to confusion.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Make sure every cell in a data table clearly points to the right column and row headings, so screen readers announce them together.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A data cell points to a header that doesn’t exist in the table, making it confusing for screen reader users to understand the information.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'In a price comparison table, each price cell is tagged to both the product name at the top and the feature name on the left.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A student-grades chart ensures each score cell is tied to “Alice” in the first column and “Math” in the header row.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
table_scope_valid: {
|
||
violationName: __('Invalid Table Scope Values', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Use the correct values for table header settings.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If table headers aren’t set up correctly, assistive technologies may not be able to explain the table structure properly, making it harder for people to understand the information.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Don’t add extra header labels if your table only has a first row or first column use simple settings to mark those instead.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A table header uses an invalid value for its scope, making it unclear to screen reader users how the table is organized.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A contact list table with names down the side and phone numbers across the top removes unnecessary “Header” markings on every cell—keeps only “Name” (column) and “Phone” (row) labels.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'For a report table, mark the left column as “Category” and the top row as “Quarter” without adding extra header markers elsewhere.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
table_headers_exists: {
|
||
violationName: __('Missing Table Headers', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Data tables must clearly identify headers.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If tables don’t identify their headers, people relying on assistive technologies may not know how to read and understand the information correctly.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'If you’re using a table only for page layout, switch to a layout block if it’s real data, add clear header rows or columns.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A table lists information but doesn’t mark which cells are headers, making it confusing for screen reader users to understand the data.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A two-column design built with a table is redone using side-by-side layout blocks.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A sales-data table adds a bold header row “Product | Units Sold | Revenue” so every column is clearly labeled.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
table_headers_related: {
|
||
violationName: __('Complex Table Headers Missing', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Complex tables must link headers and data clearly.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If headers and data aren’t clearly linked in complex tables, people relying on assistive technologies can get lost or misunderstand the information.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'For tables where one cell relates to several row or column headers, tag each data cell to all the headings it belongs to.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'In a large table, data cells aren’t properly connected to their headers, making it hard for screen reader users to understand what each number means.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'In a schedule grid, meeting times are linked to both “Monday” and “Conference Room A” so assistive tech reads both.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A financial report table assigns each number cell to “Q1,” “Q2,” etc., and to “Expenses” or “Revenue” as appropriate.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
table_structure_misuse: {
|
||
violationName: __('Layout Table Misuse', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Tables used only for layout should not have headers or structure.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If a table meant just for layout has headers or structure, assistive technologies may misinterpret it as a data table, leading to a confusing experience.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Don’t use table markup for page layout if it’s decorative or structural, rebuild with layout blocks and remove captions, header tags, and other table-only features.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A layout table is marked with a role that hides it from assistive technologies, but it still includes headers, causing confusion for screen reader users.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A page section arranged in columns switches from a layout table to a responsive grid layout.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A “testimonial” layout that used <th> and <caption> is rebuilt with cards or panels, with no table elements at all.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
dir_attribute_valid: {
|
||
violationName: __('Invalid Text Direction', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Text direction settings must use a valid value.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If the text direction isn’t set properly, people may have trouble reading the content, especially in languages that flow right-to-left, like Arabic or Hebrew.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Set the text direction to match the language left-to-right for English, right-to-left for Hebrew/Arabic, or automatic if you’re mixing languages.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A page sets the text direction using an invalid value, making it harder for assistive technologies to display the content correctly.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'In your site or theme settings, choose Left-to-Right (LTR) if your content is in English or most European languages.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'For a section in Arabic, switch its direction to Right-to-Left (RTL) so the text reads naturally.',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'If you have both English and another language, use the Auto setting so the browser figures it out.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_application_label_unique: {
|
||
violationName: __('Duplicate Interactive Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Interactive areas must have a clear, unique label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If interactive areas don’t have unique labels, people relying on assistive technologies may not know what each area is for, making navigation confusing and frustrating.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give each interactive “app-style” region (like a widget panel) a unique name so screen readers know what it is.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Two app sections on a page are both labeled "Main Area," making it confusing for screen reader users to tell them apart.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A weather box gets the hidden name “Weather Forecast Panel” so assistive tools announce it.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A stock-ticker area is labeled “Stock Ticker Feed” (even if the label isn’t visible) to describe its purpose.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_application_labelled: {
|
||
violationName: __('Missing Interactive Label', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Interactive areas must have a clear label describing their purpose.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If interactive areas don’t have a clear label, people relying on assistive technologies may struggle to understand and use the content correctly.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Link each application-style panel to visible heading text or add a hidden label so it’s announced correctly.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'An app-like section is created but doesn’t have a label, leaving screen reader users unsure what the section is for.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Above a “News” widget, add the heading “Top Stories” and connect the panel to that heading so screen readers say “Top Stories, panel.”',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'If there’s no visible heading, give the panel a hidden label like “Search Widget” for clarity.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_article_label_unique: {
|
||
violationName: __('Duplicate Article Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Articles must have a clear, unique label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If articles don’t have unique labels, people relying on assistive technologies may get confused about the content or skip important information.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Make sure every article or blog post section has its own clear title so users know what it contains.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Two articles on a news site are both labeled "Story," making it hard for screen reader users to tell them apart.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A feature story gets the title "How to Improve Site Accessibility" in its hidden or visible label.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'A guest post section is labeled "Guest Insights: UX Trends" so assistive tech announces the correct article heading.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_banner_label_unique: {
|
||
violationName: __('Duplicate Banner Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Banners must have a clear, unique label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If banners don’t have unique labels, people relying on assistive technologies may get confused about the purpose of each section, leading to a frustrating experience.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give your main page header (the banner) a unique name describing your site or section.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Two banners on a page are both labeled "Site Banner," making it difficult for screen reader users to know which banner provides which information.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Label the top header region “Pelican Claims Site Header” so screen readers recognize it as the main banner.',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'If you have two headers, remove the extra label from the secondary one and keep only the primary banner named “Main Page Header.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_banner_single: {
|
||
violationName: __('Multiple Banners Used', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Each page should have only one banner.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If there’s more than one banner, people relying on assistive technologies may get confused about the structure of the page, making navigation harder.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Only one element on the page should act as the main banner. Remove banner labels from any extra headers.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A website includes two banners at the top, confusing screen reader users about where the main site information starts.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'If both your logo area and top navigation were marked as banners, turn off the banner setting on the navigation so only the logo area remains the one true banner.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_complementary_label_unique: {
|
||
violationName: __('Duplicate Sidebar Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Side content areas must have a clear, unique label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If side sections don’t have unique labels, people relying on assistive technologies may not understand the difference between them, leading to confusion when navigating the page.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give each sidebar or related-content region its own unique label so users understand its purpose.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Two sidebars are both labeled "Related Information," making it hard for screen reader users to tell them apart.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A news sidebar is labeled “Related Articles” so it’s announced as such.',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'A contact info box is named “Office Hours & Contacts.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_complementary_labelled: {
|
||
violationName: __('Sidebar Missing Label', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Side content areas must have a clear label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If side content isn’t labeled, people relying on assistive technologies may miss important information or not understand the purpose of different sections.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Link each complementary section (sidebar, help panel) to its visible heading or add a hidden label so it’s announced properly.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A sidebar with extra information isn’t labeled, so screen reader users don’t know what the section is about.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Above a “Recent Posts” sidebar, add the heading “Recent Posts” and connect the section to it so screen readers say “Recent Posts, section.”',
|
||
'pojo-accessibility',
|
||
),
|
||
|
||
__(
|
||
'If no heading fits, give the section a hidden label like “Help & Support Panel.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_content_in_landmark: {
|
||
violationName: __('Content Outside Landmarks', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'All content must be placed inside clear sections (landmarks).',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If content isn’t placed inside clear landmarks, people relying on assistive technologies may struggle to navigate and understand the structure of the page.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Enclose each major section of your page in the right landmark region so assistive tools know what each part is for.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A page has important content floating outside of main sections like “Main,” “Navigation,” or “Footer,” making it harder for screen reader users to find.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Main content: Put your primary article or page text inside a “Main Content” block or section so it’s announced as the main section.',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'Footer: Use your theme’s Footer area (or add a “Footer” block) so it’s recognized as the page’s footer.',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'Sidebar or related links: Place widgets like “Related Articles” or “Contact Info” inside a Sidebar or a “Complementary” region.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_contentinfo_label_unique: {
|
||
violationName: __('Duplicate Footer Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Footer sections must have a clear, unique label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If footer sections don’t have unique labels, people relying on assistive technologies may get confused about the different types of information available at the bottom of the page.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give your footer area a unique name (like “Site Footer”) so screen readers announce it as the page’s footer.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Two footers on a page are both labeled "Footer," making it hard for screen reader users to know which one contains which information.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'In your footer settings, add the hidden label “Site Footer” so assistive tools recognize it.',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'If you have a legal notice and a separate copyright block, label only the main footer section and leave the rest unlabeled.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_contentinfo_single: {
|
||
violationName: __('Multiple Footers Present', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Each page should have only one footer section.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If there’s more than one footer, people relying on assistive technologies may get confused about the page structure, making navigation harder and less predictable.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Keep only one section marked as the page’s footer and remove any extra footer roles from secondary sections.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A page has two footers, making it confusing for screen reader users to understand where the main site information ends.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'If both your top bar and bottom bar were set as footers, turn off the footer label on the top bar so only the true footer remains.',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'A copyright widget had a footer setting—remove that so only the main footer block is treated as contentinfo.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_document_label_unique: {
|
||
violationName: __('Duplicate Document Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Documents must have a clear, unique label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If documents don’t have unique labels, people relying on assistive technologies may not understand the difference between them, leading to confusion and frustration.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'For any special document-like widget or panel, give it its own visible or hidden title so users understand its purpose.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Two embedded documents on a page are both labeled "Document," making it difficult for screen reader users to tell them apart.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'A news feed panel is labeled “Breaking News Feed” so screen readers announce it.',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'A downloadable report section gets a hidden label “Monthly Sales Report” if no visible heading fits.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_form_label_unique: {
|
||
violationName: __('Unclear Form Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Forms must have a clear, unique label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If forms don’t have unique labels, people relying on assistive technologies may get confused about what each form is for, leading to mistakes and frustration.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give each form on the page a short, unique name (for example, “Contact Form” or “Newsletter Signup”) so assistive tools can tell them apart.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A page has two different forms, but both are labeled "Form," making it hard for screen reader users to know which form they are filling out.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Label your contact form “Contact Us Form” in the form settings.',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'A separate survey form is labeled “Customer Feedback Survey.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_landmark_name_unique: {
|
||
violationName: __('Duplicate Landmark Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Landmark sections must have a unique label or be clearly separated.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If landmarks aren’t uniquely labeled or clearly separated, people relying on assistive technologies can get confused about the page layout, making navigation harder.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'If you have more than one section of the same kind (like two sidebars), give each a different label so users know which is which.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Two navigation sections are both labeled "Main Menu," making it hard for screen reader users to tell them apart.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Rename one sidebar “Related Articles” and the other “Recommended Products.”',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'For two menus, label one “Main Navigation” and the other “Footer Menu.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_main_label_unique: {
|
||
violationName: __('Duplicate Main Content Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Main sections must have a clear, unique label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If main sections don’t have unique labels, people relying on assistive technologies may get lost or misunderstand the structure of the page.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Identify one area as your page’s main content; if you need additional main-like sections, give each a unique label instead of multiple “Main” roles.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A page has two main sections, both labeled "Main Content," making it confusing for screen reader users to know which section they are in.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Ensure only your primary content block is set as “Main.”',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'If you show search results in a separate main-style panel, label it “Search Results Panel” rather than marking it as another main region.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_navigation_label_unique: {
|
||
violationName: __('Duplicate Navigation Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Navigation menus must have a clear, unique label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If navigation menus don’t have unique labels, people relying on assistive technologies may get confused and struggle to move around the site.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give every navigation menu (header, sidebar, footer) its own label so users know which menu they’re in.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A page has two navigation sections, both labeled "Navigation," making it hard for screen reader users to know which menu they are using.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__('Label your top menu “Primary Navigation.”', 'pojo-accessibility'),
|
||
__('Label a footer menu “Footer Links.”', 'pojo-accessibility'),
|
||
],
|
||
},
|
||
},
|
||
aria_region_label_unique: {
|
||
violationName: __('Duplicate Region Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Content sections (regions) must have a clear, unique label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If content sections don’t have unique labels, people relying on assistive technologies may get confused about the layout and miss important information.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give each section or “region” (like a news box or sidebar) its own name so users know what it contains.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'Two regions on a page are both labeled "Section," making it difficult for screen reader users to understand the difference between them.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Label your weather updates panel “Weather Forecast” and your stock ticker panel “Market Updates.”',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'If you have two help boxes, name one “FAQ Help” and the other “Live Support Info.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_region_labelled: {
|
||
violationName: __('Unlabeled Content Region', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Content sections must have a clear label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If content sections aren’t labeled, people relying on assistive technologies may not understand the purpose of different parts of the page, making navigation harder.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Tie each section to its visible heading or add a hidden name so screen readers announce it correctly.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A section with additional information is not labeled, making it unclear for screen reader users what the section is about.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Add a heading “Real-Time Log” above a log panel and connect the panel to that heading.',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'If there’s no visible heading, give the panel a hidden label like “Real-Time Log Panel.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_search_label_unique: {
|
||
violationName: __('Duplicate Search Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Search areas must have a clear, unique label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If search areas don’t have unique labels, people relying on assistive technologies may get confused and struggle to find the right search tool.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give each search input its own label so people know what they’re searching.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A page has two search bars, but both are labeled "Search," making it hard for screen reader users to know which search feature they are using.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Label one search box “Search Products” and another “Search Blog Posts.”',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'If your theme forces a generic “Search,” add hidden text “Search Site” to distinguish it.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
aria_toolbar_label_unique: {
|
||
violationName: __('Duplicate Toolbar Labels', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Toolbars must have a clear, unique label.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If toolbars don’t have unique labels, people relying on assistive technologies may get confused about which toolbar to use, leading to mistakes and frustration.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give every toolbar or set of tools a clear name so users know what controls they’re grouped in.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A page has multiple toolbars, but they are all labeled "Toolbar," making it difficult for screen reader users to know what each one controls.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Call your formatting toolbar “Text Formatting Tools.”',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'Name a layout toolbar “Page Layout Controls.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
skip_main_exists: {
|
||
violationName: __('Missing Skip Link', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Pages must let users skip straight to the main content.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
"If people can't easily skip to the main content, especially keyboard and screen reader users, navigating the site becomes slow, frustrating, and tiring.",
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Add a “Skip to main content” link as the first focusable item so keyboard users can jump straight to your page’s main area.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A user has to tab through the entire navigation menu every time they visit a new page because there’s no shortcut to jump to the main content.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Include a hidden link at the top labeled “Skip to main content” that appears when focused.',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'Ensure that pressing Tab brings that link into view before the navigation menu.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
page_title_exists: {
|
||
violationName: __('Missing Page Title', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Each page must have a clear, descriptive title.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If the page title doesn’t describe the content clearly, people may have trouble understanding where they are, especially when using tabs, bookmarks, or screen readers.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Make sure every page actually has a title ⎯ and that the title tells visitors what’s on the page.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A page title just says "Home" even though it’s a product page, making it unclear to users and screen readers what the page is about.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'If the title box in your page or SEO settings is blank, type a short description such as “About Our Clinic.”',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'If the title shows “Untitled Page,” replace it with something specific like “Contact Us – Email & Location.”',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'If the design template “hides” the title area completely, switch to (or edit) a template that includes a title field, then add a descriptive phrase like “Organic Dog Treats – Home.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
frame_title_exists: {
|
||
violationName: __('Missing Iframe Title', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Embedded content (iframes) must have a clear, unique title.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If embedded content doesn’t have a descriptive title, people relying on assistive technologies may not know what the content is or whether they want to interact with it.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Give each embedded frame (like videos or file previews) a short title so everyone knows what’s inside.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'An embedded video has no title, making it unclear to screen reader users what the embedded content is about.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'For a project file embed, set its title to “Project Files Preview.”',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'For a tutorial video, use “How-To Tutorial Video.”',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
list_children_valid: {
|
||
violationName: __('Invalid List Items', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Lists must only contain list items.',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If lists are not built with the right items, assistive technologies can misread the structure, making it harder for people to understand the content.',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'Make sure every item in a list or grouped set is a true list item so screen readers announce them in order.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A list groups together elements that aren’t proper list items, confusing screen readers.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'In a bullet list of features, ensure each feature is a list item—don’t mix in headings or plain text blocks.',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'For grouped icons or buttons, use a list container so each icon is treated as one item.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
table_aria_descendants: {
|
||
violationName: __('Misused Table Roles', 'pojo-accessibility'),
|
||
whatsTheIssue: __(
|
||
'Don’t override the natural roles of table elements',
|
||
'pojo-accessibility',
|
||
),
|
||
whyItMatters: __(
|
||
'If table elements have their natural roles changed, assistive technologies may misread the table, making it harder for people to understand the data',
|
||
'pojo-accessibility',
|
||
),
|
||
howToResolve: __(
|
||
'When you add a table or grid, don’t layer extra labels or roles onto each row or cell. Use the table block’s built-in settings.',
|
||
'pojo-accessibility',
|
||
),
|
||
seeAnExample: {
|
||
issue: __(
|
||
'A table header cell (<th>) is manually given a different role, making it confusing for screen readers to understand the table structure.',
|
||
'pojo-accessibility',
|
||
),
|
||
resolution: [
|
||
__(
|
||
'Use your table widget’s header toggle for the first row instead of manually tagging each header cell.',
|
||
'pojo-accessibility',
|
||
),
|
||
__(
|
||
'If you’ve marked up each cell again, remove those extra settings so the table remains clean and predictable.',
|
||
'pojo-accessibility',
|
||
),
|
||
],
|
||
},
|
||
},
|
||
};
|