Folwell Components

I am writing to suggest a structural change to the Callout component. Currently, the component uses the <aside> element as its wrapper. Based on W3C HTML5 specifications and ARIA landmark standards, this is a semantic error that negatively impacts accessibility. The <aside> element defines a "complementary" landmark. According to the W3C, a complementary landmark is a supporting section of a document designed to be tangential to the main content. However, in the Folwell design system, Callouts are frequently used to highlight primary, essential information that is central to the user's understanding of the page. Technical Issues: Landmark Confusion: Screen readers announce <aside> as a "complementary landmark." Users who navigate by landmarks may skip these sections, assuming they contain secondary info like sidebars or advertisements, rather than core content. Specification Mismatch: The HTML5 spec (which I helped specify as a former invited expert on the W3C HTML5 Working Group) states that <aside> should be used for content that "could be considered separate" from the main content. Callouts are often integrated into the primary narrative by some people. Recommended Change: Please replace the <aside> element with a <div> element (using a class for styling) or a <section> element if the callout includes a heading. This ensures the content remains part of the "main" landmark and is accessible to all users as primary information. References: W3C HTML5 Specification for the aside element. https://html.spec.whatwg.org/multipage/sections.html#the-aside-element W3C ARIA Landmarks Example for complementary roles. https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/complementary.html WebAIM HTML Semantics and Accessibility Cheat Sheet. https://webaim.org/resources/htmlcheatsheet/ HTML5 sectioning elements and screen readers https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/ Thank you.

We've attempted to create Icon + Text components using callouts and other DIY methods, but they usually have some issue. A dedicated Icon card could be a really polished, useful component. It could be a simple custom block or paragraph that uses the Fontawesome icon field and a long formatted text field. There could also be a media field for custom icons. This would allow for complete control over the display of the icon and its size compared to the text. US Design system is a good example: https://designsystem.digital.gov/ And University of Maryland: https://designsystem.umd.edu/components/icon-card I've done some work on codepen to show the options that could be built-in to an icon card component: https://codepen.io/nels2371/full/gOVmNWZ

The mega menu for the Folwell theme is designed to be fully responsive and meets all accessibility requirements including contrast checks, tabbing and arrow navigation, and aria roles.

Overview: I am writing to request an enhancement to the Folwell theme to improve accessibility and functionality for users who heavily utilize accordion components in their Drupal Lite sites. Currently, all accordion drawer titles are tagged as Heading 3 (H3), which does not align well with the content structure of many sites, including mine. Accessibility and Usability Concerns: The use of H3 for accordion titles can create accessibility issues, as it may not accurately reflect the content hierarchy. For my site, and likely for many others, Heading 2 (H2) would be more appropriate. This adjustment would not only enhance the accessibility of the content but also improve the overall user experience by providing a clearer and more logical structure without the need to add unnecessary headers just for accessibility purposes. Proposed Solution: I propose that the Folwell theme be updated to allow users to select the appropriate heading level for accordion titles. This flexibility would enable site administrators to choose between H2, H3, or other heading levels based on their specific content needs and accessibility requirements. Benefits: Improved Accessibility: Aligning heading levels with content structure ensures that screen readers and other assistive technologies can accurately interpret and navigate the site. Enhanced User Experience: A logical and consistent heading structure improves readability and usability for all users. Compliance with Accessibility Guidelines: Providing flexible heading options helps ensure that sites adhere to accessibility standards and best practices. Conclusion: Implementing this feature would be highly beneficial for a wide range of users, particularly those who prioritize accessibility. By allowing flexible heading levels for accordion titles, the Folwell theme can better support diverse content structures and enhance the overall functionality of Drupal Lite sites. Thank you for considering this request. I believe this enhancement will make a significant positive impact on the accessibility and usability of sites using the Folwell theme.

The text alignment isn't working well with Link Purpose. Looks like the display: flex and justify-content: space-around on the a:link is causing the alignment issue.

I noticed the CKEditor button interface changed a little bit. Since it updated I have found that it is not saving previously selected preferences. On ccel.umn.edu/cesp , we have two buttons at the top that are full-width buttons but anytime we make an edit on that page the button will revert back to a "regular button".

We noticed in Pope Tech that some of our Drupal sites have 'Layout table' accessibility alerts that look like they're in the search block provided by the umn_search module. I see that they do have the role="presentation" so maybe this isn't so much of a bug, but it would be great if the layout tables could be replaced with something else.

University Marketing Communications is interested in extending available backgrounds, which may include gradients, skewed backgrounds, and patterns. As we explore this functionality, curious of the interest with the community and any parameters we should consider.

University Marketing Communications is looking into adding parallax scrolling — which would give a dynamic, 3D effect to our web presence. As we explore this functionality, curious of the interest with the community and any parameters we should consider.

The One Stop and MyU links in the mobile footer are hard coded to onestop.umn.edu and the "MyU" text - I suggest the umn-footer.html.twig template be updated to utilize the onestop_link and sfs variables set in Header Options in Appearance/Theme configuration