product/components/popovers

ID:
product/components/popovers
Automated score:
93.6
URL:
https://stackoverflow.design/product/components/popovers
View JSON file

8 violations: Light: 2Dark: 2HC Light: 2HC Dark: 2

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<a id="reference-element" class="s-link s-link__inherit" aria-controls="popover-example-3" aria-expanded="true">
                        Follow question
                    </a>

Target

#reference-element

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-expanded="true"

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<a id="reference-element" class="s-link s-link__inherit" aria-controls="popover-example-3" aria-expanded="true">
                        Follow question
                    </a>

Target

#reference-element

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-expanded="true"

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<a id="reference-element" class="s-link s-link__inherit" aria-controls="popover-example-3" aria-expanded="true">
                        Follow question
                    </a>

Target

#reference-element

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-expanded="true"

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<a id="reference-element" class="s-link s-link__inherit" aria-controls="popover-example-3" aria-expanded="true">
                        Follow question
                    </a>

Target

#reference-element

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-expanded="true"

Ensures the contrast between foreground and background colors meets APCA custom level conformance minimums thresholds. Elements must meet APCA conformance minimums thresholds. Help URL

HTML

<a href="https://popper.js.org/popper-documentation.html#Popper.placements">[placement]</a>

Target

.stacks-section:nth-child(4) > .overflow-x-auto.mb32:nth-child(4) > table > tbody > tr:nth-child(7) > th[scope="row"] > .stacks-code > a

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 56.8Lc (foreground color: #1b75d0, background color: #e3e6e8, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="https://popper.js.org/popper-documentation.html#Popper.placements">[placement]</a>

Target

.stacks-section:nth-child(5) > .overflow-x-auto.mb32:nth-child(4) > table > tbody > tr:nth-child(7) > th[scope="row"] > .stacks-code > a

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 56.8Lc (foreground color: #1b75d0, background color: #e3e6e8, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

Ensures the contrast between foreground and background colors meets APCA custom level conformance minimums thresholds. Elements must meet APCA conformance minimums thresholds. Help URL

HTML

<div class="stacks-badge-dotnet--text d-flex flex__center brr-sm px8 py4">Razor</div>

Target

.stacks-badge-dotnet--text

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.6Lc (foreground color: #252627, background color: #9e92c7, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="https://popper.js.org/popper-documentation.html#Popper.placements">[placement]</a>

Target

.stacks-section:nth-child(4) > .overflow-x-auto.mb32:nth-child(4) > table > tbody > tr:nth-child(7) > th[scope="row"] > .stacks-code > a

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 57Lc (foreground color: #90c4f9, background color: #424548, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="https://popper.js.org/popper-documentation.html#Popper.placements">[placement]</a>

Target

.stacks-section:nth-child(5) > .overflow-x-auto.mb32:nth-child(4) > table > tbody > tr:nth-child(7) > th[scope="row"] > .stacks-code > a

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 57Lc (foreground color: #90c4f9, background color: #424548, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds. Elements must meet enhanced color contrast ratio thresholds. Help URL

HTML

<a href="https://popper.js.org/popper-documentation.html#Popper.placements">[placement]</a>

Target

.stacks-section:nth-child(4) > .overflow-x-auto.mb32:nth-child(4) > table > tbody > tr:nth-child(7) > th[scope="row"] > .stacks-code > a

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.87 (foreground color: #145799, background color: #e3e6e8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<p class="fc-light">

Target

div[data-controller="section"] > .fc-light

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="https://popper.js.org/popper-documentation.html#Popper.placements">[placement]</a>

Target

.stacks-section:nth-child(5) > .overflow-x-auto.mb32:nth-child(4) > table > tbody > tr:nth-child(7) > th[scope="row"] > .stacks-code > a

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.87 (foreground color: #145799, background color: #e3e6e8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds. Elements must meet enhanced color contrast ratio thresholds. Help URL

HTML

<a href="https://popper.js.org/popper-documentation.html#Popper.placements">[placement]</a>

Target

.stacks-section:nth-child(4) > .overflow-x-auto.mb32:nth-child(4) > table > tbody > tr:nth-child(7) > th[scope="row"] > .stacks-code > a

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.98 (foreground color: #8cbff2, background color: #424548, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="https://popper.js.org/popper-documentation.html#Popper.placements">[placement]</a>

Target

.stacks-section:nth-child(5) > .overflow-x-auto.mb32:nth-child(4) > table > tbody > tr:nth-child(7) > th[scope="row"] > .stacks-code > a

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.98 (foreground color: #8cbff2, background color: #424548, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1