Commit 32a7142f authored by jrockowitz's avatar jrockowitz Committed by jrockowitz

Issue #3001852 by NickWilde, jrockowitz: likert radio buttons needs...

Issue #3001852 by NickWilde, jrockowitz: likert radio buttons needs aria-labelledby attr for accessibility
parent 4767e9e0
......@@ -3,6 +3,7 @@
namespace Drupal\webform\Element;
use Drupal\Component\Render\FormattableMarkup;
use Drupal\Component\Utility\Html;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element\FormElement;
use Drupal\webform\Utility\WebformAccessibilityHelper;
......@@ -122,12 +123,19 @@ class WebformLikert extends FormElement {
}
$value = (isset($element['#value'][$question_key])) ? $element['#value'][$question_key] : NULL;
// Get question id.
// @see \Drupal\Core\Form\FormBuilder::doBuildForm
$question_id = 'edit-' . implode('-', array_merge($element['#parents'], ['table', $question_key, 'likert_question']));
$question_id = Html::getUniqueId($question_id);
$row = [];
// Must format the label as an item so that inline webform errors will be
// displayed.
$row['likert_question'] = [
'#type' => 'item',
'#title' => $question_title,
'#id' => $question_id,
// Must include an empty <span> so that the item's value is
// not required.
'#value' => '<span></span>',
......@@ -149,6 +157,7 @@ class WebformLikert extends FormElement {
// value is NULL.
// @see \Drupal\Core\Render\Element\Radio::preRenderRadio
'#value' => ($value === NULL) ? FALSE : (string) $value,
'#attributes' => ['aria-labelledby' => $question_id],
];
// Wrap title in span.webform-likert-label.visually-hidden
......
......@@ -28,13 +28,13 @@ class WebformElementLikertTest extends WebformElementTestBase {
$this->assertPattern('#<tr>\s+<th><span class="visually-hidden">Questions</span></th>\s+<th>Option 1</th>\s+<th>Option 2</th>\s+<th>Option 3</th>\s+</tr>#');
$this->assertRaw('<label for="edit-likert-default-table-q1-likert-question">Question 1</label>');
$this->assertRaw('<td><div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-likert-default-q1 form-item-likert-default-q1">');
$this->assertRaw('<input data-drupal-selector="edit-likert-default-q1" type="radio" id="edit-likert-default-q1" name="likert_default[q1]" value="1" class="form-radio" />');
$this->assertRaw('<input aria-labelledby="edit-likert-default-table-q1-likert-question" data-drupal-selector="edit-likert-default-q1" type="radio" id="edit-likert-default-q1" name="likert_default[q1]" value="1" class="form-radio" />');
$this->assertRaw('<label for="edit-likert-default-q1" class="option"><span class="webform-likert-label visually-hidden">Option 1</span></label>');
// Check advanced likert element with N/A.
$this->assertPattern('#<tr>\s+<th><span class="visually-hidden">Questions</span></th>\s+<th>Option 1</th>\s+<th>Option 2</th>\s+<th>Option 3</th>\s+<th>Not applicable</th>\s+</tr>#');
$this->assertRaw('<td><div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-likert-advanced-q1 form-item-likert-advanced-q1">');
$this->assertRaw('<input data-drupal-selector="edit-likert-advanced-q1" type="radio" id="edit-likert-advanced-q1--4" name="likert_advanced[q1]" value="N/A" class="form-radio" />');
$this->assertRaw('<input aria-labelledby="edit-likert-advanced-table-q1-likert-question" data-drupal-selector="edit-likert-advanced-q1" type="radio" id="edit-likert-advanced-q1--4" name="likert_advanced[q1]" value="N/A" class="form-radio" />');
$this->assertRaw('<label for="edit-likert-advanced-q1--4" class="option"><span class="webform-likert-label visually-hidden">Not applicable</span></label>');
// Check likert with description.
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment