Skip to content

Redesign podcast app buttons with improved accessibility#99

Merged
si merged 1 commit intomainfrom
claude/podcast-button-styling-OzpSs
Apr 17, 2026
Merged

Redesign podcast app buttons with improved accessibility#99
si merged 1 commit intomainfrom
claude/podcast-button-styling-OzpSs

Conversation

@si
Copy link
Copy Markdown
Owner

@si si commented Apr 17, 2026

Summary

Redesigned the podcast app follow buttons to use a consistent icon-based layout with improved accessibility and visual feedback. The RSS feed link has been converted to match the button style, and button styling has been enhanced with better hover/focus states.

Key Changes

  • Podcast app buttons: Shortened button text labels (e.g., "Apple Podcasts" → "Apple") to create a more compact, icon-focused design
  • Accessibility improvements: Added title attributes to all podcast platform links for better tooltip support
  • RSS feed redesign: Converted the small text-based RSS link into a styled button matching other podcast platforms, with a new RSS icon
  • Button styling enhancements:
    • Added consistent margin spacing (0.35em 0.4em) between buttons
    • Added hover state with white box-shadow for better visual feedback
    • Updated focus state to use white box-shadow instead of darkened primary color
    • Extended transition property to include box-shadow animations
  • New asset: Added rss-color.svg icon with orange background and white RSS symbol

Implementation Details

  • All podcast platform links now follow the same visual pattern: icon + short text label
  • Button hover and focus states now use a consistent white outline style for improved accessibility
  • The RSS feed is now presented as a first-class button option alongside other podcast platforms rather than as secondary small text

https://claude.ai/code/session_01269AKU5qFipvkv14jYR1pZ

…e RSS

- Add white box-shadow halo on hover and focus for all .tdbc-button
- Add margin (0.35em vertical, 0.4em horizontal) for more breathing room
- Shorten button labels: "Apple Podcasts"→"Apple", "Youtube Music"→"Youtube", "Amazon Music"→"Amazon"
- Add title attributes with full platform names for accessibility
- Move RSS button inline with other buttons (remove <small> wrapper)
- Add rss-color.svg icon and tdbc-icon-rss class to RSS button
- Include box-shadow in CSS transition-property

https://claude.ai/code/session_01269AKU5qFipvkv14jYR1pZ
@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 17, 2026

Deploy Preview for housefinesse ready!

Name Link
🔨 Latest commit ce42fc9
🔍 Latest deploy log https://app.netlify.com/projects/housefinesse/deploys/69e1fce39cc15900086fe211
😎 Deploy Preview https://deploy-preview-99--housefinesse.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
❌ Deployment failed
View logs
hf ce42fc9 Apr 17 2026, 09:19 AM

@si si merged commit 9aaf897 into main Apr 17, 2026
5 of 6 checks passed
@si si deleted the claude/podcast-button-styling-OzpSs branch April 17, 2026 09:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants