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.

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

Latest/Bug: popup button missing role attribute / aria-owns missing "-popup" postfix #6117

Closed
frequent opened this Issue Jul 1, 2013 · 2 comments

Comments

Projects
None yet
2 participants
@frequent
Contributor

frequent commented Jul 1, 2013

Working with latest (Sun Jun 23 2013), when creating a button that should open a popup

  • the button markup is missing role="button"
  • the generated aria-owns="#sorting_menu" tag is missing the -popup postfix (as the popup will have id="sorting_menu-popup" set

Both produce errors in W3C validation.

Here is the code I used.

    <a href="#sorting_menu" data-role="button" data-rel="popup" data-icon="info" data-iconpos="notext">Sort Results</a>
    <div data-role="popup" id="sorting_menu">
      <label for="sorting_options">Sort by</label>
      <select class="sort_results" name="sorting_options" id="sorting_options">
        <option>Price Highgest</option>
        <option>Price Lowest</option>
      </select>
    </div>

Let me know if you need a test page.

@frequent

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Jul 3, 2013

Contributor

@uGoMobi

Here is a testpage: page

Errors in the validator:

  • Line 13, Column 246: Element a is missing one or more of the following attributes: role
  • Line 13, Column 246: The aria-owns attribute must point to an element in the same document.

And the code I paste into the W3C validator:

<!Doctype HTML>
<head><meta charset="UTF-8" /><title></title></head>
<body>

  <div style="min-height: 710px;" class="ui-page ui-page-theme-a ui-page-active" tabindex="0" data-url="test" id="test" data-role="page">
    <div aria-disabled="false" class="ui-header ui-bar-inherit" role="banner" data-role="header">
      <h1 aria-level="1" role="heading" class="ui-title">Test Page</h1>
    </div>
    <div role="main" class="ui-content" data-role="content">
      <p>Validating this page throws <i>Missing role</i> on the button element and <i>aria-owns needs to point
      to an element that exists</i> in the W3C Validator.
      </p>
      <a class="ui-btn ui-btn-icon-left ui-btn-inline ui-corner-all ui-icon-gears ui-link ui-shadow" aria-expanded="false" aria-owns="#foo" aria-haspopup="true" href="#foo" data-rel="popup" data-role="button" data-icon="gears" data-inline="true">Open popup</a>
      <div style="display: none;"><!-- placeholder for foo --></div>
    </div>
  <div id="foo-screen" class="ui-popup-screen ui-screen-hidden"></div><div id="foo-popup" class="ui-popup-container ui-popup-hidden"><div aria-disabled="false" class="ui-popup ui-body-a ui-overlay-shadow ui-corner-all" id="foo" data-role="popup" data-theme="a">
        <p>Hello World</p>
      </div></div></div>

<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span><h1>loading</h1></div>
</body>
</html>
Contributor

frequent commented Jul 3, 2013

@uGoMobi

Here is a testpage: page

Errors in the validator:

  • Line 13, Column 246: Element a is missing one or more of the following attributes: role
  • Line 13, Column 246: The aria-owns attribute must point to an element in the same document.

And the code I paste into the W3C validator:

<!Doctype HTML>
<head><meta charset="UTF-8" /><title></title></head>
<body>

  <div style="min-height: 710px;" class="ui-page ui-page-theme-a ui-page-active" tabindex="0" data-url="test" id="test" data-role="page">
    <div aria-disabled="false" class="ui-header ui-bar-inherit" role="banner" data-role="header">
      <h1 aria-level="1" role="heading" class="ui-title">Test Page</h1>
    </div>
    <div role="main" class="ui-content" data-role="content">
      <p>Validating this page throws <i>Missing role</i> on the button element and <i>aria-owns needs to point
      to an element that exists</i> in the W3C Validator.
      </p>
      <a class="ui-btn ui-btn-icon-left ui-btn-inline ui-corner-all ui-icon-gears ui-link ui-shadow" aria-expanded="false" aria-owns="#foo" aria-haspopup="true" href="#foo" data-rel="popup" data-role="button" data-icon="gears" data-inline="true">Open popup</a>
      <div style="display: none;"><!-- placeholder for foo --></div>
    </div>
  <div id="foo-screen" class="ui-popup-screen ui-screen-hidden"></div><div id="foo-popup" class="ui-popup-container ui-popup-hidden"><div aria-disabled="false" class="ui-popup ui-body-a ui-overlay-shadow ui-corner-all" id="foo" data-role="popup" data-theme="a">
        <p>Hello World</p>
      </div></div></div>

<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span><h1>loading</h1></div>
</body>
</html>
@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 4, 2013

Member

@frequent

Thanks!
The first error is a bug in the W3C validator: http://lists.w3.org/Archives/Public/www-validator-cvs/2013Apr/0038.html
The second one reveals a bug in jQM. The aria-owns ID reference should not have a hashtag.

Update: Although it shouldn't give an error, we still want to add role="button" (#4698)

Member

jaspermdegroot commented Jul 4, 2013

@frequent

Thanks!
The first error is a bug in the W3C validator: http://lists.w3.org/Archives/Public/www-validator-cvs/2013Apr/0038.html
The second one reveals a bug in jQM. The aria-owns ID reference should not have a hashtag.

Update: Although it shouldn't give an error, we still want to add role="button" (#4698)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment