Filtering is broken for formatted combobox example

[dhdaines]

Because the formatting done here

aria-practices/content/shared/js/examples.js

Line 122 in 39fb654

aria.widget.SourceCode.prototype.createCode = function (

adds spaces around the content inside each <li> element in the option list, the filtering in the JavaScript, which uses this as the content to compare to:

  getLowercaseContent(node) {
    return node.textContent.toLowerCase();
  }

does not actually work when using the formatted HTML as shown on the web page.

I suggest adding trim() to the code above so that it will work.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed HTML source formatting on combobox example page.

The full IRC log of that discussion

<jugglinmike> Topic: HTML source formatting on combobox example page
<jugglinmike> github: https://github.com//issues/3027
<jugglinmike> arigilmroe: Has submitted a patch for this, which is awesome: https://github.com//pull/3041/files
<jugglinmike> s/arigilmroe: Has/Matt_King: arigilmroe has/
<jugglinmike> arigilmroe: I added a "trim" to remove surrounding white-space just in that example
<jugglinmike> Matt_King: If you press the "open this in CodePen" button and copy it from CodePen, would it work without this change?
<jugglinmike> Matt_King: I ask because it almost seems to me like we're adding code to support something we wouldn't normally support
<jugglinmike> arigilmroe: The CodePen works
<jugglinmike> Matt_King: I'm questioning whether we want to do this at all. This bug could pop up on many example pages, and I don't know if we want to be responsible for supporting this use-case everywhere
<jugglinmike> Matt_King: The way the HTML is formatted for display on the example page, there is some whitespace around the list items
<jugglinmike> Matt_King: However, if you look at that exact HTML in CodePen, that whitespace isn't there. That's because that whitespace isn't present in the source
<jugglinmike> Matt_King: But our intention isn't that you would copy and paste that HTML in order to re-create the example
<jugglinmike> Matt_King: I think that if we were to try to copy-and-paste the HTML from the other pages, we would probably find many other places where white-space was causing issues
<jugglinmike> arigilmroe: Do we even need the HTML source section?
<jugglinmike> Matt_King: A few people (including myself but others, as well) have reported that the "source" section is useful. One could review the source through CodePen, but doing so can be difficult for an AT user.
<jugglinmike> jongund: Have we opened any feature requests in CodePen to make it easier to navigate with an AT?
<jugglinmike> Matt_King: We have not
<jugglinmike> Matt_King: I just double-checked, and JAWS is still completely silent on the CodePen page
<jugglinmike> Matt_King: I can press Ctrl+A to select all the text, copy it, paste it into Nodepad, and then review it from there
<jugglinmike> Matt_King: It's a kind of workaround that I'm used to doing, but I'm not sure how many other screen reader users would think to do that
<jugglinmike> Matt_King: I suppose we can remove the HTML source, though. We might want to remove the CSS and JavaScript source, for similar reasons
<jugglinmike> dmontalvo: I appreciate having the source on the same page
<jugglinmike> CoryJoseph: CodePen is run by a small company. The accessibility issues were reported years ago, but as far as I know, they haven't committed to a timeline to address those
<jugglinmike> Matt_King: Even a simple change like adding a landmark region around the code would be a massive help...
<jugglinmike> CurtBellew: We could put a landmark region around our embedding of CodePen
<jugglinmike> Matt_King: That's a good idea!
<jugglinmike> Bryan_Garaventa: If we added the landmark for CodePen, then I'd be comfortable removing the source from the example pages
<jugglinmike> Matt_King: Doing that would eliminate some scripting (the build script that generates the view of the source code), it would make the pages lighter, it would remove a redundancy, and it would prevent the kind of confusion experienced by the reporter of the issue we're currently discussing
<jugglinmike> dmontalvo: I still believe there's utility in surfacing the source code on the page. Particularly for screen reader users who are not familiar with CodePen (who may not even realize that they could access the source code through CodePen)
<jugglinmike> dmontalvo: Is our audience for this limited to developers?
<jugglinmike> Matt_King: No, I don't think so
<jugglinmike> Matt_King: I wonder if we put the CodePen button in two places. Where it is, currently, and then also in the "source" section with some instructions like, "if you'd like to copy the source code, you can access it on CodePen"
<jugglinmike> s/in the "source" section"/under the "HTML source" heading/
<jugglinmike> Bryan_Garaventa: Personally, I find CodePen irritating, but to each his own
<jugglinmike> Matt_King: arigilmroe you can experiment with this change on just the page we're discussing. That will give us something to review and decide if we want to do it generally
<jugglinmike> arigilmroe: Sounds good!

[dhdaines]

Thanks! I definitely do not want to use CodePen or any such browser-based tool for development, so it is useful to have the source on the page, if it's not too much trouble. Sometimes you also just want to look at the source and not necessarily copy/paste it anywhere, but it should also function when copied/pasted.

[mcking65]

Resolved by #3041.

@dhdaines , we made it easier to copy the source from codepen by putting a codepen button next to the source. To copy, just open codepen, focus the html, select all, and copy.

Changing the code that formats the source for display so that it could be both reliably formatted for readability and copyable from the web page in any browser on every example page would be a large testing lift that we can't contain.

The updates to support this use case are planned for publication on August 6.