Add codepen title

[carmacleod]

Special for @a11ydoer, this adds a title to the prefilled codepen so that it is not "untitled".

Decided to go with filename instead of directory name, because while the filename is not always ideal (e.g. many of them have "-1" or "-2a" in them, which isn't exactly semantically useful), at least the filenames are more specific, which is nice in the case of all those different comboboxes, for example. We may want to rename some of the example files. For example, "breadcrumb/index.html" has a filename of "index", which is not particularly helpful in codepen. I know that @jongund has been renaming example files recently, which is awesome.

@spectranaut and @smhigley, I'd love to get your review of this - it's only 3 lines of code. [Edit: 4 lines, because, prettier]

Let me know if you think we should go with directory name instead of filename (i.e. just "combobox", instead of "combobox-select-only"). The 3 4 lines of code for that would instead be:

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

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

Urgh. Ok, tell me where the linebreaks need to go for:

var filename = path.length > 0 ? path[path.length - 1].replace('.html', '') : '';

And maybe it's not just 3 lines of code, because prettier wants more...
(I don't think the IDE I'm using can add prettier, but I'll ask. Might just have to switch to VSCode).

[nschonni]

If you run npm run fix it should correct it for you (if you've already installed the dependencies with npm ci)

[carmacleod]

Thank-you, @nschonni !
All it wanted was one linefeed. Picky thing. ;)

[spectranaut]

Looks and works great, thanks @carmacleod !

[spectranaut]

The regression tests failures are flaky tests I'm fixing in another PR :) This PR can be merged.

[a11ydoer]

Thanks for considering my feedback and even taking an action for it, @carmacleod
You are a rock star!

[mcking65]

@nschonni since we have dependabot keeping package-lock.json up to date, should people only run npm ci in their local clones instead of npm install? Should we update our documentation?

[nschonni]

@mcking65 that probably is a good idea. Makes sure that people don't get new or different installs than what is run on CI or someone else's machine

[mcking65]

Thank you @carmacleod and @a11ydoer