edpau
@edpauAll solutions
Todo app with React and Tailwind CSS
#accessibility#jest#react#react-testing-library#tailwind-cssPSubmitted 5 months agoPlease review and comment on my unit test and integration test.
Contact Form with React/ React Hook Form/ Typescript
#accessibility#tailwind-css#reactPSubmitted 6 months agoWhat I want to do
- I am trying to use SVG to replace the default radio button to give my webpage a consistent look across different browser.
- I want the SVG outer circle to grey out when it is not clicked
- when the radio button is clicked (in my case, it is the label, I wrapped the label around the radio button), then colored when it is clicked
SVG I used has separate into parts for better control (please see in README)
What I read and try
-
I read Inclusively Hiding & Styling Checkboxes and Radio Buttons and learn to use opacity 0 over visibility for better accessibility.
- using opacity 0 over sr-only can improve accessibility for users navigating by touch
- Both display: none and visibility: hidden remove the element they hide from the DOM and accessibility tree
-
I learnt from this two code pen, using Vanilla CSS to style the SVG when the checkbox/ Radio button is clicked. Their SVG has separate into parts for better control using class name
-
SVG example (please see in README)
-
using Vanilla CSS to style the SVG when it is checked
input:checked + svg { .radioDot, .radioOutline { opacity: 1; } } -
I also learn from this example, Custom Radio Buttons with only Tailwind CSS, this example taught me to use Tailwind peer.
- In Tailwind CSS, the peer-checked class can style elements that are siblings of the peer element when the peer element is checked.
Problem I have
- I cannot control individual parts of the SVG using Tailwind
- The peer-checked class will not work in my case because the element is not a direct sibling of the input element.
- In Tailwind CSS, I cannot directly target sibling elements with complex selectors like input:checked + svg .radioDot because Tailwind CSS is a utility-first CSS framework that generates utility classes for individual elements.
input:checked + svg { .radioDot, .radioOutline { opacity: 1; } }How I solve it
- I used a similar approach as https://marek-rozmus.medium.com/styling-checkbox-with-tailwind-46a92c157e2d
- I put two SVG on top of each other and change their opacity.
Please suggest a better solution.
Tip Calculator with TS and Grid
#bemPSubmitted 6 months agoPlease kindly review how I make the radio button, please advise how I can improve accessibility.
Time Tracking Dashboard with typescript and grid
#bem#typescriptPSubmitted 6 months agoPlease comment on my typescript and code logic.
Newsletter sign-up form with TS
#bemPSubmitted 6 months agoI am trying to improve my TS and JS skills, please kindly comment on my code.
I am also looking into how to set explicit width and height on the SVG to reduce layout shifts and improve CLS, while making the SVG responsive, please advise the best practice.
Responsive article preview component
#bem#accessibilityPSubmitted 7 months agoI tried to use aria-expanded, aria-controls and aria-haspopup to improve accessibility for the share menu, to inform assistive technologies about the current state of the expandable share menu. Please comment on my approach.
improving accessibility has turned to be more challenging than I expected. For the mobile version, I need to hide the author content from screen readers, while for the desktop version, it doesn't need to be hidden. There are many factors to consider.
Please advise how I can improve the accessibility.
Please also share any good articles on accessibility for beginner.
Testimonials grid section with React and Tailwind
#react#tailwind-cssPSubmitted 7 months agoI aimed to make the TestimonialCard component reusable, but each card has slightly different styles. To handle this, I added conditional Tailwind classes like ${bgColor} to match each card's unique style.
However, this increased the complexity of the component, reducing its readability and maintainability. It became harder to follow the logic, as the dynamic classes added clutter to the code. Balancing reusability with clarity is hard.
Please advise how I can improve.
Product-preview-card with React and Tailwind
#react#tailwind-cssPSubmitted 8 months agoPlease kindly comment on my semantic Tailwind CSS setup.
Please also comment on my code, please help me to improve.
Many thx.
Advice generator with REST API
#accessibility#bemPSubmitted 8 months agoI structured the JavaScript code with modularity and future testing in mind. I implemented:
- Error Handling: i.e.4xx-5xx HTTP Status
- Handle Edge Cases: validate Api Response
- Provide Feedback to Users: Loading Indicator and Error Feedback
- Debouncing the Button Click
- Accessibility Considerations,
aria-busy,aria-live="polite” - Use init()
Please comment on my JavaScript code design on fetching and display the advice from the Advice Slip API.
What area should I look into for improvement? Any good link?
Responsive Recipe Page
#bemPSubmitted 8 months agoIn mobile size, the image at the top will have a full width, and not having a padding just like the sections below it. But in the desktop size, it will have a padding the same as the sections below it.
I started off with giving overall padding to the white card, but it will give padding to the image padding in mobile size. So my approach is give padding to each sections individually. It is time consuming and not elegant.
I tried to keep the html as semantic as possible, I didn't want to div the sections into a big div and have an overall padding to it.
Please advise how I can do better.
Responsive QR code component
#bemPSubmitted 8 months agoI tried to match the design of the card description, I want the last line of text to show "the next level" instead of "next level" , just like the Figma design, so I put a width 256px in the p tag, it forces the "the" to go to the last line.
Please advise is there any better way to achieve the same result. Thx
Responsive social links profile using flexbox
#accessibilityPSubmitted 8 months ago- Please comment on the semantic html structure I used.
- Please suggest accessibility features I should explore.
