Folwell Components

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.

Folwell could use a dedicated Testimonial component. We've attempted to create them using callouts and DIY components with Folwell utilities, but none are as polished and thought-out as they could be in a new component. Other universities have them as part of their design systems: https://www.rochester.edu/communications/resources/web-seo/wordpress-theme/testimonial/ https://stockton.edu/omni-cms-support/adding-content/testimonial-component.html We could create a testimonial that has built-in options for display styles that are designed to work in layout builder and Views. I've done some work in showing how the same HTML could be totally re-styled using just CSS: https://codepen.io/nels2371/full/JjgOvxy

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

Currently, placing individual Folwell Callouts in columns across a page does not fill the whole row to the height of the tallest callout but rather all callout heights are individually determined by the text. I would love to see premade 2-, 3- and 4-column wide Folwell callout groups that would all flex stretch to the same height based on the callout with the longest text (see images - though default would be with padding). Thanks for your consideration!

The data visualization module says "The Folwell Data Visualization Module sets the colors for this chart. This is to ensure that the chart colors match the UMN brand colors." which is fine, but the colors do not seem to match UMN brand colors.

Normal links show as expected in Maroon Callouts but the background turns white when hovered and the link text does not change color, so there is almost no contrast. Example from https://pts.umn.edu/walk-bike-and-scooter/active-mobility/gopher-bikes-program

Sticky vertical anchor navigation for long pages.

Forwarding a message originally sent to ODA per Khaled's request: I don't know if you'll be able to help with this, but I'm running into issues with linked images in Drupal fitting the accessibility requirements. Right now, screen readers are reading linked images' alt text instead of the page title of the node they lead to. I'm wondering if there's a way for the image template to recognize images that are links, and then create an aria (or simply adjust the alt text) so that it reads correctly. An example of where this is an issue comes from referenced entities, where the image field of a node is being pulled into a block on another page. Since this image field is being used in several places and isn't always clickable, we can't simply change the alt text to be the node title. This is a large issue on wam.umn.edu (which I'm aware is a heavily modified site that uses our own stylized subtheme), but it occurs on any Folwell site using linked images in the Views module as well. If it's possible to use some kind of if/then logic in the image template in order to adjust images that are links, it would solve a great deal of issues now and down the line. Not sure if this is even possible, but I've been spinning this issue in my brain for a while. Hopefully this message makes sense. Thanks! Courtney

I'm working on website accessibility and I noticed that social media icons are flagged as empty links in popetech. An example of what I am talking about are the facebook, twitter, and instagram icons at the bottom of this page: https://honors.umn.edu/ Is this something that can be fixed on folwell's end?

The button group doesn't fit in the 2-column Phelan layout. Buttons end up expanding outside of the container. Live example: https://dl-brand-sph.dev.umn.edu/