I am using AMP web component framework.

PageSpeed Insights showing errors for Tab Panels with amp-selector.
errors as follows:

[aria-*] attributes do not match their roles

Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.

ARIA input fields do not have accessible names

I tried with the default example but still have the issues,
So read document and changed code but still no luck.
My code as follows:

    <header id="header" class="header background_blue_dark">
    <amp-selector class="tabs-with-selector" role="tablist" on="select:contactTabPanels.toggle(index=event.targetOption, value=true)" keyboard-select-mode="focus">
     <div id="contact-tab1" role="tab" aria-selected="false" aria-controls="contact-tabpanel1" aria-label="Email" option="0">✉ Email</div>
     <div id="contact-tab2" role="tab" aria-selected="true" aria-controls="contact-tabpanel2" aria-label="Phone" option="1">☎ Phone</div>
     <div id="contact-tab3" role="tab" aria-selected="false" aria-controls="contact-tabpanel3" aria-label="WhatsApp" option="2">✆ WhatsApp</div>
   </amp-selector>
   <amp-selector id="contactTabPanels" class="tabpanels">
     <div id="contact-tabpanel1" aria-selected="false" role="tabpanel" option aria-labelledby="contact-tab1"><a href="mailto:[email protected]">✉ [email protected]</a></div>
     <div id="contact-tabpanel2" aria-selected="true" role="tabpanel" option selected aria-labelledby="contact-tab2"><a href="tel:+442080049655">☎ 00000000</a></div>
     <div id="contact-tabpanel3" aria-selected="false" role="tabpanel" option  aria-labelledby="contact-tab3"><a href="https://api.whatsapp.com/send?phone=000000amp;text=Hi">✆ 00000000</a></div>
   </amp-selector>

Could you please someone help me to fix these errors?