Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

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

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

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

frequent opened this issue Jul 1, 2013 · 2 comments
Labels
Component: Popup Tag: Accessibility
Milestone
1.3.2

Comments

@frequent
Copy link
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
Copy link
Contributor Author

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
Copy link
Contributor

@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)

jaspermdegroot added a commit that referenced this issue Jul 4, 2013
@jaspermdegroot
Links: ID refs without hashtag for aria-owns attribute of links to po…
b75b313 
…pups. Fixes #6117.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Component: Popup Tag: Accessibility
Projects
None yet
Milestone
1.3.2
Development

No branches or pull requests
2 participants
@frequent @jaspermdegroot