Fight aria-role, get rid of world wrap button

Author: hasparus

src/components/index-page/use-cases/index.tsx

@@ -122,18 +122,14 @@ export function UseCases({
           <div className="3xl:flex-1" />
         </div>
 
-        <article className="relative flex h-auto flex-col bg-sec-base dark:bg-sec-darker">
+        <div className="relative flex h-auto flex-col bg-sec-base dark:bg-sec-darker">
           <Stripes />
-          <div
-            role="tablist"
-            className="flex flex-1 justify-center overflow-hidden max-lg:flex-col lg:items-center"
-          >
+          <div className="flex flex-1 justify-center overflow-hidden max-lg:flex-col lg:items-center">
             {USE_CASES.map((useCase, i) => (
               <Fragment key={useCase.label}>
                 <button
                   type="button"
-                  role="tab"
-                  aria-controls={`graphql-use-case-${i}`}
+                  role="none" // we already have one copy of this tab
                   onPointerDown={() => setSelectedIndex(i)}
                   onFocus={() => setSelectedIndex(i)}
                   aria-selected={i === selectedIndex ? "true" : undefined}
@@ -170,7 +166,7 @@ export function UseCases({
               </Fragment>
             ))}
           </div>
-        </article>
+        </div>
       </div>
     </section>
   )

src/components/index-page/what-is-graphql/api-gateway-query.mdx

@@ -1,4 +1,4 @@
-```graphql
+```graphql word-wrap=false
 query getCity($city: String) {
   cities(name: $city) {
     population

src/components/index-page/what-is-graphql/api-gateway-response.mdx

@@ -1,4 +1,4 @@
-```json
+```json word-wrap=false
 {
   "data": {
     "cities": [

src/components/pre/index.tsx

@@ -28,6 +28,7 @@ export function Pre({
 }: PreProps): ReactElement {
   const preRef = useRef<HTMLPreElement | null>(null)
 
+
   const copyButton = copy === "" && (
     <CopyToClipboard
       tabIndex={props.tabIndex}