New stats page demo

[87fmartin]

No description provided.

[smeriwether]

@Conductor-Codes review

[conductor-codes]

Suggested change

	<img
	src="/images/meta-gradient.png"
	style={{height: '3px', width: '50%'}}
	/>
	<img
	src="/images/meta-gradient.png"
	alt=""
	style={{height: '3px', width: '50%'}}
	/>

The image at the bottom of the component lacks an alt attribute. This violates WCAG 1.1.1 (Non-text Content) as screen readers cannot convey the purpose or content of the image to users who are visually impaired. Even decorative images should have alt="" to explicitly indicate they are not meaningful.

Review by Conductor

Is this review helpful? React 👍 or 👎 to let us know!

[conductor-codes]

Suggested change

	<button
	onClick={() => {
	setSelectedDifficulty('all');
	setSelectedSortMethod('views');
	}}
	style={{
	padding: '8px 16px',
	backgroundColor: '#0969da',
	color: 'white',
	border: 'none',
	borderRadius: '6px',
	cursor: 'pointer',
	}}>
	<span className="icon">↺</span>
	</button>
	<button
	aria-label="Reset filters"
	onClick={() => {
	setSelectedDifficulty('all');
	setSelectedSortMethod('views');
	}}
	style={{
	padding: '8px 16px',
	backgroundColor: '#0969da',
	color: 'white',
	border: 'none',
	borderRadius: '6px',
	cursor: 'pointer',
	}}>
	<span className="icon">↺</span>
	</button>

The reset button only contains an icon (↺) without an accessible name. This violates WCAG 1.1.1 (Non-text Content) as screen reader users won't know the purpose of this button. Icons used as interactive elements must have a text alternative either through visible text, aria-label, or aria-labelledby attributes.

Review by Conductor

Is this review helpful? React 👍 or 👎 to let us know!

[RobOBrien]

Test