Add codepen button to examples - part 1!

[spectranaut]

This PR adds codepen buttons to the following examples! To test locally, you will have to serve the example file with a web server (described here).

RawGitHack preview links

• carousel/carousel-1-prev-next.html
• carousel/carousel-2-tablist.html
• combobox/combobox-select-only.html
• menubar/menubar-navigation.html
• listbox/listbox-grouped.html
• combobox/combobox-datepicker.html

[jongund]

@spectranaut
@mcking65
For the carousel example is in code pen, if you select one of the links in the carousel it loads the APG page, not just the example code. Seems like a change in context of the , but may not be a problem for developers look at the code. Actually in the carousel examples when the page is fully loaded, the user can interact with the configuration options. Might be a plus?

[jongund]

@mcking65
@spectranaut
One issue is that the examples rely on the default fonts and maybe some other CSS from the APG example template, so the fonts are noticeably different in the code pen examples. Maybe need to include some basic CSS for at least the default font so the examples seem consistent between APG and Code Pen.

Otherwise the Code Pen button focus styling looks good and so far all the example load. The only artifact is that is the example code contains links, activating them in code pen loads the entire APG page.

[a11ydoer]

@spectranaut @mcking65
This is awesome!!!

@jongund
I agree with your second suggestion. Btw, in your first comment, what "configuration option" are you referring to? I could not find out a configuration option which can solve the issue you are pointing out. Only configuration option I changed in CodePen was layout view, code on the right and datepicker output on the left because the date picker example was had to interact when I had the code view in the upper pane and the date picker in the down pane.

[ZoeBijl]

@spectranaut would it be possible to include an @import to the base.css file? This way we wouldn’t miss any styling for the components that rely on it :)

We could also do this via the API with css_external .

[spectranaut]

I implement @ZoeBijl's idea to include the default example page styling in css_external, so you can see the file is included from the settings page of the codepen but you can't see it in the "css" edit box.

I think it's not such a big problem that clicking it pulls in the whole example page -- unless you really think it is, @jongund ?

[mcking65]

@jongund @carmacleod @smhigley @charmarkk @a11ydoer @jnurthen

I'd like a couple of approving reviews on this. No need to look at any of the code; just make sure that the button on the example page and result in codepen sufficiently meet expectations.

I'd like to merge by Friday if possible.

[a11ydoer]

@mcking65

I have checked 6 examples above. I can confirme that the button on the example page, results in codepen sufficiently meet expectations.

One side note, one of whistles and bells we can ignore. It would be nice to transfer the APG example page title to codepen title sincec codepen title is "untitled" for each example.

This is fancy and great help for developers, @spectranaut and @mcking65

[github-actions]

Regression test coverage:

Examples without any regression tests:

• button/button_idl.html
• dialog-modal/alertdialog.html

Examples missing some regression tests:

• combobox/combobox-autocomplete-both.html:
  • combobox-id
• combobox/combobox-autocomplete-list.html:
  • combobox-id
• combobox/combobox-autocomplete-none.html:
  • combobox-id
• combobox/grid-combo.html:
  • textbox-key-down-arrow
  • textbox-key-up-arrow
• dialog-modal/datepicker-dialog.html:
  • textbox-aria-describedby
• menu-button/menu-button-actions-active-descendant.html:
  • menu-up-arrow
  • menu-down-arrow
  • menu-character
• spinbutton/datepicker-spinbuttons.html:
  • spinbutton-down-arrow
  • spinbutton-up-arrow
  • spinbutton-page-down
  • spinbutton-page-up
  • spinbutton-home
  • spinbutton-end
• 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-aria-controls
  • toolbar-button-aria-pressed
  • toolbar-button-aria-hidden
  • toolbar-radiogroup-role
  • toolbar-radiogroup-aria-label
  • toolbar-radio-role
  • toolbar-radio-aria-checked
  • toolbar-radio-aria-hidden
  • toolbar-button-aria-disabled
  • toolbar-menubutton-aria-label
  • toolbar-menubutton-aria-haspopup
  • toolbar-menubutton-aria-controls
  • toolbar-menubutton-aria-expanded
  • toolbar-menu-role
  • toolbar-menu-aria-label
  • toolbar-menuitemradio-role
  • toolbar-menuitemradio-aria-checked
  • toolbar-menuitemradio-tabindex
  • toolbar-spinbutton-role
  • toolbar-spinbutton-aria-label
  • toolbar-spinbutton-aria-valuenow
  • toolbar-spinbutton-aria-valuetext
  • toolbar-spinbutton-aria-valuemin
  • toolbar-spinbutton-aria-valuemax

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.
2 example pages have no regression tests.
8 example pages are missing approximately 61 out of approximately 775 tests.

ERROR - missing tests:

Please write missing tests for this report to pass.

[ZoeBijl]

Woohoo!

[ZoeBijl]

Nice work :)

[carmacleod]

+1

This is so cool! Thanks, @spectranaut !

Approving as-is, but if you wanted to add a title for @a11ydoer, then I think we could just use:

  var path = location.pathname.split('/');
  var title = path.length > 1 ? path[path.length - 2] : ''; // example directory

and then just add the following line to the postJson:

  title: title,