aria-practices
aria-practices copied to clipboard
w3c
Create a patterns directory tree with a separate file for each pattern and move all examples inside the patterns directory tree
The ignore files probably need to be updated for the new paths to continue to be ignored for some of the vendored files:
- https://github.com/w3c/aria-practices/blob/main/.eslintignore
- https://github.com/w3c/aria-practices/blob/main/.stylelintignore
- https://github.com/w3c/aria-practices/blob/6aaf4d48fc690a9d5ddbfbec32cfc7f15a16dd40/cspell.json#L264
@alflennik, I believe there are 5 work items left to fully stabalize this branch:
- Merge #2521: Do this whenever you are ready. I'm done with it AFAIK. Let me know if you need more from me.
- Merge #2532: Jon and I have finished work. It is ready for you to review and merge.
- Add missing image content from the other repo. I don't know if this is necessary before merge; we could do later if you prefer. Seemslike we'd avoid more churn in the build script if we do it now.
- Resolve conflicts due to other PRS that have been merged to main.
- Merge in changes from #2518. I have not yet merged that to main. I am still waiting on review from you. If it looks good, I will do that merge. Then, you can pull that changed file into this branch as well.
The other outstanding item is the link checking. I'm still awaiting the plan for how integration of that will be sequenced and how we will handle the role-reference, property-reference, and state-reference links.
@jongund, @curtbellew, @helen-libit, @a11ydoer, and @shirsha,
We don't yet have a preview link for this repository restructure pull request. There have been some complications with Netlify.
@alflennik or @s3ththompson , do you have an update on the ETA for preview?
I know it is a holiday week for many. If you can, I am still hoping we can target having PR review complete by the November 29 meeting. Of course, that is dependent on our ability to get the Netlify problem resolved so that you have the site preview available for sufficient time.
I have assigned buckets of pages to each of you. Please see the top comment in the PR for instructions and the list of pages in each bucket:
- Bucket 1: Jon and Curt
- Bucket 2: Helen and Jemma
- Bucket 3: Jon and Siri
@jongund, @curtbellew, @helen-libit, @a11ydoer, and @shirsha,
We have a preview link! The underlying problem with using the W3C Netlify account for preview is not resolved; Alex has worked around it by using a Bocoup Netlify account. So, please ignore the domain in the preview address bar.
I took a quick look and found a couple issues on the patterns page and the practices page (see below).
Please refer to the buckets of pages in the top comment of this PR and Compare the preview of pages in this pull request at: https://eloquent-palmier-c2b66e.netlify.app/aria/apg/ To the pages in production at: https://www.w3.org/WAI/ARIA/apg/
Provide feedback on this PR by going to the files tab , using the "Review Changes" button to start a review, and putting your feedback in the review comment composer. You don't need to comment on the specific file lines. If you didn't find problems in your bucket of pages, please check the radio for approve, otherwise choose request changes. Please be sure to include the URLs of pages with problems in your comment.
Known Problems
@alflennik, I noticed the following issues:
- The preview patterns page differs from patterns in production:
- The h2 elements include the word "Pattern", which is filtered out in production. I am pretty sure it is preferable to do that filtering. We can check with TF members.
- Slider multi-thumb is before slider; it should follow slider.
- The preview Practices differs from Practices in Production: The sequence of practices is incorrect in preview.
I notice that the heading "Note" in the green note box is different:
- on the Preview page: it's an H3 element with black font color and a capital N.
- on the Production page: it's a SPAN element within a DIV that has a role of "heading" and an aria-level of 4. The font color is green and it's all caps.
Practices page
- the order of the cards are different as noted by @a11ydoer and @mcking65 in the comment above
- when the viewport's width is less than 960px, there are more space between the "Page Contents" menu and the heading in the preview site than in the production site. The wider space looks nice. I would suggest that we apply it to the production site.
Styles for the "Warning" div are different:
- In Preview version, the box has a left vertical border, the heading is H3, and the color is darker pink.
- In Production version, the box has a red border on all sides, the heading is an SPAN element wrapped in a Div with a heading level 5, a triangle warning icon precedes the heading The preview version looks nicer. I would suggest that we apply it to the production site.
Code element has extra space at the top in the Preview version. I would suggest to remove it.
All Example pages-
- It might be intentional but the WAI-ARIA heading text in the preview is just a heading with no use of the abbr tag.
Production version -
<h2 id="wai-aria-roles-states-and-properties-1" tabindex="-1"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Roles, States, and Properties</h2>Preview version -<h2 id="wai-ariaroles,states,andproperties">WAI-ARIA Roles, States, and Properties</h2> - When on an example page Production - active tab is "Index" Preview - active tab is "Patterns"
Index page
- same as on the Practices page, when the viewport's width is less than 960px, there are more space between the "Page Contents" menu and the heading in the preview version than in the production version. I would suggest to apply the wider space to the production site.
- there are two on-page links in the "About the Index" section in the preview version: 1) Examples by Role; 2) Examples by Properties and States. I suggest to keep them.
Alert Dialog Example
- LInk text differs (this may be intention as it appears to differ in all examples) Preview - The below example of a confirmation prompt demonstrates the Alert Dialog Pattern. It also includes an example of the Alert Pattern to make comparing the experiences provided by the two patterns easy. Production - The below example of a confirmation prompt demonstrates the design pattern for an alert dialog. It also includes an example of the design pattern for an alert to make comparing the experiences provided by the two patterns easy.
Button Examples (IDL Version) Example
- "Important" section looks very different. Becomes a heading level 3 in preview.
Auto-Rotating Image Carousel Example with Buttons for Slide Control Example
- In the Preview the image is a broken image so nothing appears in the carousel except the controls.
Auto-Rotating Image Carousel with Tabs for Slide Control Example
- In the Preview the image is a broken image so nothing appears in the carousel except the controls.
- The following text differs and is not in an ordered list in the Preview. The text "Dual-state: The most common type of checkbox, it allows the user to toggle between two choices -- checked and not checked. Tri-state: This type of checkbox supports an additional third state known as partially checked."
- When the "Notes" textarea is empty the "Discard" button visually appears to be disabled in Preview whereas in Production it appears enabled. In both cases aria-disabled="true" however it is still interactive in both cases as it is not removed from the tabindex.
Practices => Developing a Keyboard Interface: some link texts are different
In the "Fundamental Keyboard Navigation Conventions" section
- Preview: APG patterns vs. Production: ARIA design patterns (both go to "Patterns" page)
- Preview: Tree View Pattern vs. Production: ARIA tree pattern (both go to "Tree View [Pattern]" page)
- Preview: Menu and Menubar vs. Production: Menu or menu bar
- Preview: Radio Group vs. Production: Radiogroup
- Preview: Treegrid vs. Production: Tree Grid
In the "Keyboard Navigation Between Components (The Tab Sequence)" section
- Preview: HTML tabindex vs. Production: [HTML] tabindex
- Preview: SVG2 tabindex vs. Production: [SVG2] tabindex
In the "Keyboard Navigation Inside Components" section
- Preview: APG Patterns vs. Production: Design Patterns and Widgets
In the "Managing Focus in Composites Using aria-activedescendant" section and the "Designing the Scope and Behavior of Keyboard Shortcuts" section
- Preview: Keyboard Navigation Between Components vs. Production: Keyboard Navigation Between Components (The Tab Sequence)
In the "Focusability of disabled controls" section
- Preview: menu and menubar pattern vs. Production: Menu or Menu bar
- Spacing around code snippets is very different from Production to Preview.
- Tested for Reflow and Text Spacing standards respectively and things looks great.
Practices => Grid and Table Properties page
- The Code and Pre elements have more space at the top in the production version.
Disclosure examples:
Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions - link texts differ
- Preview: Disclosure Pattern vs. Production: disclosure design pattern
Example Disclosure (Show/Hide) for Image Description
- Looks good
Example Disclosure Navigation Menu with Top-Level Links Example Disclosure Navigation Menu
- Under "About This Example", there is a Div with a class of "advisement", the preview version has an extra H3 heading "Important" and a yellow/beige background with a dark yellow left vertical border while the production version has a white background with a black left border and doesn't have a heading. The text colors are different as well.
** Slider:**
The text font is different from production and hard to read
under "WAI-ARIA Roles, States, and Properties" heading, in the last bullet point, vertical and aria-orientation are in blue text instead of black.
Slider -color viewer: Preview: Slider Pattern) vs. Production: Slider design pattern
Similar examples include:
Preview: Rating Radio Group Example: vs Production: Rating Slider Example:
It has Color Viewer Slider Example:
There were a couple comments about font size.
@a11ydoer said:
- overall/general/repeated content section including index page
- The font size for new one has gotten much smaller and the pages are hard to read.
I looked around various pages on the site, including the home page, the example index page, the about page and patterns pages, and in all the cases I checked, the computed font is Noto Sans with a font-size of 16px.
I'm attaching a couple of images from the example index page that hopefully illustrates what I'm seeing:
Although the copy has a small difference I think you can see that the font and font size looks identical. I was wracking my brain about what could account for the difference you describe and my best guess is that possibly the website zoom level is different.
I was wondering if you would be able to check the zoom level of both staging and production and confirm that the two are the same? If you are using Google Chrome the zoom level can be viewed by opening the triple dot menu on the upper right hand corner.
If the zoom level is the same, would you be able to attach some screenshots showing the difference you are seeing? Thank you Jemma!
There was a similar comment from @shirsha:
** Slider:**
The text font is different from production and hard to read
under "WAI-ARIA Roles, States, and Properties" heading, in the last bullet point, vertical and aria-orientation are in blue text instead of black.
Please correct me if I'm wrong, but it sounds like you're saying that there is a difference in the Slider WAI-ARIA Roles, States, and Properties section. I wasn't able to find a difference.
I'm attaching two screenshots below which show a very similar visual appearance. In addition to the visual inspection I also looked at the computed CSS properties. In both cases the text has a 16px font size. Both links and code snippets have the same blue color (#036) which pass WCAG color contrast standards with a 12.6:1 contrast ratio.
I was wondering if you could also check your browser zoom level @shirsha, like I described above for Jemma. Assuming the zoom level is the same, would you be able to provide screen shots illustrating the difference you are seeing?
Thank you both again for your help reviewing the site.
@mcking65 here are your notes:
The preview patterns page differs from patterns in production: The h2 elements include the word "Pattern", which is filtered out in production. I am pretty sure it is preferable to do that filtering. We can check with TF members.
This will be fixed when I deploy the next version.
Slider multi-thumb is before slider; it should follow slider.
This will be fixed as well.
The preview Practices differs from Practices in Production: The sequence of practices is incorrect in preview.
Good catch. I am not sure how the practices are organized in production, it seems random. In my latest version the list will be alphabetical by practice title. Let me know if there is another criteria I should use to sort these.
@helen-libit Thank you for taking the time to look through the site. Here are some updates on the issues you found:
I notice that the heading "Note" in the green note box is different:
- on the Preview page: it's an H3 element with black font color and a capital N.
- on the Production page: it's a SPAN element within a DIV that has a role of "heading" and an aria-level of 4. The font color is green and it's all caps.
Thank you for noticing this, this is a genuine and expected change - we made changes to the look and feel of the note sections, as well as warning sections and "advisement" sections. We also updated the heading levels to be accurate given their locations in the flow of the page.
Practices page
the order of the cards are different as noted by @a11ydoer and @mcking65 in the comment above when the viewport's width is less than 960px, there are more space between the "Page Contents" menu and the heading in the preview site than in the production site. The wider space looks nice. I would suggest that we apply it to the production site.
Thank you for noticing, this was a minor spacing improvement that I snuck in, and it is expected.
Styles for the "Warning" div are different:
In Preview version, the box has a left vertical border, the heading is H3, and the color is darker pink. In Production version, the box has a red border on all sides, the heading is an SPAN element wrapped in a Div with a heading level 5, a triangle warning icon precedes the heading The preview version looks nicer. I would suggest that we apply it to the production site. Code element has extra space at the top in the Preview version. I would suggest to remove it.
Good find, as noted above, this is part of the consistency improvements to notes, warnings and advisements.
Practices page
the order of the cards are different as noted by @a11ydoer and @mcking65 in the comment above
This will be fixed in the next version.
When the viewport's width is less than 960px, there are more space between the "Page Contents" menu and the heading in the preview site than in the production site. The wider space looks nice. I would suggest that we apply it to the production site.
Great!
Styles for the "Warning" div are different: In Preview version, the box has a left vertical border, the heading is H3, and the color is darker pink. In Production version, the box has a red border on all sides, the heading is an SPAN element wrapped in a Div with a heading level 5, a triangle warning icon precedes the heading The preview version looks nicer. I would suggest that we apply it to the production site.
Great to hear.
Code element has extra space at the top in the Preview version. I would suggest to remove it.
This will be fixed in the next version. This issue was also present in the "read me first page" and I fixed it there as well.
Index page
same as on the Practices page, when the viewport's width is less than 960px, there are more space between the "Page Contents" menu and the heading in the preview version than in the production version. I would suggest to apply the wider space to the production site.
Great.
there are two on-page links in the "About the Index" section in the preview version: 1) Examples by Role; 2) Examples by Properties and States. I suggest to keep them.
Sounds good.
Practices => Developing a Keyboard Interface: some link texts are different
In the "Fundamental Keyboard Navigation Conventions" section
Preview: APG patterns vs. Production: ARIA design patterns (both go to "Patterns" page) Preview: Tree View Pattern vs. Production: ARIA tree pattern (both go to "Tree View [Pattern]" page) Preview: Menu and Menubar vs. Production: Menu or menu bar Preview: Radio Group vs. Production: Radiogroup Preview: Treegrid vs. Production: Tree Grid
In the "Keyboard Navigation Inside Components" section Preview: APG Patterns vs. Production: Design Patterns and Widgets
In the "Focusability of disabled controls" section Preview: menu and menubar pattern vs. Production: Menu or Menu bar
Thank you for catching these changes. I recall that Matt improved the link text to be more consistent since we are calling the patterns "patterns" instead of "design patterns."
In the "Keyboard Navigation Between Components (The Tab Sequence)" section Preview: HTML tabindex vs. Production: [HTML] tabindex Preview: SVG2 tabindex vs. Production: [SVG2] tabindex
This is a consequence of changes to the build pipeline (specifically the removal of Respec). In these cases I think the new version is more representative of the editor's intent (@mcking65 feel free to weigh in if you think this change might be an issue).
In the "Managing Focus in Composites Using aria-activedescendant" section and the "Designing the Scope and Behavior of Keyboard Shortcuts" section Preview: Keyboard Navigation Between Components vs. Production: Keyboard Navigation Between Components (The Tab Sequence)
@mcking65 Let me know if you see any issue with this text change.
@a11ydoer here are some updates on the issues you found.
The font size for new one has gotten much smaller and the pages are hard to read.
See my previous comment above, where I detailed the steps I took to try to reproduce this.
The link, "fork and edit on github" is borken in "help improve this page".
By default the GitHub links are pointing at the main branch. This will be fixed when this branch is merged to main. (To confirm the link is working, I've been clicking the fork and edit button, and then, in the url bar, I've been changing "main" to "move-examples", and then the page should load correctly.)
Most of links in the footer are broken such as sitemap, resources for roles and more.(The root should be "https://www.w3.org/WAI/" not APG site root)
Great find, I had not noticed this. These thinks will start to work when the site is deployed. It would be nice for them to work in development as well, but this is in the domain of the WAI template so I cannot change their behavior.
- Practices page
- The order in the page was changed as @mcking65 mentioned in the comment
- Grid and Table Properties: look good.
- Developing a Keyboard interface: look good.
- Providing Accessible Names and Descriptions: look good
Glad to hear.
- Patterns and examples review from Disclosure through Radio
- The styling for "NOTE" is different as @helen-libit mentioned. Updated one has h3 with all lower case, note. diclosure-FAQ :The wording in the first sentence of diclosure-FAQ is different: one is "disclosure design pattern" and the updated one is "Disclosure Pattern" The similar word chanegs are shown at other patterns contents. disclosure navigation menu: Added heading and Styling of "important" section. Updated one now has "h3" of "important" (This is a good change.)
- Grid: Title is different - "Grids: Interactive Tabular Data and Layout Conatainers" vs "Grid (Interactive Tabular Data and Layout Containers) Pattern"
- Navigation menubar example: updated one has h3 for "Caution!" while production one has with p tage and all capitalization of the wod, CAUTION!
Nice attention to detail. These are expected changes.
@curtbellew here are updates on the issues you found.
All Example pages-
It might be intentional but the WAI-ARIA heading text in the preview is just a heading with no use of the abbr tag. Production version -
<h2 id="wai-aria-roles-states-and-properties-1" tabindex="-1"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Roles, States, and Properties</h2>Preview version -<h2 id="wai-ariaroles,states,andproperties">WAI-ARIA Roles, States, and Properties</h2>
This is a consequence of removing Respec from the build pipeline. I feel it may be more in line with the editor's intent. @mcking65 feel free to weigh in if you see an issue here.
When on an example page Production - active tab is "Index" Preview - active tab is "Patterns"
This is a great subtle detail you noticed. For me, this is expected behavior given the URL changes in the new version. @mcking65 or @a11ydoer let me know if either of you feel differently or want to possibly discuss this in a future TF meeting.
Alert Dialog Example
LInk text differs (this may be intention as it appears to differ in all examples) Preview - The below example of a confirmation prompt demonstrates the Alert Dialog Pattern. It also includes an example of the Alert Pattern to make comparing the experiences provided by the two patterns easy. Production - The below example of a confirmation prompt demonstrates the design pattern for an alert dialog. It also includes an example of the design pattern for an alert to make comparing the experiences provided by the two patterns easy. Button Examples (IDL Version) Example
This is expected. See above for more details about these changes.
"Important" section looks very different. Becomes a heading level 3 in preview. Auto-Rotating Image Carousel Example with Buttons for Slide Control Example
Also expected, and see above for more details.
In the Preview the image is a broken image so nothing appears in the carousel except the controls. Auto-Rotating Image Carousel with Tabs for Slide Control Example
In the Preview the image is a broken image so nothing appears in the carousel except the controls. Checkbox Pattern
Great find, this will be fixed in the next version.
The following text differs and is not in an ordered list in the Preview. The text "Dual-state: The most common type of checkbox, it allows the user to toggle between two choices -- checked and not checked. Tri-state: This type of checkbox supports an additional third state known as partially checked." Alert Dialog Example
This is expected, we made sure all patterns begin with a sentence because the sentence will be used on the pattern index page.
When the "Notes" textarea is empty the "Discard" button visually appears to be disabled in Preview whereas in Production it appears enabled. In both cases aria-disabled="true" however it is still interactive in both cases as it is not removed from the tabindex.
Nice subtle find. This example was recently overhauled. One of the fixes we added was making sure the button appeared disabled in the case that it is disabled. It is still intractable for reasons described in the example documentation, basically the desire is for it to be focusable so AT users can tab to it even when disabled. I do think the changes here are all intended.
Spacing around code snippets is very different from Production to Preview. Tested for Reflow and Text Spacing standards respectively and things looks great.
Nice find. This will be fixed in the next version.
@jongund here are updates on the issues you found.
The carousel examples are broken, images are not appearing. https://eloquent-palmier-c2b66e.netlify.app/aria/apg/patterns/carousel/examples/carousel-1-prev-next/
https://eloquent-palmier-c2b66e.netlify.app/aria/apg/patterns/carousel/examples/carousel-2-tablist/
Great find, these will be fixed in the next version.
Not critical, but there are some CSS styling issues in the calendar dialog box that should be fixed: https://eloquent-palmier-c2b66e.netlify.app/aria/apg/patterns/combobox/examples/combobox-autocomplete-none/
We discussed this find in the task force meeting and since it is not strictly related to the content reorganization we would like to address it in a future update after this work is deployed.
The tools section of the ARIA Landmark Regions example pages are missing some tools and have some outdated links: https://eloquent-palmier-c2b66e.netlify.app/aria/apg/patterns/landmarks/examples/resources.html
This will be fixed in the next version. I found the fix you are referring to when I merged main into this branch.
@alflennik You are right about the font size. My first cultprit was also the zoom level but I did not confirm the zoom level exactly because I could not expect the abnormality of zoom level when you open two pages in the same window without manually changing the zoom level for one. To investigate further, I looked into the meta tags of "initial-scale" and "user-scalable" in both files. However, it has the same tag for both. I guess that it was my own user error.
By the way, are all the font size and spacing controlled by WAI template?
Also thanks for addressing all the issues in such a prompt manner, @alflennik
@a11ydoer here are some updates on the issues you found.
The font size for new one has gotten much smaller and the pages are hard to read.
See my previous comment above, where I detailed the steps I took to try to reproduce this.
The link, "fork and edit on github" is borken in "help improve this page".
By default the GitHub links are pointing at the main branch. This will be fixed when this branch is merged to main. (To confirm the link is working, I've been clicking the fork and edit button, and then, in the url bar, I've been changing "main" to "move-examples", and then the page should load correctly.)
Most of links in the footer are broken such as sitemap, resources for roles and more.(The root should be "https://www.w3.org/WAI/" not APG site root)
Great find, I had not noticed this. These thinks will start to work when the site is deployed. It would be nice for them to work in development as well, but this is in the domain of the WAI template so I cannot change their behavior.
- Practices page
- The order in the page was changed as @mcking65 mentioned in the comment
- Grid and Table Properties: look good.
- Developing a Keyboard interface: look good.
- Providing Accessible Names and Descriptions: look good
Glad to hear.
- Patterns and examples review from Disclosure through Radio
- The styling for "NOTE" is different as @helen-libit mentioned. Updated one has h3 with all lower case, note. diclosure-FAQ :The wording in the first sentence of diclosure-FAQ is different: one is "disclosure design pattern" and the updated one is "Disclosure Pattern" The similar word chanegs are shown at other patterns contents. disclosure navigation menu: Added heading and Styling of "important" section. Updated one now has "h3" of "important" (This is a good change.)
- Grid: Title is different - "Grids: Interactive Tabular Data and Layout Conatainers" vs "Grid (Interactive Tabular Data and Layout Containers) Pattern"
- Navigation menubar example: updated one has h3 for "Caution!" while production one has with p tage and all capitalization of the wod, CAUTION!
Nice attention to detail. These are expected changes.
Hi @shirsha here are some updates to the issues you found.
** Slider:**
The text font is different from production and hard to read
under "WAI-ARIA Roles, States, and Properties" heading, in the last bullet point, vertical and aria-orientation are in blue text instead of black.
See above for more information about this issue and the steps I took to try to reproduce it.
Slider -color viewer: Preview: Slider Pattern) vs. Production: Slider design pattern
Similar examples include:
This is an expected change - see above for more information.
Preview: Rating Radio Group Example: vs Production: Rating Slider Example:
I was confused because from your comment seems like the two versions are linking to different examples, but after reviewing I can see that the apparent difference seems to be that the link text has changed to remove the word "Design" and this is expected.
It has Color Viewer Slider Example:
I wasn't sure from your comment if you noticed anything wrong but I double checked this example and didn't find any issues.
Hi @a11ydoer, you asked if the font size and spacing are controlled by WAI template, and the answer is that we do have the ability to override the template's defaults if needed.
@mcking65 @a11ydoer @jongund @curtbellew @shirsha @helen-libit here is the updated preview link: https://deploy-preview-173--aria-practices.netlify.app/aria/apg/ This should include all the fixes I mentioned above.
@mcking65 Also I was able to fix the conflicts so this branch is now mergeable.
@alflennik wrote:
I am not sure how the practices are organized in production, it seems random. In my latest version the list will be alphabetical by practice title. Let me know if there is another criteria I should use to sort these.
In production, they are organized according to importance and likely frequency of use. Most important content is floated to the top. Please match the order in production.
@helen-libit wrote:
In the "Keyboard Navigation Between Components (The Tab Sequence)" section Preview: HTML tabindex vs. Production: [HTML] tabindex Preview: SVG2 tabindex vs. Production: [SVG2] tabindex
@alflennik responded:
This is a consequence of changes to the build pipeline (specifically the removal of Respec). In these cases I think the new version is more representative of the editor's intent (@mcking65 feel free to weigh in if you think this change might be an issue).
This is a good change.
@helen-libit wrote:
In the "Managing Focus in Composites Using aria-activedescendant" section and the "Designing the Scope and Behavior of Keyboard Shortcuts" section Preview: Keyboard Navigation Between Components vs. Production: Keyboard Navigation Between Components (The Tab Sequence)
@alflennik responded:
@mcking65 Let me know if you see any issue with this text change.
I don't see the change. I see in the heading text: "(The Tab Sequence)" in both preview and production, and I see it in the source content as well. If there is some rendering where the parenthetical phrase is somehow stripped out of the heading, that should not happen.
@alflennik wrote:
@curtbellew here are updates on the issues you found.
All Example pages- It might be intentional but the WAI-ARIA heading text in the preview is just a heading with no use of the abbr tag. Production version -
<h2 id="wai-aria-roles-states-and-properties-1" tabindex="-1"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Roles, States, and Properties</h2>Preview version -<h2 id="wai-ariaroles,states,andproperties">WAI-ARIA Roles, States, and Properties</h2>This is a consequence of removing Respec from the build pipeline. I feel it may be more in line with the editor's intent. @mcking65 feel free to weigh in if you see an issue here.
I think this is OK. We don't use abbr on all instances of ARIA or WAI-ARIA.
When on an example page Production - active tab is "Index" Preview - active tab is "Patterns"
This is a great subtle detail you noticed. For me, this is expected behavior given the URL changes in the new version. @mcking65 or @a11ydoer let me know if either of you feel differently or want to possibly discuss this in a future TF meeting.
This is what we expect with the change. Great attention to detail @alflennik and @curtbellew!
@jongund @helen-libit @curtbellew @shirsha @a11ydoer
Please have one last look at the preview: https://deploy-preview-173--aria-practices.netlify.app/aria/apg/
Except for order of cards on the practices page, all unexpected changes you noted should now be resolved.
@jongund, if this is so, please change the status of your review to approved.
I think we will be ready to merge this right after the meeting on Tuesday, so it could go to production this week!!!!