element-plus [Component] date picker's popper trigger has aria-expanded which causes accessibility issues

kwvwclae  于 2个月前  发布在  其他
关注(0)|答案(8)|浏览(34)

Bug Type: Component

Environment

  • Vue Version: 3.2.47
  • Element Plus Version: 2.3.3
  • Browser / OS: Chrome 114.0.5735.90 / Windows 10 Pro
  • Build Tool: Vite

Reproduction

  • el-date-picker
  • el-popper
  • el-tooltip

Element Plus Playground

Steps to reproduce

Inspect the date picker tooltip's trigger div

What is Expected?

date picker tooltip's trigger div should not have an aria-expanded attribute

What is actually happening?

date picker tooltip's trigger div has an aria-expanded attribute

Additional comments

I'm using axe DevTool chrome extension to find accessibility issues and it finds this issue which is caused by aria-expanded attribute. I think this happens because "Though a tooltip may appear and disappear, as its appearance is automatic and not intentionally controlled by the user, the aria-expanded role is not supported."

fxnxkyjh

fxnxkyjh1#

I tried solving this myself and my investigation led to this component. Removing :aria-expanded="ariaExpanded" would solve this issue, but there's probably a reason why it's there so I didn't want to break something 😄

vxqlmq5t

vxqlmq5t2#

@btea could you look at this one too? 🙇

yfjy0ee7

yfjy0ee75#

IMO, the aria-* tags should be added to the input instead of the current div tag.

aria-expanded is a label that must exist

e5njpo68

e5njpo686#

Because the Tab focus on the input instead of div

vfh0ocws

vfh0ocws7#

Should I attempt to fix this issue, or could anyone more knowledgeable pick this up?

相关问题