Commit a44c3c87 by Ehtesham Committed by muhammad-ammar

make CAPA dropdown problems accessible

parent 6dd3db74
...@@ -35,8 +35,8 @@ class TemplateTests(ModuleStoreTestCase): ...@@ -35,8 +35,8 @@ class TemplateTests(ModuleStoreTestCase):
self.assertIsNotNone(dropdown) self.assertIsNotNone(dropdown)
self.assertIn('markdown', dropdown['metadata']) self.assertIn('markdown', dropdown['metadata'])
self.assertIn('data', dropdown) self.assertIn('data', dropdown)
self.assertRegexpMatches(dropdown['metadata']['markdown'], r'^Dropdown.*') self.assertRegexpMatches(dropdown['metadata']['markdown'], r'.*dropdown problems.*')
self.assertRegexpMatches(dropdown['data'], r'<problem>\s*<optionresponse>\s*<p>Dropdown.*') self.assertRegexpMatches(dropdown['data'], r'<problem>\s*<optionresponse>\s*<p>.*dropdown problems.*')
def test_get_some_templates(self): def test_get_some_templates(self):
self.assertEqual(len(SequenceDescriptor.templates()), 0) self.assertEqual(len(SequenceDescriptor.templates()), 0)
......
<% doinline = "inline" if inline else "" %> <% doinline = "inline" if inline else "" %>
<form class="inputtype option-input ${doinline}"> <form class="inputtype option-input ${doinline}">
<select name="input_${id}" id="input_${id}" aria-label="${response_data['label']}" ${describedby}> <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
<select name="input_${id}" id="input_${id}" ${describedby}>
<option value="option_${id}_dummy_default"> </option> <option value="option_${id}_dummy_default"> </option>
% for option_id, option_description in options: % for option_id, option_description in options:
<option value="${option_id}" <option value="${option_id}"
% if (option_id==value or option_id==answervariable): % if (option_id == value or option_id == answervariable):
selected="true" selected="true"
% endif % endif
> ${option_description}</option> > ${option_description}</option>
...@@ -23,5 +31,4 @@ ...@@ -23,5 +31,4 @@
% if msg: % if msg:
<span class="message">${msg|n}</span> <span class="message">${msg|n}</span>
% endif % endif
</form> </form>
...@@ -813,15 +813,15 @@ class OptionInputTemplateTest(TemplateTestCase): ...@@ -813,15 +813,15 @@ class OptionInputTemplateTest(TemplateTestCase):
def test_label(self): def test_label(self):
xml = self.render_to_xml(self.context) xml = self.render_to_xml(self.context)
xpath = "//select[@aria-label='%s']" % self.context['response_data']['label'] xpath = "//label[@class='problem-group-label']"
self.assert_has_xpath(xml, xpath, self.context) self.assert_has_xpath(xml, xpath, self.RESPONSE_DATA['label'])
def test_description(self): def test_description(self):
""" """
Test that correct description information is set on desired elements. Test that correct description information is set on desired elements.
""" """
xpaths = ['//select/@aria-describedby'] xpaths = ['//select/@aria-describedby']
self.assert_description(xpaths, descriptions=False) self.assert_description(xpaths)
self.assert_describedby_attribute(xpaths) self.assert_describedby_attribute(xpaths)
......
...@@ -156,6 +156,13 @@ div.problem { ...@@ -156,6 +156,13 @@ div.problem {
.question-description { .question-description {
@include margin(($baseline*0.75), 0); @include margin(($baseline*0.75), 0);
} }
form > label {
display: block;
margin-bottom: $baseline;
font: inherit;
color: inherit;
}
} }
// Choice Group - silent class // Choice Group - silent class
......
...@@ -2,33 +2,23 @@ ...@@ -2,33 +2,23 @@
metadata: metadata:
display_name: Dropdown display_name: Dropdown
markdown: | markdown: |
Dropdown problems allow learners to select only one option from a list of options. You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown problems. Edit this component to replace this template with your own assessment.
>>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. <<
When you add the problem, be sure to select Settings to specify a Display Name and other values that apply. [[
an incorrect answer
You can use the following example problem as a model. (the correct answer)
an incorrect answer
>>Which of the following countries celebrates its independence on August 15?||You can select only one option.<< ]]
[[(India), Spain, China, Bermuda]]
[explanation]
India became an independent nation on August 15, 1947.
[explanation]
data: | data: |
<problem> <problem>
<optionresponse> <optionresponse>
<p>Dropdown problems allow learners to select only one option from a list of options.</p> <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown problems. Edit this component to replace this template with your own assessment.</p>
<p>When you add the problem, 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>You can 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 of the following countries celebrates its independence on August 15?</label> <optioninput>
<description>You can select only one option.</description> <option correct="False">an incorrect answer</option>
<optioninput options="('India','Spain','China','Bermuda')" correct="India"/> <option correct="True">the correct answer</option>
<solution> <option correct="False">an incorrect answer</option>
<div class="detailed-solution"> </optioninput>
<p>Explanation</p>
<p>India became an independent nation on August 15, 1947.</p>
</div>
</solution>
</optionresponse> </optionresponse>
</problem> </problem>
...@@ -2,55 +2,34 @@ ...@@ -2,55 +2,34 @@
metadata: metadata:
display_name: Dropdown with Hints and Feedback display_name: Dropdown with Hints and Feedback
markdown: | markdown: |
You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown with hints and feedback problems. Edit this component to replace this template with your own assessment.
You can provide feedback for each available option in a dropdown problem. >>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 also add hints for learners.
Be sure to select Settings to specify a Display Name and other values that apply.
Use the following example problem as a model.
>> A/an ________ is a vegetable.||You can select only one option.<<
[[ [[
apple {{An apple is the fertilized ovary that comes from an apple tree and contains seeds, meaning it is a fruit.}} an incorrect answer {{You can specify optional feedback like this, which appears after this answer is submitted.}}
pumpkin {{A pumpkin is the fertilized ovary of a squash plant and contains seeds, meaning it is a fruit.}} (the correct answer)
(potato) {{A potato is an edible part of a plant in tuber form and is a vegetable.}} an incorrect answer {{You can specify optional feedback for none, a subset, or all of the answers.}}
tomato {{Many people mistakenly think a tomato is a vegetable. However, because a tomato is the fertilized ovary of a tomato plant and contains seeds, it is a fruit.}}
]] ]]
||A fruit is the fertilized ovary from a flower.|| ||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.||
||A fruit contains seeds of the plant.|| ||If you add more than one hint, a different hint appears each time learners select the hint button.||
hinted: true hinted: true
data: | data: |
<problem> <problem>
<optionresponse> <optionresponse>
<p>You can provide feedback for each available option in a dropdown problem.</p> <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
<p>You can also add hints for learners.</p> <label>Add the question text, or prompt, here. This text is required.</label>
<p>Be sure to select Settings to specify a Display Name and other values that apply.</p> <description>You can add an optional tip or note related to the prompt
<p>Use the following example problem as a model.</p> like this. </description>
<label>A/an ________ is a vegetable.</label>
<description>You can select only one option.</description>
<optioninput> <optioninput>
<option correct="False">apple <option correct="False">an incorrect answer <optionhint>You can specify optional feedback like this, which appears after this answer is submitted.</optionhint></option>
<optionhint>An apple is the fertilized ovary that comes from an apple tree and contains seeds, meaning it is a fruit.</optionhint> <option correct="True">the correct answer</option>
</option> <option correct="False">an incorrect answer <optionhint>You can specify optional feedback for none, a subset, or all of the answers.</optionhint></option>
<option correct="False">pumpkin
<optionhint>A pumpkin is the fertilized ovary of a squash plant and contains seeds, meaning it is a fruit.</optionhint>
</option>
<option correct="True">potato
<optionhint>A potato is an edible part of a plant in tuber form and is a vegetable.</optionhint>
</option>
<option correct="False">tomato
<optionhint>Many people mistakenly think a tomato is a vegetable. However, because a tomato is the fertilized ovary of a tomato plant and contains seeds, it is a fruit.</optionhint>
</option>
</optioninput> </optioninput>
</optionresponse> </optionresponse>
<demandhint> <demandhint>
<hint>A fruit is the fertilized ovary from a flower.</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>A fruit contains seeds of the plant.</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>
...@@ -535,3 +535,29 @@ class ProblemTextInputA11yTest(CAPAProblemA11yBaseTestMixin, ProblemsTest): ...@@ -535,3 +535,29 @@ class ProblemTextInputA11yTest(CAPAProblemA11yBaseTestMixin, ProblemsTest):
</stringresponse> </stringresponse>
</problem>""") </problem>""")
return XBlockFixtureDesc('problem', 'TEXTINPUT PROBLEM', data=xml) return XBlockFixtureDesc('problem', 'TEXTINPUT PROBLEM', data=xml)
@attr('a11y')
class CAPAProblemDropDownA11yTest(CAPAProblemA11yBaseTestMixin, ProblemsTest):
"""TestCase Class to verify accessibility for dropdowns(optioninput) CAPA problems."""
def get_problem(self):
"""
Problem structure.
"""
xml = dedent("""
<problem>
<optionresponse>
<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for
dropdown problems. Edit this component to replace this template with your own assessment.</p>
<label>Which of the following is a fruit</label>
<description>Choose wisely</description>
<optioninput>
<option correct="False">radish</option>
<option correct="True">appple</option>
<option correct="False">carrot</option>
</optioninput>
</optionresponse>
</problem>
""")
return XBlockFixtureDesc('problem', 'Problem A11Y TEST', data=xml)
...@@ -462,12 +462,6 @@ class DropDownProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin): ...@@ -462,12 +462,6 @@ class DropDownProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin):
Additional setup for DropDownProblemTypeTest Additional setup for DropDownProblemTypeTest
""" """
super(DropDownProblemTypeTest, self).setUp(*args, **kwargs) super(DropDownProblemTypeTest, self).setUp(*args, **kwargs)
self.problem_page.a11y_audit.config.set_rules({
'ignore': [
'section', # TODO: AC-491
'label', # TODO: AC-291
]
})
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