wp_audio_shortcode() outputs invalid HTML

[shub07]

Did an audit of a website and found several invalid HTML for audio tags that were output with wp_audio_shortcode(). The errors:
Bad value 1 for attribute loop on element audio
Bad value 1 for attribute autoplay on element audio
Bad value 1 for attribute muted on element audio
Based on documentation from Mozilla, all 3 are boolean attributes. Here is an example of function usage that produced the HTML validation errors:

<?php
echo wp_audio_shortcode( [
    'src'      => wp_get_attachment_url(9999),
    'class'    => 'my-custom-audio',
    'poster'   => '',
    'loop'     => 'true',
    'autoplay' => 'true',
    'muted'    => 'true',
    'height'   => 1080,
    'width'    => 1920
] );

This part in wp_audio_shortcode() is the culprit:

<?php
$attr_strings = array();
foreach ( $html_atts as $k => $v ) {
        $attr_strings[] = $k . '="' . esc_attr( $v ) . '"';
}

Currently, we are using the filter to clean up these attributes like this:

<?php
foreach ( $html_atts as $k => $v ) {
                $attr_strings[] = $k . '="' . esc_attr( $v ) . '"';
                if ( in_array( $k, array( 'loop', 'autoplay', 'muted' ), true ) && true === $v ) {
                        $attr_strings[] = esc_attr( $k );
                } else {
                        $attr_strings[] = $k . '="' . esc_attr( $v ) . '"';
                }
        }

Similar to: https://core.trac.wordpress.org/ticket/60178

wp_audio_shortcode() was chaging boolean attributes to 1, as of true === 1, in debug i notice it was directly happening after foreach, not by eascaping, so I have add a if statement to handle boolean attributes and directly pass our key, as Key can be directly work for boolean attributes in HTML.

Hi @shubham07kb

The PR looks good to me.

Hi @dmsnell ,
Thank you for your feedback. I have implemented the suggested changes to utilize the HTML API for generating the <audio> tag. I agree that utilizing the internal HTML API is a better approach for generating the <audio> tag. It simplifies the code and efficiently handles boolean attributes.

@shubham07kb there are some existing tests for this in tests/phpunit/tests/media.php.
do you think you could add a new test covering this invalid boolean attribute behavior? and then verify that the test fails before applying your fix?

I guess it's worth stating that the boolean attributes with a value of "1" should actually still be true and semantically equivalent to their value-less counterparts. I'm sure a validator will say they are invalid, but behaviorally the existing code should have properly conveyed the boolean true nature of the attribute.

Trac Ticket : Core-61515

## Overview

• This pull request introduces updates to the wp_audio_shortcode function to enhance the handling of boolean attributes and the preload attribute in accordance with HTML5 standards. These changes aim to ensure that the generated audio elements are more compliant with modern web practices.

## Changes Made

• Boolean Attributes Handling

• The loop, autoplay, and muted attributes are now output without values when their respective conditions are met. This aligns with HTML5 standards where these attributes can be treated as boolean.

• Preload Attribute

• The preload attribute has been updated to accept only specific allowed values: none, metadata, and auto. If a value outside of this list is provided, it will be ignored, preventing invalid attribute outputs.

• Code Improvements

• Enhanced readability and maintainability of the code, including better organization of attribute handling and validation.

## Benefits

• Improves compliance with HTML5 standards for audio elements.

• Ensures cleaner and more efficient HTML output.

• Enhances user experience by properly managing audio attributes based on their intended use.

## Testing:

• All existing tests related to audio shortcode rendering have been updated to validate the new behavior of boolean attributes and the preload attribute.

• This pull request aims to improve the functionality and reliability of audio embeds in WordPress while adhering to current web standards.

Hi @joedolson , Can you please take a look into this PR. Thanks.

[audrasjb]

Moving this to milestone 6.8 to handle it alongside #60178.

Hi @joedolson , I have addressed the feedback.

Similarly to ticket 60178, I can confirm this PR also handle well the related attributes when using the [audio] shortcode.

[audrasjb]

Adding needs-dev-note to make sure this is documented in the Misc changes dev note.

[joedolson]

Made a couple minor but needed changes; LGTM.

[joedolson]

In 59987:

Media: Add 'muted' attribute and normalize HTML attributes.

Add the 'muted' attribute to the audio shortcode. Fix boolean attributes to meet HTML5 standards. Replaces instances like attr="1" with attr for loop, autoplay, and muted, and improves handling of the preload attribute to only output valid values.

Props shub07, dmsnell, debarghyabanerjee, audrasjb, narenin, apermo, joedolson.
Fixes #61515.

[JeffPaul]

Note that the dev note for this is ​drafted and part of the Miscellaneous Dev Note.

[JeffPaul]

This has now been published as a section in the ​Miscellaneous developer changes in WordPress 6.8 dev note post.