Make sure Place Block buttons identify as buttons in Block layout UI.

+1 - ARIA is powerful, but not as good as old HTML5.

Some links to back that up:

https://www.paciellogroup.com/blog/2011/04/html5-accessibility-chops-jus...
http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-d...

I assume that it would be relatively simple to add the role=button attribute? I assume that if this is already an anchor that it would be suitable in all other ways from an accessibility perspective, but some quick testing could confirm.

- Can receive focus
- Visually displays focus
- In an appropriate tab order / flow.
- Can be activated by keyboard.

Submitting patch for the same adding role="button" attribute to place block links.

- It is receiving focus on appropriate tab order / flow.
- Visually displaying focus
- Working on enter key.

I'll try to review this as part of DC Dublin friday sprint.

1. Can receive focus : OK
2. Visually displays focus : OK
3. In an appropriate tab order / flow : OK
4. Can be activated by enter key : OK
5. Can be activated by space key : FAIL

The initial post says that space key activation is required. I'll try to work on it now.

I added a JS behavior to handle the spacebar. Patch attached.

I sat next to Andrew during the sprint and we discussed about a wider issue: it might be good for accessibility if every link with role=button would respond to the spacebar key press, not just the "Place block" one. I found at least one other "pseudo-button" in core: the "Manage" link in the admin toolbar menu. Might be another issue though.

Edit: wider issue created: #2809347: All links using the "button" role should respond to spacebar, not only to enter key

Here's a new patch, I just updated the comment as asked.

Here's an updated patch. I confirm it still works on my Chromium.

andrewmacpherson I can't get safari, nor firefox (on a mac) to focus the link using the tab button. How did you manage to get firefox to focus it?

resetting the tags I removed by mistake

Sorry, but why have we given up on <button> and reverted to role="button"?

HTML5 is better supported.

AFAIK button elements do not support href.

Not a fans to add similar JS code everywhere. Let's make it globally

@tim.plunkett - I just re-read the issue description and have modified the title. The problem is with the identification to screen readers which can be fixed with aria.

There are many instances where aria is used rather than plain old HTML, when HTML would be more accessible for everyone. This doesn't seem to be one of those instances.

@droplet - How do we do this? Where are these links (which act as buttons) being built? Not sure how to change it globally.

These specific links are in BlockListBuilder, around line 211.

      $form['region-' . $region]['title'] = array(
        '#theme_wrappers' => array(
          'container' => array(
            '#attributes' => array('class' => 'region-title__action'),
          )
        ),
        '#prefix' => $title,
        '#type' => 'link',
        '#title' => $this->t('Place block <span class="visually-hidden">in the %region region</span>', ['%region' => $title]),
        '#url' => Url::fromRoute('block.admin_library', ['theme' => $this->getThemeName()], ['query' => ['region' => $region]]),
        '#wrapper_attributes' => array(
          'colspan' => 5,
        ),
        '#attributes' => [
          'class' => ['use-ajax', 'button', 'button--small'],
          'data-dialog-type' => 'modal',
          'data-dialog-options' => Json::encode([
            'width' => 700,
          ]),
        ],
      );

The two key parts there are '#type' => 'link' and

'#attributes' => [
   'class' => ['use-ajax', 'button', 'button--small'],

Tagging https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html