Running the Wave Report tool, I got an error about <button type="button" class="astra-cart-drawer-close"> saying
A button is empty or has no value text
The site is WP, built with ASTRA Theme and Elementor. Is there a CSS code solution or any other?
The site is www.defkalionsa.gr
I know what's causing the problem but I can't select the right things on the page to get the X-close button to appear.
<div id="astra-mobile-cart-drawer" class="astra-cart-drawer open-right">
<div class="astra-cart-drawer-header">
<button type="button" class="astra-cart-drawer-close">
<span class="ahfb-svg-iconset ast-inline-flex svg-baseline">
<svg class="ast-mobile-svg ast-close-svg"...>
<path d="M5.293..."></path>
</svg>
</span>
</button>
<div class="astra-cart-drawer-title">Shopping Cart</div>
</div>
<div class="astra-cart-drawer-content"></div>
</div>
You have a <button> with an embedded <svg> and I presume the <svg> is just a big 'X' to represent a close button but there's nothing to tell assistive technology such as a screen reader what the <svg> represents. You can fix this by adding aria-label="close" to the <button>.
<button aria-label="close" type="button" class="astra-cart-drawer-close">
(For Internet Explorer, if you care, you also need <svg focusable="false"> so that the keyboard user can't tab to the <svg>).
The class on the containing <div> says astra-mobile-cart-drawer so I presume this button is only shown in mobile view. I switched to mobile view in the browser but still couldn't get this button to appear. I added something to the cart and displayed the cart but still no luck.
You can still fix the problem with aria-label but I was really hoping to see the X-close button in action to confirm what it's trying to do.