Add new rule no-duplicate-landmark-elements

[MelSumner]

This is a little bit of a different take on #1327 by @rajasegar
(I tried to commit to that branch but wasn't able to).

[rwjblue]

Maybe no-duplicate-landmark-elements is a better name?

[rwjblue]

Can you add an inline comment above here linking to the spec where this mapping is defined?

[MelSumner]

@rwjblue

• updated the rule name (and all references)
• added it to the a11y.js config file
• added @rajasegar as a co-author (since this will replace Add new rule: [a11y] Ensure duplicate landmark elements have unique labels #1327 )

I think it's ready to go! 👍🏻

[rrenno]

Hi @MelSumner I was wondering if you could help clear up some confusion we have about this rule.
For example we have:

    {{#if ....}}
        <div role="alert">
            Failed to build
        </div>
    {{else if .....}}
        ...
        <p role="alert">{{message}}</p>
        ...
    {{else}}
        .....
        <div role="alert">
            {{#if explanationMessage}}
            ....

The rule will flag the multiple uses of role="alert". The 'solution' seems to be adding aria-label/aria-labelledby to each tag, but my question is would the the content of the tags not be sufficient -- e.g the message of the p tag?

Otherwise it seems like we would end up with <p role="alert" aria-label={{message}}>{{message}}</p> which is a bit repetitive. Is this just a limitation of the linter or are we doing something fundamentally at odds with a11y? My understanding is a screen reader would correctly pick up the message.