Is it the file SpecialBotPassword.php, that the change should be made?

@amritsreekumar : Please feel free to elaborate what you have tried already and in which files, what the results were, and the potential problems you ran into. Also see our recommendations - thanks!

Well, I have tried making a couple of changes in the HTMLCheckMatrix.php, but I am not getting that correct orientation, as stated in the bug. I've also been checking out the various files linked to that particular page, but only the above file seem to be making any significant change in the orientation of the page.

@amritsreekumar the only change needed is in HTMLCheckMatrix.php; you would need to modify some of the for loops. I actually created a patch, but then realized you are working on it, so I will let you finish the work.

Thank you! I will submit the patch at the earliest.

I'm not convinced this is the right solution. The check matrix on Special:Preferences for Echo configuration looks fine, and I'm not sure if it would still be intuitive if flipped around:

On Special:BotPasswords, after removing the width: 100%; CSS rule for the table:

I feel this looks mostly okay with this change. Maybe we should just do this?

(Why does BotPasswords use a checkmatrix, anyway, if it only uses one column of checkboxes?)

Well, I agree with you that using a CheckMatrix is the wrong choice.

That being said, we should at least give users an option whether they want the checkboxes on the left or the right side.

@amritsreekumar I think to @matmarex's point, we should replace the checkmatrix with a set of checkboxes. Let me know if it is too confusing to you.

Change 320369 had a related patch set uploaded (by Amritsreekumar):
Change Checkboxes from right to left of Labels

https://gerrit.wikimedia.org/r/320369

Change 320369 abandoned by Amritsreekumar:
Change Checkboxes from right to left of Labels

Reason:
Abandoning due to some errors, will try fixing it.

https://gerrit.wikimedia.org/r/320369

In T150079#2777795, @matmarex wrote:

(Why does BotPasswords use a checkmatrix, anyway, if it only uses one column of checkboxes?)

To match the interface used by the OAuth extension for the equivalent screen. See for example Special:OAuthConsumerRegistration/propose. As for why that used checkmatrix, you'd have to ask @aaron.

In T150079#2778612, @Huji wrote:

@amritsreekumar I think to @matmarex's point, we should replace the checkmatrix with a set of checkboxes.

A multiselect (HTMLMultiSelectField) would likely be better than a bunch of individual checkboxes. The Gadgets tab in Special:Preferences is an example of this widget; note the entire tab is only two widgets, one 'info' with the text of MediaWiki:Gadgets-prefstext and one 'multiselect' with everything else.

Change 320411 had a related patch set uploaded (by Amritsreekumar):
Change Checkboxes from right to left of Labels

https://gerrit.wikimedia.org/r/320411

@matmarex Please do suggest the changes that could be made to this patch.

Change 320411 abandoned by Amritsreekumar:
Change Checkboxes from right to left of Labels

https://gerrit.wikimedia.org/r/320411

Change 325778 had a related patch set uploaded (by Huji):
Checkboxes on Special:BotPasswords should be shown on the left the label

https://gerrit.wikimedia.org/r/325778

Huji, I'd like to propose a different approach than turning the element sequence around.
I think, that it's important in a this matrix layout to first see the description and then the checkbox. So I'd rather argument against turning it around. I fully understand the orientation problem of users with the current layout.
My first patch set just cares about the visual cue, but there are more shortcomings semantically in the current table, that exclude assistive technology users from using the matrix.
For those it should feature clearly table headers as well. And then there is the concern of responsiveness for mobile usage.

Change 327849 had a related patch set uploaded (by VolkerE):
Improve visual association of elements in OOjs UI HTMLForm matrix

https://gerrit.wikimedia.org/r/327849

Volker_E: I think what you are attempting to do is important, but not for this task. The general layout of Matrix should be improved; you can open a task for it and attribute the patch to that.

But for BotPasswords, using a Matrix is actually not a good idea; a Matrix is intended for when you have multiple choices for each row, and that doesn't apply here. So I think for BotPasswords, it is best if we move away from Matrix altogether.

@Huji I was thinking the same in the beginning. But then there are two outcomes, the above merged T152532 should be unbundled again and my patch would be caring about it.
Second, it helps to involve UX people in attempting to improve: UX. Would you share a screenshot of your current attempt in the patch?

To unmark T152532 as duplicate is not a big deal. In fact, perhaps that is exactly what you should do. Completely ignore BotPasswords for now. Your point is valid in general: CheckMatrix needs to be visually improved, whether or not it is used by BotPasswords.

Let's continue the discussion there.

@Volker_E and here is a screenshot:

IMO this can be declined: T152532 should be fixed anyway, and once it's fixed, there is no reason to do this.

If you keep it, please rename to make sure OAuth grant lists are in scope; the two interfaces should look similar.

@Tgr well if T152532 is fixed, we can "ignore" this. It won't be fixed, but it won't be broken either :)

That being said, since this has already led to finding new bugs, and CheckMatrix is truly not the right choice for this anyway, I will continue working on it (perhaps not as vigorously)

Change 327849 had a related patch set uploaded (by VolkerE):
Improve visual association of elements in OOjs UI HTMLForm matrix

https://gerrit.wikimedia.org/r/327849

^As stated on the patch, I've continued to work on my local patch and didn't update the bug correctly. Fixed in the meantime!

@matmarex it does have a patch for review: https://gerrit.wikimedia.org/r/#/c/325778/

@Huji what is your take here? What's still missing from your point of view?

@Volker_E the status is that @matmarex has requested the current "tooltips" to be somehow displayed in the new layout, but HTMLMultiSelect does not support any tooltips, so we need to add that feature upstream in OOjs-UI first, and that requires quiet a bit of bandwidth which I have not had so far.

In T150079#3464428, @Huji wrote:

… the current "tooltips" to be somehow displayed in the new layout, but HTMLMultiSelect does not support any tooltips, so we need to add that feature upstream in OOjs-UI first…

Is there a phab task for this? Could you please create/link to it?

I think this is: T123994: HTMLForm's checkmatrix control doesn't support parsed text in its jquery.tipsy tooltips.

In T150079#3464662, @Prtksxna wrote:

In T150079#3464428, @Huji wrote:

… the current "tooltips" to be somehow displayed in the new layout, but HTMLMultiSelect does not support any tooltips, so we need to add that feature upstream in OOjs-UI first…

Is there a phab task for this? Could you please create/link to it?

Yes. It is already linked above: T168724

In T150079#3466163, @Huji wrote:

Yes. It is already linked above: T168724

Sorry I missed it. Thanks @Huji!

Change 421469 had a related patch set uploaded (by Huji; owner: Huji):
[oojs/ui@master] Support tooltips for each CheckBox in a CheckboxMultiSelect

https://gerrit.wikimedia.org/r/421469

@Volker_E we have a fundamental problem here.

On the PHP side, a CheckboxMultiSelectInputWidget consists of *multiple* FieldLayout elements each containing a single check box (and that is why I can create a separate help tooltip for each check box):

<div class="oo-ui-fieldLayout-field">
  <div aria-disabled="false" id="ooui-php-229" class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxMultiselectInputWidget" data-ooui="...">
    <div class="oo-ui-layout oo-ui-labelElement oo-ui-fieldLayout oo-ui-fieldLayout-align-inline">
      <div class="oo-ui-fieldLayout-body">
        <span class="oo-ui-fieldLayout-field">
          <span aria-disabled="false" class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget">
            <input tabindex="0" aria-disabled="false" value="cat" id="ooui-php-50" checked="checked" class="oo-ui-inputWidget-input" type="checkbox">
            <span></span>
          </span>
        </span>
        <span class="oo-ui-fieldLayout-header">
          <label for="ooui-php-50" class="oo-ui-labelElement-label">Cat</label>
        </span>
      </div>
    </div>
    <div class="oo-ui-layout oo-ui-labelElement oo-ui-fieldLayout oo-ui-fieldLayout-align-inline">
      <div class="oo-ui-fieldLayout-body">
        <span class="oo-ui-fieldLayout-field">
          <span aria-disabled="false" class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget">
            <input tabindex="0" aria-disabled="false" value="goldfish" id="ooui-php-51" class="oo-ui-inputWidget-input" type="checkbox">
            <span></span>
          </span>
        </span>
        <span class="oo-ui-fieldLayout-header">
          <span aria-disabled="false" class="oo-ui-fieldLayout-help oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-frameless oo-ui-iconElement oo-ui-buttonWidget">
            <a role="button" title="A type of fish" tabindex="0" aria-disabled="false" rel="nofollow" class="oo-ui-buttonElement-button">
              <span class="oo-ui-iconElement-icon oo-ui-icon-info"></span>
              <span class="oo-ui-labelElement-label"></span>
              <span class="oo-ui-indicatorElement-indicator"></span>
            </a>
          </span>
          <label for="ooui-php-51" class="oo-ui-labelElement-label">Goldfish</label>
        </span>
      </div>
    </div>
  </div>
</div>

But on the JS side, there is only *one* FieldLayout element for the whole CheckboxMultiSelectInputWidget

<div class="oo-ui-fieldLayout-field">
  <div class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxMultiselectInputWidget" aria-disabled="false">
    <div class="oo-ui-widget oo-ui-widget-enabled oo-ui-multiselectWidget oo-ui-checkboxMultiselectWidget" aria-disabled="false">
      <div class="oo-ui-multiselectWidget-group">
        <label class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-multioptionWidget oo-ui-checkboxMultioptionWidget oo-ui-multioptionWidget-selected" aria-disabled="false">
          <span class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget" aria-disabled="false">
            <input tabindex="0" aria-disabled="false" class="oo-ui-inputWidget-input" value="cat" checked="" type="checkbox">
            <span></span>
          </span>
          <span class="oo-ui-labelElement-label">Cat</span>
        </label>
        <label class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-multioptionWidget oo-ui-checkboxMultioptionWidget" aria-disabled="false">
          <span class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget" aria-disabled="false">
            <input tabindex="0" aria-disabled="false" class="oo-ui-inputWidget-input" value="goldfish" type="checkbox">
            <span></span>
          </span>
          <span class="oo-ui-labelElement-label">Goldfish.</span>
        </label>
      </div>
    </div>
  </div>
</div>

Change 421469 abandoned by Huji:

[oojs/ui@master] Support tooltips for each CheckBox in a CheckboxMultiSelect

Reason:

T150079 was closed as Declined

https://gerrit.wikimedia.org/r/421469

Change 325778 abandoned by Huji:

[mediawiki/core@master] Checkboxes on Special:BotPasswords should be shown on the left the label

Reason:

T150079 was closed as Declined

https://gerrit.wikimedia.org/r/325778