Display entry #7
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| <Paragraph>{entries.category}</Paragraph> | ||
| <HeadlineTwo>{entries.name}</HeadlineTwo> |
There was a problem hiding this comment.
I am confused by the logical order: A headline should be above the text it belongs to, shouldn't it?
There was a problem hiding this comment.
I was also not sure if I could do it that way. I have taken the headline, because it is like the headline of the card, but the category as a p-tag should be above it. Would you recommend to use a p-tag instead of the headline?
The sketch from my user story perhaps shows better how i mean it:
There was a problem hiding this comment.
I agree that you use a headline, I was just wondering about the order. I would still suggest to put a headline above everything, but this is rather a design question. Maybe you can leave it this way and check for accessibility before merging.
There was a problem hiding this comment.
What do you mean by check for accessibility before merging? Checking with a screen reader?
It would also make sense to read Name (Headline), Kategorie and Adresse.
But yes, I did this for design reasons.
| import Card from './Card'; | ||
|
|
||
| describe('Card', () => { | ||
| it('renders category,name and address', () => { |
There was a problem hiding this comment.
| it('renders category,name and address', () => { | |
| it('renders category, name, and address', () => { |
src/components/Card/Card.spec.js
Outdated
| ); | ||
|
|
||
| const category = screen.getByText(/Flohmarkt/i); | ||
| const name = screen.getByText(/Faust/i); |
There was a problem hiding this comment.
Since you use a h2 element for this, you could try getByRole('heading', {name: /Faust/i}); this query is the number 1 priority have a look here.
| } | ||
|
|
||
| html { | ||
| font-size: 62.5%; |
There was a problem hiding this comment.
Why would you scale down the font-size globally? Is your app still accessible (i.e. readable for people you ave problems with small fonts)?
There was a problem hiding this comment.
Our head couch told us to do so, so that it is easier to work with rem.
A fellow student sent me this article about it: https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/
But since I want to pay special attention to accessibility, I am open to changing that if it does affect accessibility.
There was a problem hiding this comment.
Ok, I didn't know about this, so I think it's fine :)
Created first entry with static data and added storybook, styled components and testing.
User Story #1