Accessibility updates - main landmark roles (#17106)

* Removed multiple main tags from home page

Signed-off-by: chaitanyakaranam <chaitanya.karanam@yahoo.com>

* Removed multiple occurances of main in case-studies page

Signed-off-by: chaitanyakaranam <chaitanya.karanam@yahoo.com>

* Replaced css for main tag with .main-section class

Signed-off-by: ChaitanyaKaranam <karanam.krishna.25@gmail.com>

* Added main landmark role for all the pages

Signed-off-by: ChaitanyaKaranam <karanam.krishna.25@gmail.com>

* Force checks.

request-checks: true

assets/sass/_base.sass

@@ -70,7 +70,7 @@ section
   background-color: white
 
 section, header, footer
-  main
+  .main-section
     position: relative
     margin: auto
 
@@ -249,7 +249,7 @@ header
     color: $blue
     font-weight: normal
 
-  main
+  .main-section
     white-space: nowrap
     overflow: hidden
     clear: both
@@ -439,7 +439,7 @@ footer
   background-image: url(/images/texture.png)
   background-color: $dark-grey
 
-  main
+  .main-section
     padding: 20px 0
 
   nav
@@ -1121,7 +1121,7 @@ $feature-box-div-margin-bottom: 40px
     margin-bottom: 0
     padding-bottom: 1px
 
-    main
+    .main-section
       padding: 0 10px
       margin-bottom: 30px
 
@@ -1147,7 +1147,7 @@ $feature-box-div-margin-bottom: 40px
   a
     color: $blue
 
-  main
+  .main-section
     margin-bottom: $ocean-nodes-padding-Y
     min-height: 160px
 
@@ -1160,7 +1160,7 @@ $feature-box-div-margin-bottom: 40px
       width: 100%
       max-width: 160px
 
-  main:first-child
+  .main-section:first-child
     .image-wrapper
       max-width: 100%
 
@@ -1356,7 +1356,7 @@ $feature-box-div-margin-bottom: 40px
   #mainContent
     padding: 20px 0
 
-    main
+    .main-section
       max-width: none
 
     a
@@ -1775,7 +1775,7 @@ $feature-box-div-margin-bottom: 40px
 
 #home
   #talkToUs
-    main
+    .main-section
       padding: 30px 0
 
     h5

assets/sass/_desktop.sass

@@ -95,7 +95,7 @@ $video-section-height: 550px
       right: -25px
 
   section, header, footer
-    main
+    .main-section
       max-width: $main-max-width
 
   header, #vendorStrip, #encyclopedia, #hero h1, #hero h5, #docs #hero h1, #docs #hero h5,
@@ -108,11 +108,11 @@ $video-section-height: 550px
 
   #home
     section, header, footer
-      main
+      .main-section
         max-width: 1000px
 
   #oceanNodes
-    main
+    .main-section
       position: relative
       max-width: 830px
 
@@ -172,7 +172,7 @@ $video-section-height: 550px
     background-image: url(../images/texture.png)
     background-color: $dark-grey
 
-    main
+    .main-section
       padding: 20px 0
 
     nav

assets/sass/_size.sass

@@ -26,7 +26,7 @@ section, header, #vendorStrip
   padding-left: $full-width-paddingX
   padding-right: $full-width-paddingX
 
-  main
+  .main-section
     width: $main-width
     max-width: $main-max-width
 
@@ -59,7 +59,7 @@ header
   .nav-box + .nav-box
     margin-left: $nav-box-sibling-margin-left
 
-  main + main
+  .main-secton + .main-section
     margin-top: $main-nav-main-sibling-margin-top
 
   .left .button

assets/sass/_tablet.sass

@@ -116,7 +116,7 @@ $feature-box-div-width: 45%
       text-align: left
       margin-bottom: 18px
 
-    main
+    main, .main-section
       position: relative
       clear: both
       display: table