Update keyboard shortcuts menu button & dialog icon to a new 'keyboard' icon

[lb-]

Is your proposal related to a problem?

#11717 introduced a new keyboard shortcuts dialog as part of the work for #3949

For simplicity, we used an existing 'regex' icon for this, it would be nice to support a better icon.

Describe the solution you'd like

1. Add a new keyboard icon to the core Wagtail admin icon set. (see instructions in the additional context).
2. Use this new icon in the sidebar menu wagtail/admin/wagtail_hooks.py see register_keyboard_shortcuts_menu_item for code.
3. Use this new icon in the dialog wagtail/admin/templates/wagtailadmin/shared/keyboard_shortcuts_dialog.html.

Describe alternatives you've considered

• N/A - we should do this at some point, ideally before 6.1 goes out.

Additional context

Here's the icon SVG (below), we must include the source reference, add this to the folder wagtail/admin/templates/wagtailadmin/icons.

Also ensure the icon is part of wagtail/admin/wagtail_hooks.py see register_icons, adding in alphabetical order.

For full instructions on adding icons see https://docs.wagtail.org/en/stable/contributing/ui_guidelines.html#adding-icons Please follow these instructions exactly.

There is no need for an RTL variation of this icon.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm16 64h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm80-176c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V144zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zM160 336c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V336zM272 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM256 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V240zM368 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM352 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V240zM464 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM448 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16z"/></svg>

From: https://fontawesome.com/icons/keyboard?f=classic&s=solid

Working on this

• Anyone can contribute to this.
• View our contributing guidelines, add a comment to the issue once you’re ready to start.
• This aligns us closer to the goal designs in https://www.figma.com/proto/h67EsVXdWsfu38WGGxWfpi/Wagtail-CMS?type=design&node-id=14420-153315&viewport=6289%2C-12853%2C1&t=Sk9k7iALDZCA1bu7-0&scaling=scale-down-width&starting-point-node-id=14420%3A153315
• Here's a PR / commit that added some icons recently for reference 136a548 / Use default icons for FieldPanels and add docs/tests for Panel icon customisation #10320

[rohitsrma]

Hi @lb-, can I try working on this? It's not my first time, but I haven't worked on this part of the code before.

[lb-]

Go for it @rohitsrma

[rohitsrma]

Thanks @lb-, I've made a PR #11768. I've been looking for a small issue to switch my setup from Vagrant to Docker for a few weeks. This issue was just what I needed to make that move 😄