Merge pull request #166 from craftcms/bugfix/74-accessibility-name-an…

…d-context

adjust .ck-content aria values (label, describedby)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- Improved accessibility for screen readers. ([#74](https://github.com/craftcms/ckeditor/issues/74), [#166](https://github.com/craftcms/ckeditor/pull/166))
 - Fixed a bug where resized images weren’t getting updated `width` and `height` attributes. ([#165](https://github.com/craftcms/ckeditor/pull/165))
 
 ## 3.7.3 - 2024-02-08

src/Field.php

@@ -317,6 +317,8 @@ protected function inputHtml(mixed $value, ElementInterface $element = null): st
         $baseConfig = [
             'defaultTransform' => $defaultTransform?->handle,
             'elementSiteId' => $element?->siteId,
+            'accessibleFieldName' => $this->_accessibleFieldName($element),
+            'describedBy' => $this->_describedBy($view),
             'findAndReplace' => [
                 'uiType' => 'dropdown',
             ],
@@ -910,4 +912,38 @@ private function _adjustPurifierConfig(HTMLPurifier_Config $purifierConfig): HTM
 
         return $purifierConfig;
     }
+
+    /**
+     * Returns an accessible name for the field (to be plugged into CKEditor's main editing area aria-label).
+     *
+     * @param ElementInterface|null $element
+     * @return string
+     */
+    private function _accessibleFieldName(?ElementInterface $element = null): string
+    {
+        return Craft::t('site', $this->name) .
+        ($element?->getFieldLayout()?->getField($this->handle)?->required ? ' ' . Craft::t('site', 'Required') : '') .
+        ($this->getIsTranslatable($element) ? ' ' . $this->getTranslationDescription($element) : '');
+    }
+
+    /**
+     * Namespaces field's $describedBy value to be passed to the field.
+     *
+     * @param View $view
+     * @return string
+     */
+    private function _describedBy(View $view): string
+    {
+        if (!empty($this->describedBy)) {
+            $describedByArray = explode(' ', $this->describedBy);
+            $namespace = trim(preg_replace('/\[|\]/', '-', $view->getNamespace()), '-');
+            foreach ($describedByArray as $key => $item) {
+                $describedByArray[$key] = "$namespace-$item";
+            }
+
+            return implode(' ', $describedByArray);
+        }
+
+        return '';
+    }
 }

src/web/assets/ckeditor/src/ckeditor5-craftcms.js

@@ -404,6 +404,33 @@ export const create = async function (element, config) {
     Object.assign({plugins}, config),
   );
 
+  // accessibility: https://github.com/craftcms/ckeditor/issues/74
+  editor.editing.view.change((writer) => {
+    const viewEditableRoot = editor.editing.view.document.getRoot();
+
+    // adjust aria-label
+    if (
+      typeof config.accessibleFieldName != 'undefined' &&
+      config.accessibleFieldName.length
+    ) {
+      let ariaLabel = viewEditableRoot.getAttribute('aria-label');
+      writer.setAttribute(
+        'aria-label',
+        config.accessibleFieldName + ', ' + ariaLabel,
+        viewEditableRoot,
+      );
+    }
+
+    // adjust aria-describedby
+    if (typeof config.describedBy != 'undefined' && config.describedBy.length) {
+      writer.setAttribute(
+        'aria-describedby',
+        config.describedBy,
+        viewEditableRoot,
+      );
+    }
+  });
+
   // Update the source element before the initial form value has been recorded,
   // in case the value needs to be normalized
   editor.updateSourceElement();