make the module name label visible

fixes LF-668
flag=none
qa risk: low

test plan:
-go to a modules page
-click the add module button
>confirm the name field has a visible label
>confirm there is no asterisk visible at the end
 of the label
-now edit a module
>confirm the name field on the edit modal also
 has a visible label
>again confirm there is no visible asterisk

Change-Id: I2b139d70ac9f12d5c81f0542bcec6cd75473f369
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/326667
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jackson Howe <jackson.howe@instructure.com>
QA-Review: Jackson Howe <jackson.howe@instructure.com>
Product-Review: Jake Oeding <jake.oeding@instructure.com>
This commit is contained in:
jake.oeding 2023-08-31 10:59:03 -04:00 committed by Jake Oeding
parent fe52f62dae
commit 73b78efb00
2 changed files with 6 additions and 5 deletions

View File

@ -20,7 +20,7 @@
<div class="form-dialog-content">
<div class="ic-Form-control form-element">
<div class="module_name form-element">
<label class="screenreader-only" for="context_module_name"><%= t('Module Name') %></label>
<label for="context_module_name"><%= t('Module Name') %></label>
<%= f.text_field :name, :placeholder => t('Module Name'), :id => 'context_module_name', :class => 'ic-Input' %>
</div>
@ -32,10 +32,10 @@
</label>
</div>
<div class="unlock_module_at_details form-element">
<label class='screenreader-only' id='unlock_at_date_label'>
<%= t("Unlock module on date") %>
<%= datepicker_screenreader_prompt %>
</label>
<label class='screenreader-only' id='unlock_at_date_label'>
<%= t("Unlock module on date") %>
<%= datepicker_screenreader_prompt %>
</label>
<%= f.text_field :unlock_at,
class: "datetime_field",
'aria-labelledby' => 'unlock_at_date_label',

View File

@ -467,6 +467,7 @@ window.modules = (function () {
$module.fadeIn('fast', () => {})
$module.addClass('dont_remove')
$form.find('.module_name').toggleClass('lonely_entry', isNew)
$form.find('.module_name label span').hide() // hide the asterisk in the form label
const $toFocus = $('.ig-header-admin .al-trigger', $module)
const fullSizeModal = window.matchMedia('(min-width: 600px)').matches
const responsiveWidth = fullSizeModal ? 600 : 320