attributes label screen reader issue

[BatteryTrader]

Hi

May have caught something in

tpl_pi_options_attributes_upd.php

which I now have an override copy in
templates/override/modules/pi/product_info

I was getting an error in Lighthouse in accessibility on pages that had attributes on them, the for label not being readable by off screen readers etc.

But in the end I think that it just was not formatted correctly,

its was showing as <label for>Easy Upgrade</label>

I think it should show as <label for="18">Easy Upgrade</label>
ie <label for="Easy Upgrade">Easy Upgrade</label>


on line 14 of tpl_pi_options_attributes_upd.php
I edited the line (original line now below it), I assume a typo using input_id instead of option id

Code: Select all

       echo '<label for="' . $option['id'] . '">', $option['name'], '</label>';
   //  echo '<label for="', $input_id ?? NULL , '">', $option['name'], '</label>';

I have done a few tests, and it seems to be ok now.

Would appreciate it if anyone could tell me I was wrong and it's going to cause another issue.

Regards

[burt]

I am currently looking at Source Code of product page in a test installation here:

Code: Select all

<div class="col-sm-12 mb-2 pi-options-attributes">
  <p class="fs-6 fw-semibold mb-1">Available Options</p>

  <div class="form-floating mb-2">
    <select name="id[1]" id="input_1" class="form-select" required aria-required="true">
      <option value="" selected="selected">--- Please Select ---</option>
      <option value="1">12</option>
      <option value="2">24 (+$4.99)</option>
    </select>
    <label for="input_1">Box Size</label>
  </div>
</div>

This looks correct. Select ID is "input_1", Label is for "input_1".

--

I do not know what this file tpl_pi_options_attributes_upd.php is.

From an Addon?
Home Brewed?

[BatteryTrader]

Me, home brewed, Nah.

Looks like it's an addon, sorry about that, didn't notice, please ignore the post.

* Name: OptionsPriceUpdate
* Version: 2.0

regards