Textarea shows both placeholder and aria-placeholder, and thats an issue

Using accessibility-checker we see that there is an issue with textarea - its adding both placeholer and aria-placeholder which is an issue.

As an aside, in my code I do not add placeholder at all

<TextArea
        id='description'
        name='description'
        {...description}
        labelText={t('addSecret.secretForm.description')}
        invalid={!!(descriptionMeta.touched && descriptionMeta.error)}
        invalidText={descriptionMeta.error}
      />

[carmacleod]

@dakahn

I think you can just use “or null” to make sure the placeholder is not used if it is not given, i.e.

      placeholder={placeholder || null}
      aria-placeholder={placeholder || null}

Do you need to support IE11? If not, then you don’t need to use aria-placeholder at all, because modern browsers all map the placeholder attribute of HTML textarea to aria-placeholder automatically. (Actually, even in IE11, NVDA reads the placeholder, but JAWS doesn’t.)

The only “modern” reason to use aria-placeholder would be if you decide to switch the implementation to a div contenteditable or something that doesn’t support placeholder… but then you would have a bunch more work to do, so don’t do that. 😃

[alon24]

This is not a fix, it does not fix the issue, it just hides it if its null. The issue is that there is BOTH placeholder and aria-placeholder So are you saying this is ok, and the tester is wrong?