Add codepen button to examples - part 1! #1532

spectranaut · 2020-09-25T00:02:21Z

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

jongund · 2020-09-28T15:03:48Z

@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 · 2020-09-28T15:10:30Z

@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 · 2020-09-29T13:52:45Z

@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 · 2020-09-29T18:49:25Z

@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 · 2020-10-08T23:38:55Z

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 · 2020-10-21T19:07:05Z

@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 · 2020-10-21T19:25:29Z

@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 · 2020-10-22T18:46:21Z

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 · 2020-10-27T18:16:37Z

examples/js/examples.js

@@ -401,6 +401,10 @@ function addOpenInCodePenForm(
    css: '',
    js: '',
    head: '<base href="' + location.href + '">',
+    css_external:


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,

Valerie Young added 7 commits September 24, 2020 15:42

Add margin below example header withcodepen button

c1a63fc

Normalize id format

cc1917b

Add codepen button to carousel examples

0aa70d9

Add codepen button to combobox select only

b9b4940

Add codepen button to menubar-navigation.html

b4fbe57

Add listbox grouped codepen button

21a39ce

Add codepen button to combobox datepicker

363bf26

jongund self-requested a review September 28, 2020 14:56

Include other styles used in example pages

0797e9e

Merge branch 'master' into codepen-implementation-part1

da93530

jongund approved these changes Oct 27, 2020

View reviewed changes

ZoeBijl self-requested a review October 27, 2020 18:15

ZoeBijl reviewed Oct 27, 2020

View reviewed changes

ZoeBijl approved these changes Oct 27, 2020

View reviewed changes

spectranaut mentioned this pull request Oct 29, 2020

Add codepen to examples - part 2! #1595

Merged

carmacleod approved these changes Oct 30, 2020

View reviewed changes

Merge branch 'master' into codepen-implementation-part1

affcdd9

mcking65 merged commit c7fc4d8 into master Oct 30, 2020

mcking65 deleted the codepen-implementation-part1 branch October 30, 2020 05:31

mcking65 added enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern labels Oct 30, 2020

mcking65 added this to the 1.2 Release 1 milestone Oct 30, 2020

mcking65 mentioned this pull request Oct 30, 2020

Occasional regression test timeout when waiting for link to load #1594

Closed

Clemens-git76 mentioned this pull request Apr 16, 2024

[Snyk] Upgrade node-fetch from 2.7.0 to 3.3.2 Clemens-git76/aria-practices#4

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add codepen button to examples - part 1! #1532

Add codepen button to examples - part 1! #1532

spectranaut commented Sep 25, 2020 •

edited

Loading

jongund commented Sep 28, 2020

jongund commented Sep 28, 2020

a11ydoer commented Sep 29, 2020

ZoeBijl commented Sep 29, 2020 •

edited

Loading

spectranaut commented Oct 8, 2020

mcking65 commented Oct 21, 2020

a11ydoer commented Oct 21, 2020

github-actions bot commented Oct 22, 2020 •

edited

Loading

ZoeBijl Oct 27, 2020

ZoeBijl left a comment

carmacleod left a comment

Add codepen button to examples - part 1! #1532

Add codepen button to examples - part 1! #1532

Conversation

spectranaut commented Sep 25, 2020 • edited Loading

RawGitHack preview links

jongund commented Sep 28, 2020

jongund commented Sep 28, 2020

a11ydoer commented Sep 29, 2020

ZoeBijl commented Sep 29, 2020 • edited Loading

spectranaut commented Oct 8, 2020

mcking65 commented Oct 21, 2020

a11ydoer commented Oct 21, 2020

github-actions bot commented Oct 22, 2020 • edited Loading

Regression test coverage:

Examples without any regression tests:

Examples missing some regression tests:

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

SUMMARY:

ZoeBijl Oct 27, 2020

Choose a reason for hiding this comment

ZoeBijl left a comment

Choose a reason for hiding this comment

carmacleod left a comment

Choose a reason for hiding this comment

spectranaut commented Sep 25, 2020 •

edited

Loading

ZoeBijl commented Sep 29, 2020 •

edited

Loading

github-actions bot commented Oct 22, 2020 •

edited

Loading