PRO is outputting some elements with the tabindex attribute without giving any value to it, resulting in invalid HTML

[diegocanal]

Hello,

Some elements like the “Search” element (all its variants: inline, dropdown and modal) are being output with the attribute tabindex empty (without a given value), for example:
<input id="s-e6-7" class="x-search-input" type="search" name="s" tabindex="" placeholder="Search" >

All the HTML specifications (HTML Living Standard, HTML 5.1, HTML 5.0 and HTML 4.01) state that:

“The tabindex attribute, if specified, must have a value that is a valid integer.”

So when the theme is outputting some of these elements with the tabindex attribute but without giving a value to it, it is outputting invalid HTML.

In this case the search elements are being built by /pro/cornerstone/includes/views/partials/search.php, as you can see the theme is adding the tabindex attribute:

$atts_search_submit = array(
  'class'                => 'x-search-btn x-search-btn-submit',
  'type'                 => 'button',
  'data-x-search-submit' => '',
  'tabindex'             => ''
);

$atts_search_input = array(
  'id'       => 's-' . $mod_id,
  'class'    => 'x-search-input',
  'type'     => 'search',
  'name'     => 's',
  'tabindex' => ''
);

if ( ! empty( $search_placeholder ) ) {
  $atts_search_input['placeholder'] = $search_placeholder;
}

$atts_search_clear = array(
  'class'               => 'x-search-btn x-search-btn-clear',
  'type'                => 'button',
  'data-x-search-clear' => '',
  'tabindex'            => ''
);

Thanks!

Regards
Diego

[rad]

Hi @CYME,

Thanks for reaching out.

The blank tabindex is equivalent to false which is the same as -1 in coding logic. But I can verify that it has no value. I’ll add this to our issue tracker.

Thanks!

[diegocanal]

Hi @Rad,

Thanks for responding so promptly.

I don’t think the coding logic is aplicable to this situation. HTML is more a markup than a programming language and generally it doesn’t follow the coding logic. The spec is clear, the tabindex attribute must be given an integer value and it cannot be blank.

Nevertheless, in the case you were right then it would be even worse, as a tabindex="-1" would mean that those html elements that constitute the search PRO element (the input field, search button and clear button) would not be accesible through the keyboard (normally using the TAB key), causing a negative impact on the web accessibility for the mobility impaired people. The HTML spec says:

…negative numbers indicate that the control is to be unreachable by sequential focus navigation.

Here you have some spec references in case you want to take a look:

• tabindex - HTML: HyperText Markup Language | MDN
• HTML Living Standard The definition of ‘tabindex’ in that specification.
• HTML 5.1 The definition of ‘tabindex’ in that specification.
• HTML5 The definition of ‘tabindex’ in that specification.
• HTML 4.01 Specification The definition of ‘tabindex’ in that specification.

Thanks!

PS: In fact, doing some direct testing on a web page I can see that those input and buttons are reachable by sequential focus navigation.

[Prasant]

Hello @CYME,

Thanks for updating the thread.

I checked our issue tracker and can see that my colleague @Rad has added into our internal issue tracker for our developers to take a look. As of now I can’t share ETA on the same but you can take a look at changelog page for latest product announcements.

https://theme.co/changelog/

Thanks.

[diegocanal]

Thanks @Prasant!

[nabeel]

You’re welcome!