Improve accessibility with semantic HTML and ARIA updates#2195
Improve accessibility with semantic HTML and ARIA updates#2195Nakshatra480 wants to merge 11 commits intojson-schema-org:mainfrom
Conversation
|
Hi @Nakshatra480! Thanks a lot for your contribution! I noticed that the following required information is missing or incomplete: kind of change description Please update the PR description to include this information. You can find placeholders in the PR template for these items. Thanks a lot! |
built with Refined Cloudflare Pages Action⚡ Cloudflare Pages Deployment
|
|
Hi @Nakshatra480! Thanks a lot for your contribution! I noticed that the following required information is missing or incomplete: kind of change description Please update the PR description to include this information. You can find placeholders in the PR template for these items. Thanks a lot! |
|
Hi @Nakshatra480! Thanks a lot for your contribution! I noticed that the following required information is missing or incomplete: kind of change description Please update the PR description to include this information. You can find placeholders in the PR template for these items. Thanks a lot! |
|
Hi @Nakshatra480! Thanks a lot for your contribution! I noticed that the following required information is missing or incomplete: kind of change description Please update the PR description to include this information. You can find placeholders in the PR template for these items. Thanks a lot! |
|
Hi @Nakshatra480! Thanks a lot for your contribution! I noticed that the following required information is missing or incomplete: kind of change description Please update the PR description to include this information. You can find placeholders in the PR template for these items. Thanks a lot! |
…wn to improve coverage
|
Hi @Nakshatra480! Thanks a lot for your contribution! I noticed that the following required information is missing or incomplete: kind of change description Please update the PR description to include this information. You can find placeholders in the PR template for these items. Thanks a lot! |
|
Hi @Nakshatra480! Thanks a lot for your contribution! I noticed that the following required information is missing or incomplete: kind of change description Please update the PR description to include this information. You can find placeholders in the PR template for these items. Thanks a lot! |
Fixes formatting issues in Cypress component test files that were causing CI lint checks to fail. Signed-off-by: Nakshatra Sharma <sharma.cs.snu@gmail.com>
|
Hi @Nakshatra480! Thanks a lot for your contribution! I noticed that the following required information is missing or incomplete: kind of change description Please update the PR description to include this information. You can find placeholders in the PR template for these items. Thanks a lot! |
Removes test files that were added but are not essential to the accessibility fix in issue json-schema-org#2167: - GettingStarted.cy.tsx - StyledMarkdown.cy.tsx - TableOfContentMarkdown.cy.tsx - TabsGroup.cy.tsx - Collapsible.cy.tsx These tests caused CI failures and are not part of the core accessibility improvements (semantic HTML, ARIA attributes). Signed-off-by: Nakshatra Sharma <sharma.cs.snu@gmail.com>
Updates failing Accordion tests to match actual component implementation: - Changed hover class check from 'hover:text-lg' to 'group-hover:text-blue-600' - Updated open state assertion to check 'transition-colors' and 'text-lg' - Updated closed state assertion to check 'font-medium' base class The original tests were checking for CSS classes that don't exist or are applied conditionally in ways that weren't being detected correctly. Signed-off-by: Nakshatra Sharma <sharma.cs.snu@gmail.com>
Removes unreliable CSS class assertions that fail due to Tailwind's dynamic class merging. Tests now verify: - Open state: answer visibility + icon shows '×' - Closed state: answer not visible + icon shows '+' These checks are reliable and test the actual user-visible behavior. Signed-off-by: Nakshatra Sharma <sharma.cs.snu@gmail.com>
|
Hi @AgniveshChaubey just a quick reminder, pls review this PR... |
|
ping @AgniveshChaubey |
1 participant
What kind of change does this PR introduce?
Accessibility improvement / Bug fix
Issue Number:
Screenshots/videos:
N/A - This PR focuses on semantic HTML and ARIA attribute improvements which don't change visual appearance.
If relevant, did you update the documentation?
N/A - No documentation updates required.
Summary
This PR addresses several accessibility gaps to improve keyboard navigation and screen reader support. The primary focus was replacing non-semantic interactive elements (like
divs withonClick) with proper<button>elements and ensuring all form inputs have accessible labels.Changes
divelements with<button>tags inDarkModeToggle,TabsGroup,Layout(mobile menu),Accordion, and the homepage search trigger to ensure native keyboard focus and activation.role="tablist",role="tab", androle="tabpanel"toTabsGroupfor correct screen reader announcements.aria-labelto theSearchBarinput.aria-hidden="true".Headlines.tsxto wrap heading text in anchor tags rather than placing click listeners on the heading element itself, preserving better semantic structure.DocsHelp.Does this PR introduce a breaking change?
No
Checklist