Iconography style update

[antonellasevero]

Problem/Motivation

Recent interviews and research exposed pain points around Drupal's admin experience of looking and feeling dated, especially compared to our competitors, and universally cited that choosing a more modern-looking admin theme instantly led to Drupal being better-perceived by said users.
There was an amazing community effort to Create a Style Guide For Seven that vastly improved its look + feel compared to the original, but Design best practices and Drupal functionality have moved on since then.

Proposed resolution

Implement new iconography styles to create a favorable first impression of Drupal for evaluators and a better user experience for site authors. No functional differences.

Specs:
https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Design-system?node-id=1626%3A1195

Remaining tasks

• Update patch styling to include time inputs
• Accessibility review
• LTR review (Left to right)

User interface changes

All iconography styles will be changed, no functional differences.

Test Pages

@todo

[fuzzbomb]

Icons can be really helpful, but there are some things we should be keep in mind.

For accessibility, do not rely on icons to convey meaning (e.g. button purpose) on their own. They are good in combination with text labels, but some icons may be hard to understand on their own.

e.g. Drupal's current "manage content types" section has operations for each content type...

• Delete could use a wastebin. Edit could use a gearwheel, or a pencil, whichever.

• But then we have "manage fields", "manage display, and "manage form display". I have no idea what icons they could use.

If icons are used on their own, without text labels, then some users will have difficulty...

• Cognitive impairments, e.g. various kinds of dyspraxia. Difficulty in telling two icons apart reliably, or recognizing them at all. Or recognizing a picture (dustbin) but not the metaphor (dustbin means delete).
• Different cultural awareness, including inter-generational ones. Meaningful to some people, excludes others. Similar challenges as the cognitive category, just a different root cause.
• The "wall of emoji" problem, where there are lots of similar smiling yellow faces, but one means grimace and another means happy, and the difference is way too subtle for anybody to get it right.
• Speech control users, if they can't see a text label, may have to resort to guessing what to call something. Even if they recognize the icon in the picture sense. "Click settings. Click preferences. Click cog wheel. Click gear wheel. I give up."

Tooltips can help, but only partially. They count as text labels, but extra effort is needed to discover what they do (one label at a time vs all labels at a glance). They don't help speech control users, or
people with learning/memory impairments.

Upshot / Policy / Plan:

• Let's avoid using icons on their own.
• OR provide user with a choice of modes, like icons-only or icons+text. This will be easier with the JS admin eventually, but more awkward in the PHP Seven theme uodate.
• Maybe we could design for icons+text as the inclusive baseline, and add the icons-only choice later as an enhancement when we get to the React UI.