[ML] (Accessibility) Machine Learning - Overview page - Duplicate IDs

[barlowm]

Steps to reproduce
Use axe Scan

Duplicate ID - sortPopover
The euiTableHeaderMobile block of code contains a tag with the sortPopover ID.
Since this is used in each of the 2 tables this causes a "duplicate ID" violation:
Duplicate ID - sortPopover

    <div class="euiTableHeaderMobile">
        ... Additional Code ...
                    <div class="euiPopover euiPopover--anchorDownRight" id="sortPopover">
        ... Additional Code ...
                    </div>
        ... Additional Code ...
    </div>

If this tag were to be addressed explicitly by it's ID then there would end up being JS errors.
If the ID is not used to address the tag then I would recommend removing the ID which should cause no loss in functionality but would improve accessibility standings and reduce accessibility violations

Duplicate ID - customizablePagination

There is a table control which has a customizablePagination ID.
Since this is used in each of the 2 tables this causes a "duplicate ID" violation:

<div class="euiPopover euiPopover--anchorUpRight euiPopover--withTitle" id="customizablePagination">
    ... Additional Code ...
        <button class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--iconRight" type="button">
    ... Additional Code ...
        </button>
    ... Additional Code ...
</div>

Kibana Version:
7.5.0 BC2

OS:
Windows

Browser:
Chrome

Screen reader: [if relevant]
N/A

Relevant WCAG Criteria: WCAG Quick Reference
4.1.1 Parsing Level -A
The value assigned to an ID attribute must be unique to prevent the second instance from being overlooked by assistive technology. (See: ID attribute values must be unique )

See Also F77: Failure of Success Criterion 4.1.1 due to duplicate values of type ID

Relevant ARIA spec:
N/A

[elasticmachine]

Pinging @elastic/ml-ui (:ml)

[peteharverson]

The second issue here, with the duplicate customizablePagination id on the table pagination controls has been fixed for 7.6, by the change to the EuiTablePagination component which removed the id attribute, made in elastic/eui#2165 (eui build 14.8.0).

The sortPopover id in the first issue is set in the mobile sorting popover control, in the EUI EuiTableSortMobile class, src/components/table/mobile/table_sort_mobile.tsx.

[peteharverson]

The first issue, with the duplicate sortPopover id on the mobile table header controls is fixed by elastic/eui#2667, which removes the id on the EuiPopover component (included in EUI 17.2.0)

[peteharverson]

Closing as fixed for 7.6.0, as the IDs on both the mobile table sort popover (fixed in elastic/eui#2667) and the pagination popover (fixed in elastic/eui#2165) have now been removed.