thank you for your reply, joe.
i followed your advice but to no avail. when i click the button, a white overlay appears but the containing longdesc is missing. this is the source code:
<figure class="wp-block-image size-medium is-style-longdesc"><div class="wpa-ld wp-image-400"><img loading="lazy" src="https://localhost:8888/url-local/wp-content/uploads/2017/05/2017-Hin-300x247.jpg" alt="?Hin I“" class="" srcset="https://localhost:8888/url-local/wp-content/uploads/2017/05/2017-Hin-300x247.jpg 300w, https://localhost:8888/url-local/wp-content/uploads/2017/05/2017-Hin-768x633.jpg 768w, https://localhost:8888/url-local/wp-content/uploads/2017/05/2017-Hin-508x419.jpg 508w, https://localhost:8888/url-local/wp-content/uploads/2017/05/2017-Hin.jpg 900w" sizes="(max-width: 300px) 100vw, 300px" id="longdesc-return-400" longdesc="https://localhost:8888/url-local/2017-2/2017-hin/?longdesc=" width="300" height="247"><div class="longdesc" aria-live="assertive" style=""></div><button><span>Long Description</span></button></div><figcaption>Hin I</figcaption></figure>
i guess the problem is that the .longdesc div has no text in it (although i have entered a longdesc in the image description).