Accessible name from content is not computed correctly in case of display: block descendants

[Jym77]

The accessible name specs say to join the content from descendants, but is not clear whether that should be done with or without space between them (w3c/accname#15). Back in #889 we decided to join them without space. This seems to be incorrect when there are spaces between the elements, or when the elements have display: block which adds visual spacing (new line) upon rendering.

<button>
  <span>inline</span><span>no space</span>
</button>

<button>
  <span>inline</span> <span>with space</span>
</button>

<button>
  <div>block</div><div>no space</div>
</button>

<button>
  <div>block</div> <div>with space</div>
</button>

<button>
  <div>block</div><span>inline</span>
</button>

<button>
  <span>inline</span><div>block</div>
</button>

Chrome (Version 97.0.4692.99) gives
"inlineno space", "inlinewith space", "block no space", "block with space", "block inline", "inline block"
Firefox (V 96.0.3) gives
"inlineno space", "inline with space", "block no space", "block with space", "block inline", "inline block"

Alfa gets no space between the elements in all cases.

[Jym77]

Current state:

• It seem both Alfa, Chrome and Firefox add a space when there is inter-element space ("inline with space") 👍
• Alfa doesn't add space when there is a block element, Chrome and Firefox do 👎

Resolution: change alfa-aria/fromDescendants to add space before and after each block element + trim result (to de-duplicate spaces).

[Jym77]

It seems we're still not good when the block element is nested inside an inline(-flex?) element with no other text 😕

[2biazdk]

I've tried to write some test cases we might use for this, based on my (limited) understanding of the issue:

1. Test Case: Inline elements without space
   Description: Verify that accessible name is computed correctly for inline elements without space between them.
   HTML:

   <button>
     <span>inline</span><span>no space</span>
   </button>

   Expected Result: The accessible name should be "inlineno space".

2. Test Case: Inline elements with space
   Description: Verify that accessible name is computed correctly for inline elements with space between them.
   HTML:

   <button>
     <span>inline</span> <span>with space</span>
   </button>

   Expected Result: The accessible name should be "inline with space".

3. Test Case: Block elements without space
   Description: Verify that accessible name is computed correctly for block elements without space between them.
   HTML:

   <button>
     <div>block</div><div>no space</div>
   </button>

   Expected Result: The accessible name should be "block no space".

4. Test Case: Block elements with space
   Description: Verify that accessible name is computed correctly for block elements with space between them.
   HTML:

   <button>
     <div>block</div> <div>with space</div>
   </button>

   Expected Result: The accessible name should be "block with space".

5. Test Case: Mixed inline and block elements
   Description: Verify that accessible name is computed correctly for a mixture of inline and block elements.
   HTML:

   <button>
     <div>block</div><span>inline</span>
   </button>

   Expected Result: The accessible name should be "block inline".

6. Test Case: Nested block inside inline
   Description: Verify that accessible name is computed correctly for a nested block element inside an inline element.
   HTML:

   <button>
     <span>inline</span><div>block</div>
   </button>

   Expected Result: The accessible name should be "inline block".

[2biazdk]

@Jym77 Is the above useful? Can I add something else to help prepare this task?

[Jym77]

Perfect. Thanks.

[2biazdk]

Is this issue related to #1203?

[Jym77]

Is this issue related to #1203?

@2biazdk it may boils down to the same problem, but it looks slightly different…