Button Examples: Add Open in Codepen and inline SVG in HTML using SVG "def"s

[spectranaut]

Inlining in HTML

In #1534, @carmacleod suggested we use SVG defs to inline the SVGs into the HTML so they will load in codepen. See the code for the button example for an implementation of this suggestion.

Preview Button Example

[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]

Very cool, @spectranaut !

Nice work-around for :before and :after!
What tool did you use to get the svgs encoded with the special URL characters?

Not sure why the codepens are untitled? Did you create this branch from slightly old code? :)

Noticed that the menubar example needs some margin between it and the codepen button. Not sure why other examples have enough space? Changing the margin to have 5px on top (and bottom) fixes it, but I'm not sure if that's the best fix.

.menubar-editor {
    margin: 5px 0;
    ...
}

[spectranaut]

You are right @carmacleod I was on old code, I just rebased! Titles should be in now.

I used this URL encorder: https://yoksel.github.io/url-encoder/

Also, do you think this is a ok direction to move forward with the APG? Essentially, we will have to require that a "image" folder is no longer used, and instead the options are to inline the SVG in the CSS or inline them in the HTML.

[carmacleod]

@spectranaut

Also, do you think this is a ok direction to move forward with the APG? Essentially, we will have to require that a "image" folder is no longer used, and instead the options are to inline the SVG in the CSS or inline them in the HTML.

Good question. I don't know enough about SVGs to know what people "usually" do. We need to be sure we don't break Windows HCM, which is why we converted some of the other examples over to inline SVGs in the HTML and made the SVGs use currentColor. I don't know if currentColor works for inline CSS content SVGs? It might.

Unfortunately, the editor menubar icons don't yet work properly in high contrast mode (not because of this PR - I guess we didn't convert the SVGs over to be inline and use currentColor, and I see that the grey triangles and blue dots and checkmarks fail in High Contrast Black). We did fix the navigation menubar example though (inlined triangles that use currentColor), so maybe we can do something similar for editor menubar. (And then we can test whether currentColor works in CSS content url()'s or not).

I think the button example is good to go! The SVG defs work nicely for that one. Thanks for rebasing - title working now. Did you want to split this into 2 PRs so button example can go in right away? It seems we have some discussion and/or further svg coding/testing still to do for the editor menubar example.

[spectranaut]

Thanks for the suggestions @carmacleod ! I'll break this up into two PRs and use the navigational menubar as an example for the inline-css option instead.

[carmacleod]

+1
Very nice, @spectranaut !
The mute off/on icons look great in both CodePen and High Contrast Mode (Black and White - tested in Edge).

[mcking65]

@spectranaut
Now we have this new feature in examples.js that uses the idsvg_definitions to effect display of the HTML source. How can we enforce consistency in its use? Would it be possible to have a lint rule that can identify when it should be used?