chore: reduce w3c validation errors

Stefan Latsarevichrequested to merge
s.latsarevich/k3k-web-frontend:2000-w3c-html-cleanup into main

Fixed

  1. Element stop is missing required attribute offset.

Some SVG files were missing the "offset" attribute in the "stop" element. This has been added with a value of 0, which doesn't cause any visible changes.

  1. Attribute flex not allowed on element div at this point.

The HeaderContainer component's shouldForwardProp function was not configured to prevent the flex property to be passed to the underlying DOM element. This has been corrected.

  1. Attribute variant not allowed on element button at this point. ⚠️

We had to redo some work because we were using variants incorrectly. The IconButton component doesn't support variants, so it wasn't removing them from the DOM. This meant custom variants wouldn't work. I fixed this by moving the styles for the incorrect adornment and toolbar variants.

  1. Element hr not allowed as child of element button in this context.

The problem was caused by a ToolbarDivider component inside a tab. Moving it outside the tab caused a new problem with the textcolor attribute. Since the divider isn't interactive, I prevented the unnecessary attributes from being passed to the ToolbarDivider component.

  1. Element p not allowed as child of element label in this context.

We were using paragraph elements within the labels of our toggle switches. Changed Typography to the span element instead of the default paragraph.

  1. Duplicate ID path2.

The Clock icon had a path2 ID, since same icon was used in multiple places it caused conflicts because IDs must be unique within a document.

  1. Duplicate ID a

Same as no.6 but caused by different SVG assets.

  1. Element li is missing required attribute aria-checked

The layout selector component was missing the aria-checked attribute, which is important for accessibility.

  1. Attribute tracks not allowed on element div at this point.

The shouldForwardProps function for the "thumbs" component in speaker view was not preventing the tracks property from being passed to the underlying DOM element.

  1. Element div not allowed as child of element ul in this context.

The layout selector was using a <div> to display the "sorting" label within a <ul> element. This has been corrected by wrapping the label in a <li> element for proper list structure.

  1. Attribute href not allowed on element button at this point

The main navigation component on the dashboard could be either a link <a> or a button <button>, but it was incorrectly passing the href attribute to both. This has been fixed so that only link elements receive the href.

  1. Bad value dialog for attribute role on element form

Our glitchtip dialog used form component as paper on which dialog role is applied out of the box.

  1. Attribute color not allowed on element div at this point.

Color property have not been prevented on the live dot in poll dialog.

  1. Element li is missing required attribute aria-checked.

Our votes and polls listing in the meeting header used menuitemradio as item role instead of menuitem

  1. Bad value created Polls-header for attribute id on element div: id must not contain whitespace

Our accordion item used option value as an id which contained whitespaces. Fixed it using kebabCase mapper.

  1. The value of the for attribute of the label element must be the ID of a non-hidden form control.

In meeting creating our select elements wrongly placed id.

  1. The summary attribute on the table element is obsolete.

Removed.

  1. Attribute disabled not allowed on element svg at this point.

Microphone disabled icon had disabled attribute in the participant list for non-current speaker.

  1. Element p not allowed as child of element label in this context.

In the user selection list, each name in the label was wrapped in the p element instead of span.

Remaining issues

  1. The aria-controls attribute must point to an element in the same document.

The aria-controls attribute needs to reference an element that already exists in the document. Since our popovers are dynamically added to the DOM, the aria-controls on the element that triggers the popover doesn't have a valid target when it initially loads. We need to find a different way to handle this for better accessibility.

  1. Element div not allowed as child of element button in this context

We can't place a <div> directly inside a <button> element. Since we're using both anchors and buttons (with buttons specifically for logout), and both use the "Collapse" component to hide text, we'll need to adjust how that component works so it doesn't use a <div> inside the button.

  1. Bad value log for attribute role on element ul

This one is coming from our custom solution for the chat announcement. We have to come up with either different parent element or different approach.

  1. Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.)

The problem is with the breakout room section. We've put an "edit" button in the section header, which is made with a simple

. This isn't how the Material UI accordion component is meant to be used, and it's causing this error.

Closes #2000

Edited by Stefan Latsarevich

Merge request reports