aria attributes not allowed?

创建于 2020年09月10日 13:14

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....?

5 条评论

Oksana Chumak

创建于 2020年09月11日 11:13

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

Peter Weil

创建于 2020年09月11日 12:32

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>

Oksana Chumak

创建于 2020年09月11日 14:09

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

Jeandominoserver

创建于 2020年11月12日 23:30

Oksana Chumak i am learning, be kind please. the W3 validator is not throwing any shades at me for this code but yet IntelliJ IDEA 2020.2 keeps telling me : "Element aside not allowed here"; and of course the associated aria-label shows in Chrome on a new line of its own without the typical italics font that i am expected to see.

what am i doing the IDE is not liking; i have already switched to HTML5 language level for the project

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bad Websites Awards</title>
</head>
<body>
<h1>Submit your suggestions for our "Bad Websites awards"</h1>
<form method="post" action="https://xxxxxxxxxxxxx.com/displayvalues.php" target="_blank">
    <p>
        <label>First name:<input required type="text" name="firstname"></label>
        <label>Last name:<input required type="text" name="lastname"></label>
    </p>
    <p>
        <label for="email">E-mail address:<input required type="email" id="email" name="usersEmail" autocomplete="on" aria-describedby="Requirements" ></label>
        <aside id="Requirements">Required</aside>

        <input type="submit" value="Submit my suggestion">
        <input type="reset" value="Cancel">
    </p>
</form>

Oksana Chumak

创建于 2020年11月13日 13:27

Tag <p> only permits phrasing content (see https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/p).

You are using <aside> tag in <p> while it's flow content (see https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/aside).

Please start new topics for new issues not related to the subject of the current topic.

请先登录再写评论。