Updating images styling and accessibility for minitocitems (#22976)

* updating images styling on design systems feedback

* maintaining ul li structure for accessiblity

Co-authored-by: Octomerger Bot <63058869+Octomerger@users.noreply.github.com>

Author: gracepark

components/article/ArticlePage.tsx

@@ -46,7 +46,7 @@ export const ArticlePage = () => {
   const renderTocItem = (item: MiniTocItem) => {
     return (
       <ActionList.Item
-        as="div"
+        as="li"
         key={item.contents}
         className={item.platform}
         sx={{ listStyle: 'none', padding: '2px' }}

stylesheets/images.scss

@@ -7,12 +7,11 @@
 }
 
 .markdown-body .procedural-image-wrapper img {
-  border-radius: 5px;
-  border: 2px solid var(--color-border-subtle);
   width: auto;
   height: auto;
   max-height: 500px;
   padding: 0;
+  box-shadow: var(--color-shadow-medium);
 }
 
 // make sure images that contain emoji render at the expected size

tests/rendering/server.js

@@ -337,7 +337,7 @@ describe('server', () => {
       )
       expect($('h2#in-this-article').length).toBe(1)
       expect($('h2#in-this-article + div div ul').length).toBeGreaterThan(0) // non-indented items
-      expect($('h2#in-this-article + div div ul div div div div ul.ml-3').length).toBeGreaterThan(0) // indented items
+      expect($('h2#in-this-article + div div ul li div div div ul.ml-3').length).toBeGreaterThan(0) // indented items
     })
 
     test('does not render mini TOC in articles with only one heading', async () => {
@@ -878,11 +878,11 @@ describe('extended Markdown', () => {
   test('renders expected mini TOC headings in platform-specific content', async () => {
     const $ = await getDOM('/en/github/using-git/associating-text-editors-with-git')
     expect($('h2#in-this-article').length).toBe(1)
-    expect($('h2#in-this-article + div div ul div.extended-markdown.mac').length).toBeGreaterThan(1)
+    expect($('h2#in-this-article + div div ul li.extended-markdown.mac').length).toBeGreaterThan(1)
     expect(
-      $('h2#in-this-article + div div ul div.extended-markdown.windows').length
+      $('h2#in-this-article + div div ul li.extended-markdown.windows').length
     ).toBeGreaterThan(1)
-    expect($('h2#in-this-article + div div ul div.extended-markdown.linux').length).toBeGreaterThan(
+    expect($('h2#in-this-article + div div ul li.extended-markdown.linux').length).toBeGreaterThan(
       1
     )
   })