aria attributes not allowed?

I'm puzzled as to why PHPStorm (2020.2) does not recognize aria attributes (or at least some aria attributes) as legal attributes in html 5 elements; it tells me that they are not allowed, for example, in <svg> elements, and offers to "add" them as a "custom attribute". I've had to do this for aria-label and aria-labelledby. These aria attributes are neither new nor experimental;; why must we add them as "custom" attributes?  Along similar lines (again with aria attributes), I'm baffled as to why PHPStorm continues to refuse to accept javascript expressions as values for certain dynamic boolean attributes (e.g., for use with vue.js). Examples include:aria-expanded and "aria-hidden". PHPStorm readily accepts js expressions for other attributes, such as ":id", ":class" and ":aria-controls". So why....?

3 comments
Comment actions Permalink

Could you please provide a code sample? I tried a simple example and didn't get any warnings.

0
Comment actions Permalink

Here is some template code from a Vue component. I've included the entire template block so that the context is clear. The aria-label attribute in the inline svg is being flagged by PHPStorm: "Attribute aria-label is not allowed here". This behavior seems involve svg elements in particular; aria-labelledby is also flagged, as is aria-describedby. If I move the attribute to the button element, the warning goes away. If I move move the svg outside the button element, the warning remains.

<template>
<transition name="fade">
<p v-show="show" class="notification-bar msg" :class="notificationTypeClass">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" class="svg-inline--fa fa-info-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z">
</path>
</svg>
{{ message }}
<button class="dismiss" @click="close">
<svg aria-label="dismiss" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
<path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
</path>
</svg>
</button>
</p>
</transition>
</template>

0
Comment actions Permalink

Thanks! It looks like this known issue: https://youtrack.jetbrains.com/issue/WEB-36210. Please follow to be notified on updates.

0

Please sign in to leave a comment.