Expected Behaviour

I expect to be able to copy block collection code from the project, and paste it into my project generated from the latest boilerplate and have the copied code work.

Actual Behaviour

Copied code does not work as it continues to reference lib-franklin.js instead of the newly named aem.js.

Workaround

Rename lib-franklin.js in the copied block to aem.js however newer developers may not know the history of this file or understand why/where its coming from, and possibly even copy lib-franklin.js from this project into their own project!

Steps to Reproduce

1. Generate a new project from latest boilerplate
2. Copy the fragment.js from this project into the new project
3. You will receive an error that fragment.js cannot find lib-franklin.js

Platform and Version

Effects any project generate from boilerplate after release of: adobe/aem-boilerplate@f5ab4df#diff-0e7c120a93e71c8d3532a0952c7ca07331340900de8e45b33ff1d1f1eb72b674

Sample Code that illustrates the problem

N/A

Logs taken while reproducing problem

fragment.js:13 GET http://localhost:3000/scripts/lib-franklin.js net::ERR_ABORTED 404 (Not Found)

Actual Behaviour
There are no headings on each card which makes it difficult to navigate for screen reader users. Currently there is only heading on the page (Another List).

Expected Behaviour
The absence of headings is not a WCAG violation. Having a heading on each card makes the cards more usable for screen reader users.

Please add a heading in the example output for the Card component for each card. This makes navigating through cards much easier for screen reader users. Adding it to sample components makes it much more likely that users of this component will also follow the pattern.

** Steps to Reproduce**

1. Go to the URL https://main--helix-block-collection--adobe.hlx.page/block-collection/cards
2. Use Accessibility Insights (Chrome/Edge Extension) to highlight the headings for the page
3. Notice that the cards do not have a heading and it is hard for screen reader users to tell when a new card begins.

Applicable Guideline:
This is more from a usability perspective and not a WCAG violation

Screenshot

Expected Behaviour

/**
 * Loads a fragment.
 * @param {string} path The path to the fragment
 * @returns {Promise<HTMLElement>} The root element of the fragment. <--- Promise!
 */
export async function loadFragment(path) {
  //...
}

Actual Behaviour

/**
 * Loads a fragment.
 * @param {string} path The path to the fragment
 * @returns {HTMLElement} The root element of the fragment.
 */
export async function loadFragment(path) {
  //...
}

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

https://github.com/adobe/aem-block-collection/blob/main/blocks/fragment/fragment.js#L18

Logs taken while reproducing problem

Expected Behaviour

When using a select inside the excel Table and providing a Value for the options it should pre-select the given Value no matter the position

Actual Behaviour

The given Value is ignoed because the <select> object is handled via setCommonAttributes while disregarding the fact that the <select> element does not support the value= propery

Steps to Reproduce

Create a form-block via spreadsheet and provide a select element with more than 1 options and provide the 2nd option as value.

Expected Behaviour

An embed url of the form https://www.youtube.com/embed/RGSN4S5jn4o should work

Actual Behaviour

it does not, instead result in an embed url like https://www.youtube.com/embed/null?rel=0&v=null

This is due to how these urls are parsed

(PR coming)

Expected Behaviour

The psi-check should recommend the same template as provided by the pr-template.

Actual Behaviour

source)

This does not match the provided pr-template:

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Create a new PR and see what the (failed) psi-check action tells you

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

As an author, I do not understand, nor care about, the difference between the Embed and Video blocks.

I suggest to move all the features of Video into Embed and remove the Video block.

Expected Behaviour

Embed block can be used for both MP4 videos, external videos like youtube and vimeo, and as well Twitter.
Video block will be removed.

Actual Behaviour

MP4 videos only work with Video, external videos only work with Embed.

Current Behavior
The play button is announced as button "play k" and the mute button is announced as button "Mute M"

Expected Behavior
The play button should be announced as Play button and mute button should be announced as Mute button
Steps to reproduce (incl. screenshots/recordings):

1. Open URL https://www.hlx.live/developer/block-collection
2. Open the link ‘Embed’ and then open the link ‘See Live output ’.
3. Go to the video “The World is Your Canvas | Adobe Photoshop” control
4. Press “B” to go to the play/pause button
5. Again press “B” to go to the “Mute “ button

Applicable Guideline
WCAG 4.1.2 Name, Role, Value
https://www.w3.org/TR/WCAG21/#name-role-value

Screenshot

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @babel/eslint-parser to v7.25.1
• chore(deps): update dependency stylelint to v16.8.2
• chore(deps): update dependency eslint to v9
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Actual Behaviour
On 200% zoom screen resolution, the navigation menu is not modal in nature. Pressing tab after the last menu causes the focus to move out of the menu but there is no visible focus indicator on the screen because the focus moves to an item hidden by the displayed menu.

Expected Behaviour
On 200% zoom, the header menu should either behave like a modal and restrict tabbing out of the menu or it should automatically collapse when focus moves out of the menu either through the tab key or in any other way. Visible focus indicator should always be present on the screen.

Steps to Reproduce

1. Open the URL https://main--franklinsidekickrepo--puja-iaccessible.hlx.page/
2. Set the zoom level of the browser to 200%
3. Press enter on the open navigation button
4. Press tab to go to the end of the list item, then press tab once to check if the next item receives the visual focus

Applicable Guideline:
https://www.w3.org/TR/WCAG21/#focus-visible

Why it matters?
Losing the visible focus indicator is very hard for low-vision users. When focus lands on elements that are not visible on the screen, low-vision users lose their place and canot use the application.

Screenshot

Current Behavior
In youtube embed block: the play button accessible text says "play" while the video is already playing

Expected Behavior
The current state of the button should be correctly defined as it is a toggle button. The play-pause button should be announced as pause while the media is playing

Steps to reproduce (incl. screenshots/recordings):

1. Open URL https://www.hlx.live/developer/block-collection
2. Open link ‘Embed’ and then open link ‘See Live output ’.
3. Go to the second video “The World is Your Canvas | Adobe Photoshop” control.
   4.Press “B” to go to play/pause button.

Applicable Guideline
WCAG 4.1.2 Name, Role, Value
https://www.w3.org/TR/WCAG21/#name-role-value

Screeshot

A block that can include another Helix page as a fragment.