[Feature request]: Accessibility sprint (Asset Page)

[carlosvirreira]

Contact Details

No response

Is your feature request related to a problem? Please describe?

We want to reach at least WCAG 2.2 A (AA would be best, AAA would be amazing).

Describe the solution you'd like

We have a few problematic elements in our application.

Asset Index > To reach WGAG 2.2 A.

Asset Index:

critical · WCAG 2.0 A · Success criteria 4.1.2

Buttons must have discernible text
Ensures buttons have discernible text

Affected Elements

button
$button[aria-controls="radix-:ro:"]

elementbutton.disabled
$.border-l-0.border-r.rounded-none:nth-child(1)

elementbutton.disabled
$.w-10.rotate-180.border-l

elementbutton.inline-flex
$.w-10.border-l.border-r-0:nth-child(4)

elementbutton.inline-flex
$.rotate-180.border-l-0.border-r

elementbutton.select-trigger
$.select-trigger

Asset Index: 

serious · WCAG 2.0 A · Success criteria 1.3.1
<ul> and <ol> must only directly contain <li>, <script> or <template> elements
Ensures that lists are structured correctly

Affected Elements

ul.flex
$.min-h-0 > .min-w-0.flex-col[data-sidebar="group"] > ul[data-sidebar="menu"]

Asset Index > To reach WGAG 2.2 AA.

serious · WCAG 2.0 AA · Success criteria 1.4.3
Elements must meet minimum color contrast ratio thresholds
Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

Affected Elements

text-sidebar-foreground\/70.transition-\[margin\,opa\].group-data-\[collapsible\=icon\]\:-mt-8:nth-child(1)
$.text-sidebar-foreground\/70.transition-\[margin\,opa\].group-data-\[collapsible\=icon\]\:-mt-8:nth-child(1)

span
$.font-bold > span

mt-4
$.mt-4

Assets
$.breadcrumb:nth-child(2) > a[href$="assets"][data-discover="true"]

span
$.gap-3.md\:flex.shrink-0 > .border-primary-400.bg-primary-500.hover\:bg-primary-400 > span:nth-child(2) > span

span
$.gap-\[2px\] > span

Highlight elementspan.text-gray-400
$p > .text-gray-400

Highlight elementp.hidden
$.lg\:block

Highlight elementspan.capitalize
$.lg\:block > .capitalize

Asset Index > To reach WGAG 2.2 AAA.

Elements must meet enhanced color contrast ratio thresholds
Ensures the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds

Affected elements

span
$button[icon="filter"] > span:nth-child(2) > span

span
$button[icon="sort"] > span:nth-child(2) > span

span
$.mt-2 > span:nth-child(2) > span

span.whitespace-nowrap
$.text-\[14px\].text-gray-500.font-medium:nth-child(1)

span.whitespace-nowrap
$.text-\[14px\].text-gray-500.font-medium:nth-child(3)

span.mr-4
$.mr-4

Describe alternatives you've considered

No response

Additional context

No response