Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Disable editing for media type questions with uploads #4725

Merged
merged 6 commits into from Nov 14, 2023
Merged

Disable editing for media type questions with uploads #4725

Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3bc7d1c
making questions that support uploads non-editable
RuthShryock Nov 11, 2023
07555f9
Merge branch 'beta' of github.com:kobotoolbox/kpi into block-edit-med…
RuthShryock Nov 11, 2023
8778d12
adding better name
RuthShryock Nov 11, 2023
bbcbe52
updating name and chaning disabled attribute
RuthShryock Nov 14, 2023
f5f1318
Merge branch 'beta' of github.com:kobotoolbox/kpi into block-edit-med…
RuthShryock Nov 14, 2023
f5d9377
adding event handler
RuthShryock Nov 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 8 additions & 1 deletion jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
View file
Open in desktop
Expand Up @@ -212,6 +212,12 @@ class BulkEditSubmissionsForm extends React.Component {
}
}

disableEdit(questionType) {
LMNTL marked this conversation as resolved.
Show resolved Hide resolved
return ['audio', 'background-audio', 'video', 'image', 'file'].includes(
questionType
);
}

renderRow(questionData, itemIndex) {
let question = questionData;
if (typeof questionData.refIndex !== 'undefined') {
Expand Down Expand Up @@ -253,8 +259,9 @@ class BulkEditSubmissionsForm extends React.Component {

<bem.SimpleTable__cell>
<bem.KoboTextButton
m='blue'
m={this.disableEdit(question.type) ? 'grey' : 'blue'}
onClick={this.selectQuestion.bind(this, question)}
disabled={this.disableEdit(question.type)}
Copy link
Contributor

@LMNTL LMNTL Nov 14, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's preferable to avoid using the disabled attribute on buttons, since it hides information from screen readers and removes the button from the tab order. (The first part of this article outlines a bit of the dilemma.) You can check out this PR for an example with the <Button> component.

I think you'd only need to take two steps to make that change:

  • Use aria-disabled instead of disabled
  • In the onClick handler function (selectQuestion), don't do anything if this.disableEdit is true

See this internal thread for additional details.

>
{t('Edit')}
</bem.KoboTextButton>
Expand Down