Commit e1a595d8 by muhammad-ammar Committed by muzaffaryousaf

make textinput accessible

TNL-4972
parent 7240b625
...@@ -2,58 +2,58 @@ ...@@ -2,58 +2,58 @@
<%! from openedx.core.djangolib.markup import HTML %> <%! from openedx.core.djangolib.markup import HTML %>
<% doinline = "inline" if inline else "" %> <% doinline = "inline" if inline else "" %>
<div id="inputtype_${id}" class="${'text-input-dynamath' if do_math else ''} capa_inputtype ${doinline} textline" > <div id="inputtype_${id}" class="${'text-input-dynamath' if do_math else ''} capa_inputtype ${doinline} textline">
% if preprocessor is not None:
% if preprocessor is not None:
<div class="text-input-dynamath_data ${doinline}" data-preprocessor="${preprocessor['class_name']}"/> <div class="text-input-dynamath_data ${doinline}" data-preprocessor="${preprocessor['class_name']}"/>
<div class="script_placeholder" data-src="${preprocessor['script_src']}"/> <div class="script_placeholder" data-src="${preprocessor['script_src']}"/>
% endif % endif
% if status in ('unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete'): % if status in ('unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete'):
<div class="${status.classname} ${doinline}" id="status_${id}"> <div class="${status.classname} ${doinline}" id="status_${id}">
% endif
% if hidden:
<div style="display:none;" name="${hidden}" inputid="input_${id}" />
% endif
<label class="problem-group-label" for="input_${id}">${response_data['label']}</label>
% for description_id, description_text in response_data['descriptions'].items():
<p class="question-description" id="${description_id}">${description_text}</p>
% endfor
<input type="text" name="input_${id}" id="input_${id}" ${describedby} value="${value}"
% if do_math:
class="math"
% endif
% if size:
size="${size}"
% endif % endif
% if hidden: % if hidden:
<div style="display:none;" name="${hidden}" inputid="input_${id}" /> style="display:none;"
% endif % endif
/>
<input type="text" name="input_${id}" id="input_${id}" aria-label="${response_data['label']}" ${describedby} value="${value}" <span class="trailing_text">${trailing_text}</span>
% if do_math:
class="math" <span class="status" aria-describedby="input_${id}" data-tooltip="${status.display_tooltip}">
% endif <span class="sr">
% if size: %if value:
size="${size}" ${value}
% endif % else:
% if hidden: ${response_data['label']}
style="display:none;" %endif
% endif -
/> ${status.display_name}
<span class="trailing_text">${trailing_text}</span> </span>
</span>
<span class="status"
%if status != 'unsubmitted': <p id="answer_${id}" class="answer"></p>
%endif
aria-describedby="input_${id}" data-tooltip="${status.display_tooltip}"> % if do_math:
<span class="sr"> <div id="display_${id}" class="equation">`{::}`</div>
%if value: <textarea style="display:none" id="input_${id}_dynamath" name="input_${id}_dynamath"></textarea>
${value} % endif
%else:
${response_data['label']}
%endif
-
${status.display_name}
</span>
</span>
<p id="answer_${id}" class="answer"></p>
% if do_math:
<div id="display_${id}" class="equation">`{::}`</div>
<textarea style="display:none" id="input_${id}_dynamath" name="input_${id}_dynamath"></textarea>
% endif
% if status in ('unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete'): % if status in ('unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete'):
</div> </div>
% endif % endif
% if msg: % if msg:
......
...@@ -461,8 +461,7 @@ class TextlineTemplateTest(TemplateTestCase): ...@@ -461,8 +461,7 @@ class TextlineTemplateTest(TemplateTestCase):
def test_label(self): def test_label(self):
xml = self.render_to_xml(self.context) xml = self.render_to_xml(self.context)
xpath = "//input[@aria-label='%s']" % self.context['response_data']['label'] self.assert_has_xpath(xml, "//label[@class='problem-group-label']", self.RESPONSE_DATA['label'])
self.assert_has_xpath(xml, xpath, self.context)
def test_hidden(self): def test_hidden(self):
self.context['hidden'] = True self.context['hidden'] = True
...@@ -542,7 +541,7 @@ class TextlineTemplateTest(TemplateTestCase): ...@@ -542,7 +541,7 @@ class TextlineTemplateTest(TemplateTestCase):
Test that correct description information is set on desired elements. Test that correct description information is set on desired elements.
""" """
xpaths = ['//input/@aria-describedby'] xpaths = ['//input/@aria-describedby']
self.assert_description(xpaths, descriptions=False) self.assert_description(xpaths)
self.assert_describedby_attribute(xpaths) self.assert_describedby_attribute(xpaths)
......
...@@ -2,38 +2,26 @@ ...@@ -2,38 +2,26 @@
metadata: metadata:
display_name: Text Input display_name: Text Input
markdown: | markdown: |
In text input problems, also known as "fill-in-the-blank" problems, learners enter text into a response field. The text can include letters and characters such as punctuation marks. The text that the learner enters must match your specified answer text exactly. You can specify more than one correct answer. Learners must enter a response that matches one of the correct answers exactly. You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with
hints and feedback problems. Edit this component to replace this template with your own assessment.
When you add the problem, be sure to select Settings to specify a Display Name and other values that apply. >>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related
to the prompt like this. <<
You can use the following example problem as a model. = the correct answer {{You can specify optional feedback like this, which appears after this answer is submitted.}}
or= optional acceptable variant of the correct answer
>>What was the first post-secondary school in China to allow both male and female students?||Be sure to check your spelling.<< not= optional incorrect answer such as a frequent misconception {{You can specify optional feedback for none, a subset, or all of the answers.}}
= Nanjing Higher Normal Institute
or= National Central University
or= Nanjing University
[explanation]
Nanjing Higher Normal Institute first admitted female students in 1920.
[explanation]
data: | data: |
<problem> <problem>
<stringresponse answer="Nanjing Higher Normal Institute" type="ci"> <stringresponse answer="the correct answer" type="ci">
<p>In text input problems, also known as "fill-in-the-blank" problems, learners enter text into a response field. The text that the learner enters must match your specified answer text exactly. You can specify more than one correct answer. Learners must enter a response that matches one of the correct answers exactly.</p> <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with</p>
<p>When you add the problem, be sure to select <strong>Settings</strong> to specify a <strong>Display Name</strong> and other values that apply.</p> <p>hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
<p>You can use the following example problem as a model.</p> <label>Add the question text, or prompt, here. This text is required.</label>
<label>What was the first post-secondary school in China to allow both male and female students?</label> <description>You can add an optional tip or note related to the prompt like this.</description>
<description>Be sure to check your spelling.</description> <correcthint>You can specify optional feedback like this, which appears after this answer is submitted.</correcthint>
<additional_answer>National Central University</additional_answer> <additional_answer answer="optional acceptable variant of the correct answer"/>
<additional_answer>Nanjing University</additional_answer> <stringequalhint answer="optional incorrect answer such as a frequent misconception">You can specify optional feedback for none, a subset, or all of the answers.</stringequalhint>
<textline size="40"/> <textline size="20"/>
<solution>
<div class="detailed-solution">
<p>Explanation</p>
<p>Nanjing Higher Normal Institute first admitted female students in 1920.</p>
</div>
</solution>
</stringresponse> </stringresponse>
</problem> </problem>
...@@ -3,43 +3,35 @@ metadata: ...@@ -3,43 +3,35 @@ metadata:
display_name: Text Input with Hints and Feedback display_name: Text Input with Hints and Feedback
markdown: | markdown: |
You can provide feedback for the correct answer in text input problems, as well as for specific incorrect answers. You can use this template as a guide to the simple editor markdown and OLX markup to use for text
input with hints and feedback problems. Edit this component to replace this template with your
own assessment.
Use feedback on expected incorrect answers to address common misconceptions and to provide guidance on how to arrive at the correct answer. >>Add the question text, or prompt, here. This text is required.||You can add an optional tip or
note related to the prompt like this. <<
Be sure to select Settings to specify a Display Name and other values that apply. = the correct answer {{You can specify optional feedback like this, which appears after this answer is submitted.}}
or= optional acceptable variant of the correct answer
not= optional incorrect answer such as a frequent misconception {{You can specify optional feedback for none, a subset, or all of the answers.}}
Use the following example problem as a model. ||You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.||
||If you add more than one hint, a different hint appears each time learners select the hint button.||
>>Which U.S. state has the largest land area?||Be sure to check your spelling.<<
=Alaska {{Alaska is 576,400 square miles, more than double the land area
of the second largest state, Texas.}}
not=Texas {{While many people think Texas is the largest state, it is actually the second largest, with 261,797 square miles.}}
not=California {{California is the third largest state, with 155,959 square miles.}}
||Consider the square miles, not population.||
||Consider all 50 states, not just the continental United States.||
hinted: true hinted: true
data: | data: |
<problem> <problem>
<stringresponse answer="Alaska" type="ci"> <stringresponse answer="the correct answer" type="ci">
<p>You can provide feedback for the correct answer in text input problems, as well as for specific incorrect answers.</p> <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with</p>
<p>Use feedback on expected incorrect answers to address common misconceptions and to provide guidance on how to arrive at the correct answer.</p> <p>hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
<p>Be sure to select Settings to specify a Display Name and other values that apply.</p> <label>Add the question text, or prompt, here. This text is required.</label>
<p>Use the following example problem as a model.</p> <description>You can add an optional tip or note related to the prompt like this.</description>
<label>Which U.S. state has the largest land area?</label> <correcthint>You can specify optional feedback like this, which appears after this answer is submitted.</correcthint>
<description>Be sure to check your spelling.</description> <additional_answer answer="optional acceptable variant of the correct answer"/>
<correcthint>Alaska is 576,400 square miles, more than double the land area of the second largest state, Texas.</correcthint> <stringequalhint answer="optional incorrect answer such as a frequent misconception">You can specify optional feedback for none, a subset, or all of the answers.</stringequalhint>
<stringequalhint answer="Texas">While many people think Texas is the largest state, it is actually the second largest, with 261,797 square miles.</stringequalhint>
<stringequalhint answer="California">California is the third largest state, with 155,959 square miles.</stringequalhint>
<textline size="20"/> <textline size="20"/>
</stringresponse> </stringresponse>
<demandhint> <demandhint>
<hint>Consider the square miles, not population.</hint> <hint>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</hint>
<hint>Consider all 50 states, not just the continental United States.</hint> <hint>If you add more than one hint, a different hint appears each time learners select the hint button.</hint>
</demandhint> </demandhint>
</problem> </problem>
...@@ -459,9 +459,29 @@ class ProblemQuestionDescriptionTest(ProblemsTest): ...@@ -459,9 +459,29 @@ class ProblemQuestionDescriptionTest(ProblemsTest):
self.assertEqual(problem_page.problem_question_descriptions, self.descriptions) self.assertEqual(problem_page.problem_question_descriptions, self.descriptions)
class CAPAProblemA11yBaseTestMixin(object):
"""Base TestCase Class to verify CAPA problem accessibility."""
def test_a11y(self):
"""
Verifies that there are no accessibility issues for a particular problem type
"""
self.courseware_page.visit()
problem_page = ProblemPage(self.browser)
# Set the scope to the problem question
problem_page.a11y_audit.config.set_scope(
include=['section.wrapper-problem-response']
)
# Run the accessibility audit.
problem_page.a11y_audit.check_for_accessibility_errors()
@attr('a11y') @attr('a11y')
class CAPAProblemQuestionDescriptionA11yTest(ProblemsTest): class CAPAProblemChoiceA11yTest(CAPAProblemA11yBaseTestMixin, ProblemsTest):
"""TestCase Class to verify CAPA problem questions accessibility.""" """TestCase Class to verify accessibility for checkboxes and multiplechoice CAPA problems."""
def get_problem(self): def get_problem(self):
""" """
Problem structure. Problem structure.
...@@ -490,20 +510,28 @@ class CAPAProblemQuestionDescriptionA11yTest(ProblemsTest): ...@@ -490,20 +510,28 @@ class CAPAProblemQuestionDescriptionA11yTest(ProblemsTest):
""") """)
return XBlockFixtureDesc('problem', 'Problem A11Y TEST', data=xml) return XBlockFixtureDesc('problem', 'Problem A11Y TEST', data=xml)
def test_a11y(self):
"""
Scenario: Verifies that each question and description has unique id.
Given I am enrolled in a course.
And I visit a unit page with two CAPA problems
Then I check question and description has unique IDs
"""
self.courseware_page.visit()
problem_page = ProblemPage(self.browser)
# Set the scope to the problem question @attr('a11y')
problem_page.a11y_audit.config.set_scope( class ProblemTextInputA11yTest(CAPAProblemA11yBaseTestMixin, ProblemsTest):
include=['section.wrapper-problem-response'] """TestCase Class to verify TextInput problem accessibility."""
)
# Run the accessibility audit. def get_problem(self):
problem_page.a11y_audit.check_for_accessibility_errors() """
TextInput problem XML.
"""
xml = dedent("""
<problem>
<stringresponse answer="fight" type="ci">
<label>who wishes to _____ must first count the cost.</label>
<description>Appear weak when you are strong, and strong when you are weak.</description>
<description>In the midst of chaos, there is also opportunity.</description>
<textline size="40"/>
</stringresponse>
<stringresponse answer="force" type="ci">
<label>A leader leads by example not by _____.</label>
<description>The supreme art of war is to subdue the enemy without fighting.</description>
<description>Great results, can be achieved with small forces.</description>
<textline size="40"/>
</stringresponse>
</problem>""")
return XBlockFixtureDesc('problem', 'TEXTINPUT PROBLEM', data=xml)
...@@ -505,12 +505,6 @@ class StringProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin): ...@@ -505,12 +505,6 @@ class StringProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin):
Additional setup for StringProblemTypeTest Additional setup for StringProblemTypeTest
""" """
super(StringProblemTypeTest, self).setUp(*args, **kwargs) super(StringProblemTypeTest, self).setUp(*args, **kwargs)
self.problem_page.a11y_audit.config.set_rules({
'ignore': [
'section', # TODO: AC-491
'label', # TODO: AC-290
]
})
def answer_problem(self, correct): def answer_problem(self, correct):
""" """
......
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