El T406563#11264148, @Esanders escribió:

The reason we don't use regular buttons there is because buttons are variable width based on their content, whereas we want the symbol list to align to a grid, so each button is fixed width, and with tighter margins. We should probably address that feature in a separate task.

If we can't reuse the Button component to create these symbols, we can at least reuse the tokens used in Button to make them look similar. To align this with the Button while avoiding major style changes, I suggest reusing the quiet Button styles:

• We could use border-color-muted to make the border visually recognizable, while using the quiet Button interactive styles to communicate the interaction states. This means, the interaction state will be communicated in the background-color instead in the border-color:
  • Default: background-color-interactive-transparent
  • Hover: background-color-interactive-subtle--hover
  • Active: background-color-interactive-subtle--active
  • Focus: use border-color-progressive--focus
• We could also use border-radius-base (2px) as we do in the rest of Buttons

In T406982#11268007, @bmartinezcalvo wrote:

• We could use border-color-muted ...

Should we stick with border-color-subtle (gray300) as we aren't using border-color-muted (gray200) anywhere else? It also keeps the border slightly darker than the active background state (gray200)...

Another issue found is that currently, keyboard navigation only allows users to move through the entire block of buttons. Each button should be individually accessible using keyboard navigation instead.

El T406982#11268097, @Esanders escribió:

In T406982#11268007, @bmartinezcalvo wrote:

• We could use border-color-muted ...

Should we stick with border-color-subtle (gray300) as we aren't using border-color-muted (gray200) anywhere else? It also keeps the border slightly darker than the active background state (gray200)...

Yes, border-color-subtle could work. But keep in mind that it will make this block much more prominent since there are many buttons in this grid. Since this border would be purely decorative because the interaction will be communicated in its background, either subtle or muted would work. So I lean towards muted to make this section less heavy border.

So I lean towards muted to make this section less heavy border.

Ok - let's use muted.

Another issue found is that currently, keyboard navigation only allows users to move through the entire block of buttons. Each button should be individually accessible using keyboard navigation instead.

I agree in principal although in practice the list usually has around 3,000 buttons, so is not really usable with keyboard navigation anyway. Building an accessible special character inserter is a project of its own, but note also that every button in that list effectively has a keyboard shortcut alternative the form of "alt+<character code>" or whatever the sequence is on your OS, so it may not be our place to do so.

Change #1195682 had a related patch set uploaded (by Esanders; author: Esanders):

[VisualEditor/VisualEditor@master] Update SymbolList button styles

https://gerrit.wikimedia.org/r/1195682

El T406982#11268319, @Esanders escribió:

Another issue found is that currently, keyboard navigation only allows users to move through the entire block of buttons. Each button should be individually accessible using keyboard navigation instead.

I agree in principal although in practice the list usually has around 3,000 buttons, so is not really usable with keyboard navigation anyway. Building an accessible special character inserter is a project of its own, but note also that every button in that list effectively has a keyboard shortcut alternative the form of "alt+<character code>" or whatever the sequence is on your OS, so it may not be our place to do so.

@Esanders I've created a separated task in case we want to improve this in the future T407142: VE SymbolList buttons: Improve keyboard navigation.

Test wiki created on Patch demo by BMartinezCalvo (WMF) using patch(es) linked to this task:
https://dd1023ca51.catalyst.wmcloud.org/w/

El T406982#11269148, @PatchDemoBot escribió:

Test wiki created on Patch demo by BMartinezCalvo (WMF) using patch(es) linked to this task:
https://dd1023ca51.catalyst.wmcloud.org/w/

@Esanders I've reviewed the patch with the updated styles and it looks good. Thank you!

Change #1195682 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Update SymbolList button styles

https://gerrit.wikimedia.org/r/1195682

Change #1196039 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (714b3ae07)

https://gerrit.wikimedia.org/r/1196039

Change #1196039 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (714b3ae07)

https://gerrit.wikimedia.org/r/1196039