disclosure navigation Example: Add "Open in CodePen" button

[spectranaut]

Hi everyone! This "Open to codepen" is in it's own PR because I'm not totally sure how to move forward with it.

Here is example: Preview Disclosure Navigation Example

The problem is that when we open these examples in codepen, the links send you back to the APG page instead of just updating the main content within the copepen HTML rendering. The reason why is that we send a base url to Codepen so that all images and links in the HTML lead back to the APG website.

The codepen example works up until you click a link, so it is probably useful to most programmers. My suggestion is that we leave it in this state for now, and see if there is an elegant solution to keep the example links working in codepen when the example is updated to our APG coding guidelines (this example hasn't been updated yet).

[github-actions]

Regression test coverage:

Examples without any regression tests:

• dialog-modal/alertdialog.html

Examples missing some regression tests:

• dialog-modal/datepicker-dialog.html:
  • textbox-aria-describedby
• menu-button/menu-button-actions-active-descendant.html:
  • menu-up-arrow
  • menu-down-arrow
  • menu-character
• toolbar/toolbar.html:
  • toolbar-tab
  • toolbar-right-arrow
  • toolbar-left-arrow
  • toolbar-home
  • toolbar-end
  • toolbar-toggle-esc
  • toolbar-toggle-enter-or-space
  • toolbar-radio-enter-or-space
  • toolbar-radio-down-arrow
  • toolbar-radio-up-arrow
  • toolbar-button-enter-or-space
  • toolbar-menubutton-enter-or-space-or-down-or-up
  • toolbar-menu-enter-or-space
  • toolbar-menu-down-arrow
  • toolbar-menu-up-arrow
  • toolbar-menu-escape
  • toolbar-spinbutton-down-arrow
  • toolbar-spinbutton-up-arrow
  • toolbar-spinbutton-page-down
  • toolbar-spinbutton-page-up
  • toolbar-checkbox-space
  • toolbar-link-enter-or-space
  • toolbar-spinbutton-role

Example pages with Keyboard or Attribute table rows that do not have data-test-ids:

• dialog-modal/alertdialog.html
  • "Keyboard Support" table(s):
    • Tab
    • Shift + Tab
    • Escape
    • Command + S
    • Control + S
  • "Attributes" table(s):
    • alertdialog
    • aria-labelledby=IDREF
    • aria-describedby=IDREF
    • aria-modal=true
    • alert

SUMMARY:

55 example pages found.
1 example pages have no regression tests.
3 example pages are missing approximately 27 out of approximately 780 tests.

ERROR - missing tests:

Please write missing tests for this report to pass.

[carmacleod]

Hmm, I see what you mean.

I guess the Menubar navigation has the same problem - sorry I didn't notice earlier.

Treeview navigation will have the problem, too - currently being reviewed in #1558.

I wonder if we should maybe leave the codepen button off of the navigation examples until this problem is fixed?

How might updating to the latest APG coding guidelines help?

Also, curious whether we would still need CodePen's base url to point back to the APG site if we inline SVG's? Not many of the examples have a non-inlined image, except for the map in the disclosure example, maybe? What links still need to go back to the APG site?

[spectranaut]

Thanks for the thoughts @carmacleod !

How might updating to the latest APG coding guidelines help?

We definitely need an item about updating the APG coding guidelines to include things you can and can't do in order to open the example in codepen! But I'm really not sure the technical solution for these navigational menus. I haven't had a moment to really put on my thinking cap about it, however.

Also, curious whether we would still need CodePen's base url to point back to the APG site if we inline SVG's? Not many of the examples have a non-inlined image, except for the map in the disclosure example, maybe? What links still need to go back to the APG site?

Unfortunately, we really do need the base url, for every other image that is referenced by a relative path in the HTML. Take the carousel examples, or the the disclosure image -- these images are pulled into the codepen directly from the APG when the codepen renders. It's just relative URLS from the CSS that don't work (they don't know about the base url). This makes me think we should maybe just leave all reference to SVGs in the HTML.

[carmacleod]

Right, forgot about the carousel images.

Are there any examples that need the base url to point to APG site for links?
Just trying to understand the scope of the problem. :)

The Menu Button example uses absolute URLs, so it's ok (hmm, but the codepen button in that example doesn't have the right style).

I guess the Breadcrumb Example uses relative links into the APG, so it currently needs the base url to be APG, but the links can probably be changed to absolute URLs.

Can't think of any others, but I didn't look deeply.

[spectranaut]

i just looked through and your right, I don't think there are any relative links that are essential to the examples, so it is just the images.

I also just tried to remove the "base" url override locally to test if the example would work in codepen, and it didn't -- but it turns out it didn't because the "onclick" handler is never replaced because of an error! I just pushed a fix for that. With that fix, the example does work if you remove the "base" reference. So one option for a fix is to consider changing the way we bring in images and removing base to get the examples that use fake links to work.

But I also thought of another option -- if we are replacing the default behavior for activating a link in this example anyway, we could just call event.preventDefault(). When you add event.preventDefault() right now, though, the url fragment does not update and the menu does not close, so we would have to add that behavior as well. What do you think of this option?

[carmacleod]

But I also thought of another option -- if we are replacing the default behavior for activating a link in this example anyway, we could just call event.preventDefault(). When you add event.preventDefault() right now, though, the url fragment does not update and the menu does not close, so we would have to add that behavior as well. What do you think of this option?

Interesting thought, @spectranaut. I will have to defer to @smhigley on that, because she wrote DisclosureNav.
Sarah, please read the previous comments to understand the back story for Valerie's question. :)

[spectranaut]

Resolved the conflicts!

[zcorpan]

So one option for a fix is to consider changing the way we bring in images and removing base to get the examples that use fake links to work.

I think I prefer this option if it can work for all examples. base elements are a bit confusing in my opinion, and adding code to work around the effect of the base element seems like it would add further complexity that distracts from what the example is actually about.

[zcorpan]

However, looking at this particular example, the scrolling that happens by navigating to the fragment #mythical-page-content is a bit annoying and could be disorienting, so maybe it should preventDefault() anyway to avoid the scrolling.

[smhigley]

@zcorpan this was discussed and resolved in the other disclosure nav example, I think it would make sense to adopt the same approach for this one: #1614 (comment)

[zcorpan]

@smhigley OK, so use regular link and don't preventDefault()? Like it is currently in this PR?

[zcorpan]

I noticed that #1614 also added (or changed) the "fake link behavior" code that was almost identical to that in the second commit of this PR (1a30872), so I removed that commit here with a git rebase.

[zcorpan]

@mcking65 should this be merged?

[mcking65]

Although minutes for October 19 meeting do not indicate a merge decision, my memory of the discussion is that the current behavior of the example when viewed in Codepen, while not ideal, is acceptable. So, I will merge.

[mcking65]

Approving based on memory of Octt 19, 2021 meeting discussion